Author

admin

Browsing

3 Image Picker Examples In Flutter With Tutorial

image picker flutter
In this tutorial, you will learn about Flutter Image_Picker plugin developed by flutter.dev community.

    It helps you to

  • Take pictures from Gallery and capture using camera
  • Take Videos from Gallery and record using camera

It’s better to use this plugin than start from scratch.

How to pick image from gallery or take a picture using Camera – Flutter Image_Picker?

flutter-imagepicker-example
Let’s make a simple example that deals with Flutter ImagePicker. So create a Flutter project named flutter_imagepicker_example – You can also use Flutter Create command

Before trying to do amazing things with Image_Picker plugin, Do not forget to add dependency in pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  
  image_picker: ^0.6.7+14


This is the latest version. Starting from 0.6.7, API has changed a lot, If you are using the old versions of this plugin, You should migrate to the new version.

Most important, pickImage is deprecated, you should use ImagePicker.getImage() method instead.

image picker flutter info.plist

iOS developers – You need to add some key value pairs in this file /ios/Runner/Info.plist
ios permission for image picker in flutter


NSPhotoLibraryUsageDescription
Need to take picture from photo library

This will show iOS users when they tried to open the photo library.


NSCameraUsageDescription
Need to take picture using Camera

You don’t need to do anything with Android if you are trying to develop Apps for API 29+

If you are targeting API level below 29, then you need to add


android:requestLegacyExternalStorage="true"

Clean main.dart file and put the below code. You can easily create StatefulWidget by typing stful.

import 'package:flutter/material.dart';

void main() {
  runApp(ImagePickerExample());
}

class ImagePickerExample extends StatefulWidget {
  @override
  _ImagePickerExampleState createState() => _ImagePickerExampleState();
}

class _ImagePickerExampleState extends State {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

Put below code in state class.

//Holds image File
File _image;
//ImagePicker instance.
final picker = ImagePicker();

  • First, you need to create instance of ImagePicker and File.
  • then you need to import below statements.
    • import ‘dart:io’;
    • import ‘package:image_picker/image_picker.dart’;

Let’s create image taking method called _getImage().

//ImageSource: Camera and Gallery.
 _getImage(ImageSource imageSource) async 
{
    PickedFile imageFile = await picker.getImage(source: imageSource);
//if user doesn't take any image, just return.
    if (imageFile == null) return;

    setState(
      () {
//Rebuild UI with the selected image.
        _image = File(imageFile.path);
      },
    );
  }

  • You can directly use ImageSource.camera or ImageSource.gallery in getImage() method. In this way you can implement both features and reduce code.

Let’s complete the build method and make UI.


@override
  Widget build(BuildContext context) 
  {
    return MaterialApp(
      title: 'Flutter ImagePicker Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Image_Picker Example'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: _image != null
                  ? Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Container(
                        width: 300,
                        height: 300,
                        child: Image.file(
                          _image,
                        ),
                      ),
                    )
                  : Padding(
                      padding: const EdgeInsets.all(18.0),
                      child: Text('No image selected'),
                    ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton.icon(
                  onPressed: () => _getImage(ImageSource.gallery),
                  icon: Icon(Icons.image),
                  label: Text('gallery'),
                ),
                ElevatedButton.icon(
                  onPressed: () => _getImage(ImageSource.camera),
                  icon: Icon(Icons.camera),
                  label: Text('camera'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

Let’s talk about ImagePicker pickImage() arguments:

  • source: Gallery or Camera.
  • imageQuality: value ranges from 0-100, where 100 is max/original quality. If it’s null, the original quality returned.
  • maxHeight: specify the maximum height of the Image, if it’s not specified original height returned.
  • maxWidth: specify the maximum width of the Image, if it’s null original width returned.
  • preferredCameraDevice: By default, it uses CameraDevice.rear. You can change it to CameraDevice.front.

Flutter Image_Picker – Capture Image & Store Example

image_picker flutter camera take picture
In this example, you will capture an image using camera and store it in the device storage.
Create a Flutter project named imagepicker_save_example
open pubspec.yaml, Just like mentioned above, add imagepicker dependency with path and path_provider.

  image_picker: 0.6.7+14
  path_provider: ^1.6.24
  path: ^1.7.0

  • path: Helps us to join path(usage – in this example).
  • path_provider: It gives directory location to store images(usage- in this example).
  • Don’t forget to add iOS permissions and Android, just like first Example. Check out First example, if you don’t know how to do it.

clean main.dart file, and type stful and make StatefulWidget, don’t forget to add main method and import statement or copy the below code.


import 'package:flutter/material.dart';

void main() => runApp(ImageSave());

class ImageSave extends StatefulWidget {
  @override
  _ImageSaveState createState() => _ImageSaveState();
}

class _ImageSaveState extends State {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

just like the first example, create File and ImagePicker instance in state class.


File _image;

final picker = ImagePicker();


Now it’s time to make _getImage() and store it in the device storage.


  _getImage() async 
{
//ImageSource: camera
    PickedFile imageFile = await picker.getImage(source: ImageSource.camera);
//If there is no image selected, return.
    if (imageFile == null) return;
//File created.
    File tmpFile = File(imageFile.path);
//it gives path to a directory - path_provider package.
    final appDir = await getApplicationDocumentsDirectory();
//filename - returns last part after the separator - path package.
    final fileName = basename(imageFile.path);
//copy the file to the specified directory and return File instance.
    tmpFile = await tmpFile.copy('${appDir.path}/$fileName');
//prints file location
    print('File path is :${tmpFile.path}');

    setState(() {
      _image = tmpFile;
    });
  }

  • Copy and paste the below statements.

    • import ‘package:path/path.dart’;
    • import ‘package:path_provider/path_provider.dart’;

Let’s build the User Interface of this app.

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ImagePicker - Save Image Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter ImagePicker - Save Image Example'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Center(
              child:  _image != null
        ?Container(
                height: 300,
                child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Image.file(
                          _image,
                        ),
                      ),)
                    : Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text('No Image found'),
                    ),

            ),
            ElevatedButton(
              child: Text('Capture and Store Image'),
              onPressed: _getImage,
            )
          ],
        ),
      ),
    );
  }

How to view those Image Files stored in Emulator/Device?

view saved images in flutter
In Android Studio, View -> Tool Windows -> Device File Explorer.
image location
Based on this example, images located inside data/data/com.example.imagepicker_save_example/app_flutter/image files.

How to take Video from Gallery or capture using Camera – Flutter ImagePicker

flutter image_picker record video example
Using ImagePicker, you can pick and capture videos too. So in this example, you will select or record video using ImagePicker and play it using video_player.

So create a project named flutter_imagepicker_video_example, that’s a long name.

After the project created, open pubspec.yaml and paste the below dependencies,


video_player: ^1.0.1
image_picker: ^0.6.7+14

iOS – ImagePicker

put below keys to info.plist file, located in /ios/Runner/Info.plist.

        NSPhotoLibraryUsageDescription
	permission needed - photo library
	NSCameraUsageDescription
	permission needed - camera
	NSMicrophoneUsageDescription
	permission needed - microphone

Android

if you are making an app for the above API 29, there is no configuration required. For below API 29, add the below attribute to the tag in AndroidManifest.xml.


android:requestLegacyExternalStorage="true"

Let’s configure video_player…

iOS – video_player

Paste below entries to info.plist file


NSAppTransportSecurity

  NSAllowsArbitraryLoads
  



Actually, these keys allow using Video files by URLs.

Android

paste the permission in AndroidManifest.xml




clear your main.dart file and make statefulWidget by typing stful and paste below code.


import 'package:flutter/material.dart';

void main() {
  runApp(VideoImagePicker());
}

class VideoImagePicker extends StatefulWidget {
  @override
  _VideoImagePickerState createState() => _VideoImagePickerState();
}

class _VideoImagePickerState extends State {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}


Let’s make a _pickVideo() method to take video.

//VideoPlayerController instance
VideoPlayerController _videoPlayerController;
//_video holds the selected video file.
  File _video;
//ImagePicker initialized.
  final picker = ImagePicker();

  _pickVideo(ImageSource imagesource) async 
{
    PickedFile pickedFile = await picker.getVideo(source: imagesource);
//User doesn't take the video, return
    if (pickedFile == null) return null;
//_video holds video file.
    _video = File(pickedFile.path);
//Initialize VideoPlayerController with the selected file and rebuild.
    _videoPlayerController = VideoPlayerController.file(_video)
      ..initialize().then((value) {
        setState(() {});
        _videoPlayerController.play();
      });
  }


Let’s build the UI

  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter ImagePicker - Pick Video Example'),
          ),
          body: Container(
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  (_video != null && _videoPlayerController.value.initialized)
                      ? Expanded(
                    child: AspectRatio(
                      aspectRatio: _videoPlayerController.value.aspectRatio,
                      child: VideoPlayer(_videoPlayerController),
                    ),
                  )
                      : Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text('No Videos selected'),
                  ),
                  ElevatedButton.icon(
                    icon: Icon(Icons.camera),
                    onPressed: () {
                      _pickVideo(ImageSource.camera);
                    },
                    label: Text('Record Video Using Camera'),
                  ),
                  ElevatedButton.icon(
                    icon: Icon(Icons.photo),
                    onPressed: () {
                      _pickVideo(ImageSource.gallery);
                    },
                    label: Text('Pick Video From Gallery'),
                  ),
                ],
              ),
            ),
          ),
        ));
  }


That’s all for now. if you like this post, please share it with your family and friends.
ImagePicker Flutter

3 Flutter Swiper Examples With Tutorial

In this post, you will learn about the Flutter Swiper package. Using this library, you can create image Carousel.

flutter swiper example

Let’s make a simple image carousel like above.

Create a Flutter project in Android Studio or Visual Studio. If you don’t know how to create a Flutter project in Android Studio, then read this post Android Studio Flutter Project Setup.

You can also use flutter commands to create project.

Let’s start with adding flutter_swiper dependency in pubspec.yaml.


flutter_swiper: ^1.1.6

Put below code in main.dart file


import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final imageList = [
    'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246__480.jpg',
    'https://cdn.pixabay.com/photo/2016/11/20/09/06/bowl-1842294__480.jpg',
    'https://cdn.pixabay.com/photo/2017/01/03/11/33/pizza-1949183__480.jpg',
    'https://cdn.pixabay.com/photo/2017/02/03/03/54/burger-2034433__480.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey,
        body: Swiper(
          itemCount: imageList.length,
          itemBuilder: (context, index) {
            return Image.network(
              imageList[index],
              fit: BoxFit.cover,
            );
          },
        ),
      ),
    );
  }
}
  • imageList contains list of image urls.
  • Specifies no. of images using itemCount property of Swiper.
  • Swiper widget builds carousel using image urls with the help of Image.network widget.

horizontal swipe flutter
You can change scrollDirection using scrollDirection property.


scrollDirection: Axis.vertical,

dots in swiper flutter
Now add some circle or dots at the bottom to understand how many slides are in the carousel.

 pagination: SwiperPagination(),

swiperpagination fraction flutter
Change dots and replace them with numbers.

pagination: SwiperPagination(builder: SwiperPagination.fraction),

flutter swiper control

Let’s add some control buttons on, left, and right sides.

 control: SwiperControl(),

Now you can click on both buttons to change the slides or images without swiping.

black arrows swiper

Sometimes you need to change the color of arrows, then you can use the color property.

 control: SwiperControl(color: Colors.black),

If you need to change images without swiping or taping control buttons, then you can use autoplay:true

Swiper(
          autoplay: true,
          itemCount: imageList.length,
          itemBuilder: (context, index) {
            return Image.network(
              imageList[index],
              fit: BoxFit.cover,
            );
          },
        //scrollDirection: Axis.vertical,
          //pagination: SwiperPagination(builder: SwiperPagination.fraction),
          //control: SwiperControl(color: Colors.black),
        ),

Okay. If you need to do any operation when tapping on the image, then you can use onTap property.

Swiper(
          onTap: (index) {
            print(imageList[index]);
          },
          itemCount: imageList.length,
          itemBuilder: (context, index) {
            return Image.network(
              imageList[index],
              fit: BoxFit.cover,
            );
          },
          //autoplay: true,
          //scrollDirection: Axis.vertical,
          //pagination: SwiperPagination(builder: SwiperPagination.fraction),
          //control: SwiperControl(color: Colors.black),
        ),
  • When user taps on image, it prints image url from the imageList

If you are trying to refresh the UI after onTap triggered, then you must convert the class into a StatefulWidget and call setState() inside onTap method block.

Stack Layout Example

flutter swiper stack layout example

In this example, you will learn how to make a stack layout carousel using the same Image URLs used in the first example.


import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final imageList = [
    'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246__480.jpg',
    'https://cdn.pixabay.com/photo/2016/11/20/09/06/bowl-1842294__480.jpg',
    'https://cdn.pixabay.com/photo/2017/01/03/11/33/pizza-1949183__480.jpg',
    'https://cdn.pixabay.com/photo/2017/02/03/03/54/burger-2034433__480.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Swiper(
          layout: SwiperLayout.STACK,
          itemCount: imageList.length,
          itemBuilder: (context, index) {
            return Image.network(
              imageList[index],
              fit: BoxFit.cover,
            );
          },
          itemWidth: 300.0,
          itemHeight: 300.0,
        ),
      ),
    );
  }
}


  • Here layout property uses SwiperLayout.STACK.
  • Image’s height and width set to 300.0

SwiperLayout Tinder Example

flutter swiper tinder example
In this example, You will use SwiperLayout.TINDER for layout property.

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final imageList = [
    'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246__480.jpg',
    'https://cdn.pixabay.com/photo/2016/11/20/09/06/bowl-1842294__480.jpg',
    'https://cdn.pixabay.com/photo/2017/01/03/11/33/pizza-1949183__480.jpg',
    'https://cdn.pixabay.com/photo/2017/02/03/03/54/burger-2034433__480.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Swiper TINDER Example'),
        ),
        body: Swiper(
          layout: SwiperLayout.TINDER,
          itemCount: imageList.length,
          itemBuilder: (context, index) {
            return Image.network(
              imageList[index],
              fit: BoxFit.cover,
            );
          },
          itemWidth: 400.0,
          itemHeight: 500.0,
        ),
      ),
    );
  }
}


Flutter Swiper Example – Using customLayoutOption

flutter swiper example - custom animation
This is a simple customized example.

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final imageList = [
    'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246__480.jpg',
    'https://cdn.pixabay.com/photo/2016/11/20/09/06/bowl-1842294__480.jpg',
    'https://cdn.pixabay.com/photo/2017/01/03/11/33/pizza-1949183__480.jpg',
    'https://cdn.pixabay.com/photo/2017/02/03/03/54/burger-2034433__480.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Swiper(
              layout: SwiperLayout.CUSTOM,
              customLayoutOption:
                  new CustomLayoutOption(startIndex: -1, stateCount: 3)
                      .addRotate([0.0 / 180, 0.0, 0.0 / 180]).addTranslate([
                new Offset(-310.0, 0.0),
                new Offset(0.0, 0.0),
                new Offset(310.0, 0.0) //for right element
              ]),
              itemWidth: 300.0,
              itemHeight: 200.0,
              itemBuilder: (context, index) {
                return Image.network(
                  imageList[index],
                  fit: BoxFit.cover,
                );
              },
              itemCount: imageList.length)),
    );
  }
}


So as an open-source, you can use this library and make your own Image Carousel.

Flutter Swiper Package

That’s all for now. If you like this post, please share it with your family and friends.

flutter swiper example
flutter swiper example

5 FloatingActionButton Examples In Flutter With Tutorial

floating button flutter example

In this tutorial, you will learn about the Floating Action Button in Flutter.

What is FloatingActionButton or Floating Button in Flutter?

floating button flutter
FloatingActionButton is a simple button floating above the body at the bottom right corner. Provides immediate access for a primary function.

For example, the Gmail app.

When you are trying to composing a new mail, you are tapping the FloatingActionButton.

How to make a FloatingActionButton in Flutter

It’s very simple because Scaffold provides a floatingActionbutton property. You just need to give its value. Okay…Let’s create a simple Flutter project
with FloatingActionbutton.

You can also use Flutter commands to create a project.


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //body: Container(),
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.blue,
          onPressed: () {},
        ),
      ),
    );
  }
}

This will be the output of the above code.
floating button flutter without icon

For adding an icon in FloatingActionButton or FAB, just add child property and Icon as value. Like shown below


child: Icon(Icons.add),

Now the output will be like below.

flutter floatingactionbutton with icon


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //body: Container(),
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.blue,
          child: Icon(Icons.add),
          onPressed: () {},
        ),
      ),
    );
  }
}


This is just a simple example, If you want to redraw your widget you need to convert StatelessWidget in to StatefulWidget and call setState() method.

There are 2 types of FloatingActionButton constructors are available now.

1) FloatingActionButton() constructor – You have seen that how to use this constructor in above example.
2) FloatingActionButton.extended() – It just needs label as extra property.

FloatingActionButton.extended() – Example

In this example, we are using the second constructor of FloatingActionButton.

flutter FAB extended constructor

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //body: Container(),
        floatingActionButton: FloatingActionButton.extended(
          icon: Icon(Icons.add),
          label: Text('Add Note'),
          onPressed: () {
            print('FloatingActionButton clicked');
          },
        ),
      ),
    );
  }
}

How to change color of FloatingACtionButton in Flutter?

floating button flutter background color

Use backgroundColor property and provide any Colors value as you want. just like below.


Scaffold(
        //body: Container(),
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.deepPurple,
          child: Icon(Icons.add),
          onPressed: () {},
        ),
      ),

FloatingActionButton with BottomBar Example

floatingactionbutton flutter centerdocked
Do you want to make an app look like above?

In this example, you will create a BottomAppBar using bottomNavigationBar property with FloatingActionButton. For aligning FAB, Use Scaffold’s floatingActionButtonLocation property.

Step 1

Let’s start with creating FAB…


return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey,
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.red,
          onPressed: () {},
          child: const Icon(
            Icons.edit,
            color: Colors.white,
          ),
        ),
      ),
    );

  • Use backgroundColor property to set FAB’s color.

Step 2

It’s time to add BottomAppBar and it’s childrens.

  @override
  Widget build(BuildContext context) {
return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey,
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.red,
          onPressed: () {},
          child: const Icon(
            Icons.edit,
            color: Colors.white,
          ),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              IconButton(
                icon: Icon(Icons.home),
                color: Colors.black,
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.search),
                color: Colors.black,
                onPressed: () {},
              ),
              SizedBox(
                width: 40,
              ),
              IconButton(
                icon: Icon(Icons.add_shopping_cart),
                color: Colors.black,
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.account_box),
                color: Colors.black,
                onPressed: () {},
              ),
            ],
          ),
        ),
      ),
    );
}
  • Row aligns IconButtons in BottomAppBar

if you run the code now, the output should look like below.
floatingactionbutton flutter and bottomnavigationbar property

Next, you need to set FloatingActionButton in the center of BottomAppBar.

Step 3

You don’t need to use any other widgets to set FAB’s location. Just use FloatingActionButtonLocation class values.


floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

  • It should be inside of Scaffold constructor.

Now the output will look like below.

floatingactionbutton in flutter without notch

Here you can see that FAB just floats above the BottomAppBar, that’s not what you want.

I know that. But if someone wants this type of style. This might help them.

Step 4

Create a notch using BottomAppBar’s shape property.

bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
...

Source code should look like below.


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        backgroundColor: Colors.grey,
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.red,
          onPressed: () {},
          child: const Icon(
            Icons.edit,
            color: Colors.white,
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        bottomNavigationBar: BottomAppBar(
          shape: CircularNotchedRectangle(),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              IconButton(
                icon: Icon(Icons.home),
                color: Colors.black,
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.search),
                color: Colors.black,
                onPressed: () {},
              ),
              SizedBox(
                width: 40,
              ),
              IconButton(
                icon: Icon(Icons.add_shopping_cart),
                color: Colors.black,
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.account_box),
                color: Colors.black,
                onPressed: () {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}

You got it now.

floatingactionbutton flutter centerdocked

How to change floating action button position in flutter

FloatingActionButtonLocation class provides different types of location constants to align the FloatingActionButton.


floatingActionButtonLocation:
            FloatingActionButtonLocation.miniEndDocked,
  1. centerDocked
  2. centerFloat
  3. centerTop
  4. endDocked
  5. endFloat
  6. endTop
  7. miniCenterDocked
  8. miniCenterFloat
  9. miniCenterTop
  10. miniEndDocked
  11. miniEndFloat
  12. miniEndTop
  13. miniStartDocked
  14. miniStartFloat
  15. miniStartTop
  16. startDocked
  17. startFloat
  18. startTop

Flutter 2 or Multiple FloatingActionButton Menu Example – Using Unicorndial package

multiple floating action button menu in flutter

In this example, you will learn how to create Multiple FloatingActionButton menu using the Unicorndial package.

So first add dependencies in pubspec.yaml.


unicorndial: ^1.1.5


Just put the below code in your dart file.


import 'package:flutter/material.dart';
import 'package:unicorndial/unicorndial.dart';

void main() => runApp(
      new MaterialApp(
        title: "Flutter Multiple FloatingActionButton Example",
        home: MyApp(),
      ),
    );

class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    final floatingButtons = List();

    floatingButtons.add(
      UnicornButton(
        hasLabel: true,
        labelText: "Attachment",
        currentButton: FloatingActionButton(
          heroTag: "attachment",
          backgroundColor: Colors.black,
          mini: true,
          child: Icon(Icons.attach_file),
          onPressed: () {
            print('Attachment FAB clicked');
          },
        ),
      ),
    );

    floatingButtons.add(
      UnicornButton(
        hasLabel: true,
        labelText: "Camera",
        currentButton: FloatingActionButton(
          onPressed: () {
            print('Camera FAB clicked');
          },
          heroTag: "camera",
          backgroundColor: Colors.black,
          mini: true,
          child: Icon(Icons.photo_camera),
        ),
      ),
    );

    floatingButtons.add(
      UnicornButton(
        hasLabel: true,
        labelText: "Create Note",
        currentButton: FloatingActionButton(
          onPressed: () {
            print('Note FAB clicked');
          },
          heroTag: "note",
          backgroundColor: Colors.black,
          mini: true,
          child: Icon(Icons.note_add),
        ),
      ),
    );

    return Scaffold(
      floatingActionButton: UnicornDialer(
          backgroundColor: Colors.black38,
          parentButtonBackground: Colors.brown,
          orientation: UnicornOrientation.VERTICAL,
          parentButton: Icon(Icons.add),
          childButtons: floatingButtons),
      appBar: AppBar(
        title: Text('Flutter Multiple FloatingActionButton Example'),
      ),
      body: Container(),
    );
  }
}


  • In this example, you are creating List of UnicornButtons and pass it to UnicornDialer.
  • You can change orientation to horizontal using UnicornOrientation.HORIZONTAL value.
  • If there are multiple FloatingACtionButton, you need to provide a unique heroTag value.

FloatingButton onPressed Example

floating button flutter
In this example, you will create a counter app using FloatingActionButton.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FloatingActionButton - onPressed Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FloatingActionButton onPressed Example'),
      ),
      body: Center(
        child: Text(
          '$counter',
          style: TextStyle(fontSize: 150.0, fontWeight: FontWeight.bold),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(
            () {
              counter++;
            },
          );
        },
        child: Icon(
          Icons.plus_one,
        ),
        backgroundColor: Colors.redAccent,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

  • When the FAB is clicked, it will call setState method with updating counter variable value.
  • setState() method re-runs build() method, that updates Text value.

Let’s learn about other FloatingActionButton properties.

How to disable FloatingActionButton in Flutter

It is easy to disable FloatingActionButton, just provide a null value for onPressed property. But it is not recommended, because there is no sign that FAB is disabled, So it’s better to change the background color of FAB while it’s in a disabled state.

How to reduce FloatingActionButton size in Flutter?

flutter FAB mini true
By default, FloatingActionButton’s width and height are 56.0 logical pixels. Using mini property, you can reduce the Floating Button size to 48.0 logical pixels in both width and height.


floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
          mini: true,
        ),

Different types of Shapes – FloatingActionButton Examples

Not an only circle, but you can also make FloatingActionButton into different shapes, Using the shape property.

rectangular fab


floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.account_box),
          shape: RoundedRectangleBorder(),
        ),

beveledrectangleborder shape fab


floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.account_box),
          shape: BeveledRectangleBorder(
            borderRadius: BorderRadius.circular(12),
          ),
        ),

outlineinputborder fab shape flutter


floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.account_box),
          shape: OutlineInputBorder(),
        ),

underlineinputborder shape flutter

 floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.account_box),
          shape: UnderlineInputBorder(),
        ),

circleborder with width shape flutter fab


floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.account_box),
          shape: CircleBorder(
            side: BorderSide(
              width: 3.0,
              color: Colors.pink,
            ),
          ),
        ),

elevation

floating button elevation in flutter
elevation property helps to control the shadow behind the FloatingActionButton. Default value is 6.


floatingActionButton: FloatingActionButton(
        onPressed: () {},
        elevation: 15.0,
        child: Icon(Icons.add),
      ),
  • elevation changed to 15.0

Okay… That’s all for now. If you like this article, please share it.

FloatingActionButton Flutter Docs

Awesome Flutter Notes Taking App Using Provider, Sqflite and ImagePicker

flutter notes - note taking app-how to create notepad in flutter
This post contains affiliate links. If you use these links to buy something I may earn a commission. Thanks.”
Let’s learn more about Flutter by making a Note-taking app. Using this app

  • You can create, edit and delete notes.
  • Takes photos from gallery or using camera
  • Notes save into database using Provider


It’s going to be a long tutorial. So grab a cup of coffee and snacks.
Okay…Let’s start.

In this post, you will learn about more widgets and flutter packages like Provider, Sqflite, Path Provider and ImagePicker.

Don’t worry about those words haven’t you heard about it. I will talk about that while making.


.
.
.
.
A quick demo
flutter notes - how it works - screens

Okay… Let’s make a simple Flutter project named “flutter_notes“.

If you don’t know how to make a Flutter project read this command guide and Flutter Android Studio setup guide.

Now just open pubspec.yaml file and put below packages like given below in dependencies section.

Spacing or indent is more important here, so if you don’t do it well, it will give you an error. Save the file and click on pub get.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.3
  
  google_fonts: ^1.1.0
  image_picker: ^0.6.7+11
  intl: ^0.16.1
  path: ^1.7.0
  path_provider: ^1.6.18
  provider: ^4.3.2+2
  sqflite: ^1.3.1+1
  url_launcher: ^5.7.2

What above packages will do?

  • google_fonts: helps us to include fonts from fonts.google.com, there is no need for storing fonts in assets folder.
  • image_picker: assist us to take image from our device gallery and using Camera.
  • intl: Used to format Date and Time (usage – in this app).
  • path: Helps us to join path(usage – in this app).
  • path_provider: It gives directory location to store images(usage- in this app).
  • provider: Helps to expose value. Google recommended package.
  • sqflite: App stores data in sqlite database. Sqflite package helps us to implement all CRUD operations
  • url_launcher: helps to open a URL in a browser or webview. Not for only lauching web pages, you can mail, call, and message too.

Now let’s creates directories for categorizing dart files. flutter notes - projects structure Create helper, models, screens, utils, widgets directories, and create dart files inside it. helper directory contains two dart files – database_helper.dart, and note_provider.dart.

  • database_helper.dart – It contains all database related operations.
  • note_provider.dart – Code contains to add, update and delete operations and notify the listeners.

models directory contains a note file.

  • note.dart – It holds id, title, content, date, and image location.

screen directory contains 3 screens or pages whatever you call. flutter note edit screen

    • note_edit_screen.dart – This screen used to create and update note.
    • You can customise TextFormField Placeholder as you like

    • note_list_screen.dart – This is the Main Screen, it lists your notes.

  • note_view_screen.dart – Page used to read notes.

utils directory contains constants data.

  • constants.dart – It lists style constants and color values.

widget directory contains delete_popup.dart and list_item.dart. flutter alertdialog - delete note

    • delete_popup.dart – Just like the name, it shows alertdialog when the delete note button clicks.

list item flutter note taking app

    • list_item.dart – Your each note represented using this file in list. You can also use CircleAvatar to show image.

So now you got the idea of how this Flutter notes app works. Then let’s start coding… Now we will create each file one by one and explaining how the code works. So keep calm and code… Let’s partially make 3 screens. I assume that you have created all directories and files. So it’s time to code note_list_screen.dart.

  • Type “stless” and press Enter key.
  • Change to below code
import 'package:flutter/material.dart';

class NoteListScreen extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    return FutureBuilder();

      }

}

  • Here we are going to use FutureBuilder widget. Depends on the state it will show UI to us

note_edit_screen.dart

  • “stful” for stateful widget.

 

import 'package:flutter/material.dart';
class NoteEditScreen extends StatefulWidget
{
  static const route = '/edit-note';
  @override
  _NoteEditScreenState createState() => _NoteEditScreenState();
}
class _NoteEditScreenState extends State {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

note_view_screen.dart

import 'package:flutter/material.dart';

class NoteViewScreen extends StatefulWidget {
  static const route = '/note-view';

  @override
  _NoteViewScreenState createState() => _NoteViewScreenState();
}

class _NoteViewScreenState extends State {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}


This is just a start.. let’s create Note model. note.dart

import 'package:intl/intl.dart';

class Note {
  int _id;
  String _title;
  String _content;
  String _imagePath;

  Note(this._id, this._title, this._content, this._imagePath);

  int get id => _id;
  String get title => _title;
  String get content => _content;
  String get imagePath => _imagePath;

  String get date {
    final date = DateTime.fromMillisecondsSinceEpoch(id);
    return DateFormat('EEE h:mm a, dd/MM/yyyy').format(date);
  }
}
  • Here _id should be unique one. So It’s better to use note created time.
  • _title stores title of the note, _content – content of the note and _imagePath stores location of image

okay… Now move to the backend and create a database. database_helper.dart

import 'package:path/path.dart';
import 'package:sqflite/sqflite.dart';

class DatabaseHelper {
  static Future database() async {
    final databasePath = await getDatabasesPath();

    return openDatabase(join(databasePath, 'notes_database.db'),
        onCreate: (database, version) {
          return database.execute(
              'CREATE TABLE notes(id INTEGER PRIMARY KEY, title TEXT, content TEXT, imagePath TEXT)');
        }, version: 1);
  }

  static Future<List<Map<String, dynamic>>> getNotesFromDB() async {
    final database = await DatabaseHelper.database();

    return database.query("notes", orderBy: "id DESC");
  }

}

  • databasePath stores location of both Android and iOS directory location and we will add it with our database name notes_database.db using path package join() method
  • stores id as Integer, others as TEXT format. Using id as Primary Key is considered as good practice.
  • In getNotesFromDB() method – just create a database instance and calls query() method in Descending order
  • id must be DateTime integer value, So we can sort notes based on Descending order of dates.
  • getNotesFromDB() method finally returns List of Map values

note_provider.dart

import 'package:flutter/material.dart';
import 'package:flutter_notes/helper/database_helper.dart';
import '../models/note.dart';

class NoteProvider with ChangeNotifier {
  List _items = [];

  List get items {
    return [..._items];
  }

  Future getNotes() async {
    final notesList = await DatabaseHelper.getNotesFromDB();

    _items = notesList
        .map(
          (item) =>
          Note(
              item['id'], item['title'], item['content'], item['imagePath']),
    )
        .toList();

    notifyListeners();
  }
}
  • Using getNotes() method, we can get our notes fromDatabase. After converting to List objects it passes to _items list.
  • Calling notifyListeners() will rebuild the listeners.

Now we need to provide the provider inside main.dart file. So let’s move on to main.dart. Clear the whole code inside that and paste the below code. main.dart

import 'package:flutter/material.dart';
import 'package:flutter_notes/helper/note_provider.dart';
import 'package:flutter_notes/screens/note_list_screen.dart';
import 'package:provider/provider.dart';
import 'package:flutter_notes/screens/note_edit_screen.dart';
import 'package:flutter_notes/screens/note_view_screen.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider.value(
      value: NoteProvider(),
      child: MaterialApp(
        title: "Flutter Notes",
        debugShowCheckedModeBanner: false,
        initialRoute: '/',
        routes: {
          '/': (context) => NoteListScreen(),
          NoteViewScreen.route: (context) => NoteViewScreen(),
        NoteEditScreen.route: (context) => NoteEditScreen(),

        },
      ),
    );
  }
}


  • debugShowCheckedModeBanner: false – It removes debug banner.
  • Just implement the loading screen inside NoteListScreen like below. don’t worry about those red lines, after you importing the packages declarations it will be okay.
  • Here that will be import ‘package:flutter_notes/helper/note_provider.dart’;, import ‘package:provider/provider.dart’;
@override
  Widget build(BuildContext context) {
    return FutureBuilder(
     future: Provider.of<NoteProvider>(context,listen: false).getNotes(),
      builder: (context,snapshot)
      {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Scaffold(
            body: Center(
              child: CircularProgressIndicator(),
            ),
          );
        }else
          {
            return Container(
                         );
          }

      },
    );
  }

Let’s run now.

  • You can see CircularProgressIndicator loading now.
  • Here FutureBuilder widget used to build our UI. It needs a future as input, that’s why we have set getNotes() as input.
  • While getNotes() loading, builder will provide connectionstate. Using connectionState wec can change our UI.
  • When ConnectionState.waiting gets we will load CircularProgressIndicator(),that’s why you have seen a ProgressIndicator now.
  • When the ConnectionState changes, it shows a black screen. That is our Container, because build method always needs a Widget.

header list
Let’s create our header before that place some constant values inside constants.dart file

constants.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

const grey = Color(0xFFEAEAEA);
const grey2 = Color(0xFF6D6D6D);
const black = Color(0xFF1C1C1C);
const black2 = Color(0xFF424242);
const headerColor = Color(0xFFFD5872);
const white = Colors.white;

var headerRideStyle = GoogleFonts.roboto(
  textStyle: TextStyle(
    color: white,
    fontSize: 15.0,
  ),
);

var headerNotesStyle = GoogleFonts.roboto(
  textStyle: TextStyle(
    color: white,
    fontSize: 45.0,
    fontWeight: FontWeight.bold,
  ),
);

enum EditMode {
  ADD,
  UPDATE,
}

var noNotesStyle = GoogleFonts.roboto(
  textStyle: TextStyle(
    fontSize: 22.0,
    color: black2,
    fontWeight: FontWeight.w600,
  ),
);
var boldPlus = GoogleFonts.roboto(
  textStyle: TextStyle(
    fontSize: 30.0,
    color: Colors.blueAccent,
    fontWeight: FontWeight.bold,
  ),
);
var itemTitle = GoogleFonts.roboto(
  textStyle: TextStyle(
    fontSize: 18.0,
    color: black,
    fontWeight: FontWeight.bold,
  ),
);

var itemDateStyle = GoogleFonts.roboto(
  textStyle: TextStyle(
    fontSize: 11.0,
    color: grey2,
  ),
);

var itemContentStyle = GoogleFonts.roboto(
  textStyle: TextStyle(
    fontSize: 15.0,
    color: grey2,
  ),
);

var viewTitleStyle = GoogleFonts.roboto(
  fontWeight: FontWeight.w900,
  fontSize: 28.0,
);

var viewContentStyle = GoogleFonts.roboto(
    letterSpacing: 1.0,
    fontSize: 20.0,
    height: 1.5,
    fontWeight: FontWeight.w400);

var createTitle = GoogleFonts.roboto(
    textStyle: TextStyle(
  fontSize: 28.0,
  fontWeight: FontWeight.w900,
));

var createContent = GoogleFonts.roboto(
  textStyle: TextStyle(
    letterSpacing: 1.0,
    fontSize: 20.0,
    height: 1.5,
    fontWeight: FontWeight.w400,
  ),
);

var shadow = [
  BoxShadow(
    color: Colors.grey[300],
    blurRadius: 30,
    offset: Offset(0, 10),
  )
];


header list Header Item will show ANDROIDRIDE’S NOTES – when You tap on it, it will show you AndroidRide’s home page. Let’s create a method called header() inside NoteListScreen and don’t forget to import constants.dart file.

Widget header() {
    return GestureDetector(
      onTap: _launchUrl,
      child: Container(
        decoration: BoxDecoration(
          color: headerColor,
          borderRadius: BorderRadius.only(
            bottomRight: Radius.circular(75.0),
          ),
        ),
        height: 150,
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'ANDROIDRIDE\'S',
              style: headerRideStyle,
            ),
            Text(
              'NOTES',
              style: headerNotesStyle,
            ),
          ],
        ),
      ),
    );
  }

  • Here I used GestureDetector that help us to detect if someone taps on it Then it will trigger onTap.

Now you will get a small error due to launchUrl. because We haven’t defined that one. Let’s check how to do that? First we need to import the below line:

import 'package:url_launcher/url_launcher.dart';

then add the below code.

_launchUrl() async {
    const url = 'https://www.androidride.com';
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }

  • _launchUrl() loads ‘https://www.androidride.com’ in your browser, if not it will throw an error.

Okay…Now our NoteListScreen shows CircularProgressIndicator when getting Notes. We don’t need to show a Container if the process is done?

Let’s change it and Show a UI indicating that shows there is no note available.

Let’s create another method that shows a loud crying emoji with no notes available message. before that, we must include emoji image, other styling constants, and import flutter gestures.dart’ too.

emoji image in assets folder Let’s add the image. Create an assets folder and paste it there.

You can use any image, if you want an emoji image – you can download our code through subscribing our email. image in pubspec.yaml flutter

Add the image in pubspec.yaml file then only the app knows where is your image file.

  # To add assets to your application, add an assets section, like this:
  assets:
     - crying_emoji.png
  #   - images/a_dot_ham.jpe
Widget noNotesUI(BuildContext context) {
    return ListView(
      children: [
        header(),
        Column(
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 50.0),
              child: Image.asset(
                'crying_emoji.png',
                fit: BoxFit.cover,
                width: 200,
                height: 200,
              ),
            ),
            RichText(
              text: TextSpan(
                style: noNotesStyle,
                children: [
                  TextSpan(text: ' There is no note available\nTap on "'),
                  TextSpan(
                      text: '+',
                      style: boldPlus,
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          goToNoteEditScreen(context);
                        }),
                  TextSpan(text: '" to add new note'),
                ],
              ),
            )
          ],
        ),
      ],
    );
  }


import 'package:flutter/gestures.dart';

import gestures.dart for TapGestureRecognizer error. Don’t worry about goToNoteEditScreen(), which will clear after explaining the above code.

  • It shows header, emoji image and no note available message.
  • Padding widget provides empty space above the image.
  • RichText has recognizer property, that we can use to detect tap events. That’s why gestures.dart we added.

Solve the error now.

void goToNoteEditScreen(BuildContext context) {
     Navigator.of(context).pushNamed(NoteEditScreen.route);
  }

We have already implemented creating database and showing CircularProgressIndicator. You know that we haven’t created any notes. So It’s time to show noNotesUI() method. So just copy and replace the code with existing build method inside NoteListScreen.

@override
  Widget build(BuildContext context) {
    return FutureBuilder(
     future: Provider.of<NoteProvider>(context,listen: false).getNotes(),
      builder: (context,snapshot)
      {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Scaffold(
            body: Center(
              child: CircularProgressIndicator(),
            ),
          );
        }
        else
        {
          if(snapshot.connectionState == ConnectionState.done)
          {
            return Scaffold(
              body: Consumer<NoteProvider>(
                child: noNotesUI(context),
                builder: (context, noteprovider, child) =>
                noteprovider.items.length <= 0
                    ? child
                    : Container(),
              ),
              floatingActionButton: FloatingActionButton(
                onPressed: () {
                  goToNoteEditScreen(context);
                },
                child: Icon(Icons.add),
              ),
            );
          }
            return Container(
              width: 0.0,
              height: 0.0,
            );
          }

      },
    );
  }


  • When the ConnectionState becomes ConnectionState.done, second block of code executes.
  • When the notes count is less than equal to zero. It shows child in builder property, that is noNotesUI(context) method.
  • Using FloatingActionButton, you can go to NoteEditScreen.

If you run the project now, After showing progress, It will show noNotesUI such as header, emoji, and message. It’s time to create NoteEditScreen. Just paste the below code. note_edit_screen.dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_notes/helper/note_provider.dart';
import 'package:image_picker/image_picker.dart';
import 'package:flutter_notes/utils/constants.dart';
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
import 'package:provider/provider.dart';
import 'note_view_screen.dart';
class NoteEditScreen extends StatefulWidget {
  static const route = '/edit-note';
  @override
  _NoteEditScreenState createState() => _NoteEditScreenState();
}
class _NoteEditScreenState extends State {
  final titleController = TextEditingController();
  final contentController = TextEditingController();
  File _image;
  final picker = ImagePicker();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: white,
      appBar: AppBar(
        elevation: 0.7,
        backgroundColor: Colors.white,
        leading: IconButton(
          onPressed: () => Navigator.of(context).pop(),
          icon: Icon(Icons.arrow_back),
          color: Colors.black,
        ),
        actions: [
          IconButton(
            icon: Icon(Icons.photo_camera),
            color: Colors.black,
            onPressed: () {
              getImage(ImageSource.camera);
            },
          ),
          IconButton(
            icon: Icon(Icons.insert_photo),
            color: Colors.black,
            onPressed: () {
              getImage(ImageSource.gallery);
            },
          ),
          IconButton(
            icon: Icon(Icons.delete),
            color: Colors.black,
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Padding(
              padding: EdgeInsets.only(
                  left: 10.0, right: 5.0, top: 10.0, bottom: 5.0),
              child: TextField(
                controller: titleController,
                maxLines: null,
                textCapitalization: TextCapitalization.sentences,
                style: createTitle,
                decoration: InputDecoration(
                    hintText: 'Enter Note Title', border: InputBorder.none),
              ),
            ),
            if(_image != null)
              Container(
                padding: EdgeInsets.all(10.0),
                width: MediaQuery
                    .of(context)
                    .size
                    .width,
                height: 250.0,
                child: Stack(
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20.0),
                        image: DecorationImage(
                          image: FileImage(_image),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                    Align(
                      alignment: Alignment.bottomRight,
                      child: Padding(
                        padding: EdgeInsets.all(12.0),
                        child: Container(
                          height: 30.0,
                          width: 30.0,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: Colors.white,
                          ),
                          child: InkWell(
                            onTap: () {
                              setState(
                                    () {
                                  _image = null;

                                },
                              );
                            },
                            child: Icon(
                              Icons.delete,
                              size: 16.0,
                            ),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ),
            Padding(
              padding: const EdgeInsets.only(
                  left: 10.0, right: 5.0, top: 10.0, bottom: 5.0),
              child: TextField(
                controller: contentController,
                maxLines: null,
                style: createContent,
                decoration: InputDecoration(
                  hintText: 'Enter Something...',
                  border: InputBorder.none,
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (titleController.text.isEmpty)
            titleController.text = 'Untitled Note';
          saveNote();
        },
        child: Icon(Icons.save),
      ),
    );
  }

  @override
  void dispose() {
    titleController.dispose();
    contentController.dispose();
    super.dispose();
  }
}
  • Now we have to solve 2 methods. getImage() and saveNote().
  • Before that, TextEditingController helps to get data from TextField. TextEditingController should be dispose in dispose() method.
  • You can hide and show using Visibility widget too.

Before using image_picker, it’s better to check the documentation. We need to add following keys to info.plist file, located in /ios/Runner/Info.plist ios permission for image picker

        NSPhotoLibraryUsageDescription
	Need to take Picture from Gallery
	NSCameraUsageDescription
	Need to take Picture using Camera
 void getImage(ImageSource imageSource) async {
    PickedFile imageFile = await picker.getImage(source: imageSource);

    if (imageFile == null) return;

    File tmpFile = File(imageFile.path);
    final appDir = await getApplicationDocumentsDirectory();
    final fileName = basename(imageFile.path);

    tmpFile = await tmpFile.copy('${appDir.path}/$fileName');

    setState(() {
      _image = tmpFile;
    
    });
  }

  • Above code get the Image File if it’s from camera or gallery, and copies to a directory in both Android and iOS .
  • After copying image file, setState() called. It will trigger rebuild method.
  • That’s how Image shows in this screen.
  void saveNote() {
    String title = titleController.text.trim();
    String content = contentController.text.trim();
    String imagePath = _image != null ? _image.path : null;

      int id = DateTime
          .now()
          .millisecondsSinceEpoch;
      Provider.of<NoteProvider>(this.context, listen: false)
          .addOrUpdateNote(id, title, content, imagePath, EditMode.ADD);
      Navigator.of(this.context)
          .pushReplacementNamed(NoteViewScreen.route, arguments: id);
    }

  • In saveNote() – we will save title, content and Image location and gives to provider class.
  • DateTime.now().millisecondsSinceEpoch – gives integer number will save as note id.
  • EditMode.ADD – means just inserting a new note.
  • Using Navigator, NoteViewScreen will loaded, id also passed.

Open note_provider.dart and paste the below code.

  Future addOrUpdateNote(int id, String title, String content,
      String imagePath, EditMode editMode) async {
    final note = Note(id, title, content, imagePath);

    if (EditMode.ADD == editMode) {
      _items.insert(0, note);
    } else {
      _items[_items.indexWhere((note) => note.id == id)] = note;
    }

    notifyListeners();

    DatabaseHelper.insert(
      {
        'id': note.id,
        'title': note.title,
        'content': note.content,
        'imagePath': note.imagePath,
      },
    );
  }

  • Here, EditMode is ADD, then it will added to list as the first item. Otherwise, it will updated with the existing note.
  • notifyListeners() triggers all Listeners. Most important our ListView, haven’t added yet.
  • Create insert() method in database_helper.dart.
static Future insert(Map<String, Object> data) async {
    final database = await DatabaseHelper.database();

    database.insert("notes", data,
        conflictAlgorithm: ConflictAlgorithm.replace);
  }

  • database instance created and Note map value is inserted into database
  • ConflictAlgorithm.replace – It will replace the data when a unique constraint violation occurs. Here when id found twice.

You can run now. When the note is saved a black screen will appear that’s our NoteViewScreen. What we need now? We need to show the note in ListView. The note will represent in ListItem widget, let’s create that one.

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_notes/helper/note_provider.dart';
import 'package:flutter_notes/screens/note_edit_screen.dart';
import 'package:flutter_notes/screens/note_view_screen.dart';
import 'package:provider/provider.dart';
import '../utils/constants.dart';
class ListItem extends StatelessWidget {
  final int id;
  final String title;
  final String content;
  final String imagePath;
  final String date;
  ListItem({this.id, this.title, this.content, this.imagePath, this.date});
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 135.0,
      margin: EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
      child: InkWell(
        onTap: () {
          Navigator.pushNamed(context, NoteViewScreen.route, arguments: id);
        },
        child: Container(
          width: double.infinity,
          padding: EdgeInsets.symmetric(horizontal: 12.0),
          decoration: BoxDecoration(
            color: Colors.white,
            boxShadow: shadow,
            borderRadius: BorderRadius.circular(15.0),
            border: Border.all(color: grey, width: 1.0),
          ),
          child: Row(
            children: [
              Expanded(
                child: Padding(
                  padding: EdgeInsets.symmetric(vertical: 10.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        title,
                        overflow: TextOverflow.ellipsis,
                        maxLines: 2,
                        style: itemTitle,
                      ),
                      SizedBox(height: 4.0),
                      Text(
                        date,
                        overflow: TextOverflow.ellipsis,
                        style: itemDateStyle,
                      ),
                      SizedBox(
                        height: 8.0,
                      ),
                      Expanded(
                        child: Text(
                          content,
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: itemContentStyle,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              if(imagePath!=null)
              Row(
                children: [
                  SizedBox(
                    width: 12.0,
                  ),
                    Container(
                      width: 80.0,
                      height: 95.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(12.0),
                        image: DecorationImage(
                          image: FileImage(
                            File(imagePath),
                          ),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

  • InkWell listen for tap events and perform action on it.
  • such as it pushes NoteViewScreen with id.

Let’s build our Note ListView to show ListItems by removing Container.

Consumer(
                child: noNotesUI(context),
                builder: (context, noteprovider, child) =>
                    noteprovider.items.length <= 0
                        ? child
                        : ListView.builder(
                            itemCount: noteprovider.items.length + 1,
                            itemBuilder: (context, index) 
                            {
                              if (index == 0) 
                              {
                                return header();
                              } 
                              else 
                              {
                                final i = index - 1;
                                final item = noteprovider.items[i];
                                return ListItem(
                                  id: item.id,
                                  title: item.title,
                                  content: item.content,
                                  imagePath: item.imagePath,
                                  date: item.date,
                                );
                              }
                            },
                          ),
              ),

It’s time to talk about NoteviewScreen. Whenever NoteViewScreen is open, only with a id. So we can use id to get our note from provider and database.

class _NoteViewScreenState extends State {
  Note selectedNote;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    final id = ModalRoute.of(context).settings.arguments;

    final provider = Provider.of<NoteProvider>(context);

    if (provider.getNote(id) != null) {
      selectedNote = provider.getNote(id);
    }
  }
}

  • To get id passed from other screens, use ModalRoute.of(context).settings.arguments.
  • We need to create getNote() method in note_provider.dart to access the note with id.
Note getNote(int id) {
    return _items.firstWhere((note) => note.id == id, orElse: () => null);
  }


back to NoteViewScreen, you can edit the build method using the below code. note_view_screen.dart

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: white,
      appBar: AppBar(
        elevation: 0.7,
        backgroundColor: Colors.white,
        leading: IconButton(
          icon: Icon(
            Icons.arrow_back,
            color: Colors.black,
          ),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        actions: [
          IconButton(
            icon: Icon(
              Icons.delete,
              color: Colors.black,
            ),
            onPressed: () => _showDialog(),
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                selectedNote?.title,
                style: viewTitleStyle,
              ),
            ),
            Row(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Icon(
                    Icons.access_time,
                    size: 18,
                  ),
                ),
                Text('${selectedNote?.date}')
              ],
            ),
            if (selectedNote.imagePath != null)
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                child: Image.file(File(selectedNote.imagePath)),
              ),
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text(
                selectedNote.content,
                style: viewContentStyle,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.pushNamed(context, NoteEditScreen.route,
              arguments: selectedNote.id);
        },
        child: Icon(Icons.edit),
      ),
    );
  }

  _showDialog() {
    showDialog(
        context: this.context,
        builder: (context) {
          return DeletePopUp(selectedNote: selectedNote);
        });
  }
}


  • showDialog() method helps us to open PopUp alerting delete message.

delete_popup.dart

import 'package:flutter/material.dart';
import '../helper/note_provider.dart';
import '../models/note.dart';
import 'package:provider/provider.dart';

class DeletePopUp extends StatelessWidget {
  const DeletePopUp({
    Key key,
    @required this.selectedNote,
  }) : super(key: key);

  final Note selectedNote;

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
      title: Text('Delete?'),
      content: Text('Do you want to delete the note?'),
      actions: [
        FlatButton(
          child: Text('Yes'),
          onPressed: () {
            Provider.of<NoteProvider>(context, listen: false)
                .deleteNote(selectedNote.id);
            Navigator.popUntil(context, ModalRoute.withName('/'));
          },
        ),
        FlatButton(
          child: Text('No'),
          onPressed: () {
            Navigator.pop(context);
          },
        )
      ],
    );
  }
}

  • It just shows an AlertDialog, when user clicks on Yes, Note will be deleted and back to NoteListScreen

Now we need to delete note from provider and database. So add the below line in note_provider.dart

  Future deleteNote(int id) {
    _items.removeWhere((element) => element.id == id);
    notifyListeners();
    return DatabaseHelper.delete(id);
  }

  • It checks items with the specified id, if there is any note it will be removed and notify the listeners.

database_helper.dart

  static Future delete(int id) async {
    final database = await DatabaseHelper.database();
    return database.delete('notes', where: 'id = ?', whereArgs: [id]);
  }

  • Based on the id, note will deleted from the database.

If you have checked the app you can see that you can’t edit the existing note or it won’t show content in NoteEditScreen. How to solve that problem?

bool firstTime = true;
Note selectedNote;
int id;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    if (firstTime) {
      id = ModalRoute.of(this.context).settings.arguments;

      if (id != null) {
        selectedNote =
            Provider.of<NoteProvider>(this.context, listen: false).getNote(id);

        titleController.text = selectedNote?.title;
        contentController.text = selectedNote?.content;

        if (selectedNote?.imagePath != null) {
          _image = File(selectedNote.imagePath);
       
        }
      }

      firstTime = false;
    }
  }

  • Here we check if the id is null or note. If id isn’t null, then note need to update.
  • get note based on id through provider
  • Sets title, content and image.

In saveNote() method, we need to tell that the note need to saved or updated. So update the method using below code.

  void saveNote() {
    String title = titleController.text.trim();
    String content = contentController.text.trim();
    String imagePath = _image != null ? _image.path : null;

    if (id != null) {
      Provider.of<NoteProvider>(this.context, listen: false)
          .addOrUpdateNote(id, title, content, imagePath, EditMode.UPDATE);
      Navigator.of(this.context).pop();
    } else {
      int id = DateTime.now().millisecondsSinceEpoch;
      Provider.of<NoteProvider>(this.context, listen: false)
          .addOrUpdateNote(id, title, content, imagePath, EditMode.ADD);
      Navigator.of(this.context)
          .pushReplacementNamed(NoteViewScreen.route, arguments: id);
    }


If the user deleting the note from NoteEditScreen, you must check that note is note on edit mode or update mode.

IconButton(
            icon: Icon(Icons.delete),
            color: Colors.black,
            onPressed: () {
              if (id != null) {
                _showDialog();
              } else {
                Navigator.pop(context);
              }
            },
          )

  • If id is not null, alertDialog shown up otherwise pop back
void _showDialog() {
    showDialog(
        context: this.context,
        builder: (context) {
          return DeletePopUp(selectedNote: selectedNote);
        });
  }

Finally, the code is done. now you can check it out and Enjoy adding notes with images or just text, that won’t be a problem.

Download Source Code – Flutter Notes App

If you like this post, please share it with your family and friends.

Ultimate Guide : Flutter Padding Widget Example With Tutorial

flutter padding widget example tutorial
In this post, you will learn about the Flutter padding widget.

If you’re coming from a web development background or Android Development, You might familiar with the term ‘padding’ and know it’s just an attribute.

That’s all…

But in Flutter, it has more importance. That’s why they made it as a Widget.

Okay… Let’s learn more about Padding Widget.

How Flutter Padding Widget Works?

what is flutter padding widget

The padding widget gives empty space around the child widget. So if your widgets are colliding with each other and you think it is nice to add space around your widget, give it a go with Padding. Simply make your widget as a child of the Padding and give value.

That’s all.

Simple… isn’t it?

Flutter Padding Example

Let’s create a simple Flutter project with a Text Widget, the output should look like below.


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Padding Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Padding Demo'),
        ),
        body: Text('Text Widget'),
      ),
    );
  }
}

Let’s add some padding or empty space around the Text widget. Just like below.
flutter paddding ex


Padding(
          padding: const EdgeInsets.all(50.0),
          child: Text('Text Widget'),
        ),

  • Here padding property takes 50.0 value through EdgeInsets.all() named constructor and it gives 50.0 padding to all sides.
  • Left=Right=Top=Bottom=50.0

Sometimes, adding a Padding widget around your child by typing might be difficult. How to simplify this problem?

Using Keyboard shortcuts.

Android Studio – Shortcut for Padding

Android Studio Shortcut For Flutter Padding Widget

  • Click on the widget (here Text) and ALT + ENTER or you can click on the light yellow bulb on the left side.
  • Select wrap with Padding.

Visual Studio – Shortcut for Padding

flutter padding visual studio shortcut

  • Click on the widget (here Text) and CTRL + . (dot key), or Click on the light yellow bulb.
  • Click on Wrap with Padding

How Padding Laid Out – Using Flutter Inspector

Open Flutter Inspector, and look at how the padding widget laid around the Text Widget.

flutter inspector android studio

  • Android studio users, click on Flutter Inspector and click on show debug paint.

  • This is how Padding provides empty space around the Text widget.

What if you need to provide padding to only one side or two or more than two?

You can use below named Constructors of EdgeInsets with Padding.

  1. EdgeInsets.all() – Provides padding to all sides around the child widget.
  2. EdgeInsets.only() – Supplies empty space only to the specified portions.
  3. EdgeInsets.symmetric() – It gives padding based on horizontal and vertical values.
  4. EdgeInsets.fromLTRB() – You can give padding to Left, Top, Right and Bottom Respectively.

How to provide padding to only specific sides – Using EdgeInsets.only

flutter padding only

  • When you need to add padding to only a specific side of the widget, use this named constructor with top, bottom, left and right parameters.
  • In this example, I have used left, top and bottom.

 Padding(
          padding: EdgeInsets.only(left:50.0, top: 30.0, bottom: 40.0),
          child: Text('Text Widget'),
        ),

EdgeInsets.symmetric()

flutter padding symmetric

  • EdgeInsets.symmetric has two parameters: horizontal – which applies padding for left and right sides.
  • vertical – which applies padding for top and bottom.

Padding(
          padding: EdgeInsets.symmetric(horizontal: 50.0, vertical: 80.0),
          child: Text('Text Widget'),
        ),

EdgeInsets.fromLTRB()

padding fromltrb

  • Using EdgeInsets.fromLTRB, you can easily specify Left, Top, Right and Bottom Respectively.

Padding(
          padding: EdgeInsets.fromLTRB(30.0,40.0,50.0,60.0),
          child: Text('Text Widget'),
        ),

Just like EdgeInsets, you can also use EdgeInsetsDirectional constructors. Look below.

EdgeInsetsDirectional.only()

edgeinsetsdirectional.only

  • EdgeInsetsDirectional.only() works same as EdgeInsets.only() – It uses start and end for left and right. That’s all.

Padding(
          padding: EdgeInsetsDirectional.only(start: 60.0, end: 80.0, top: 20.0),
          child: Text('Text Widget'),
        ),

EdgeInsetsDirectional.fromSTEB()

edgeinsetsdirectional.fromSTEB

  • STEB stands for Start, Top, End, and Bottom.

Padding(
          padding: EdgeInsetsDirectional.fromSTEB(60.0,30.0,80.0,90.0),
          child: Text('Text Widget'),
        ),

I hope you liked this article, So please share it with your friends and family.

Flutter Padding docs

5 Flutter RaisedButton Examples With Tutorial

flutter raisedbutton example

Let’s learn about Flutter RaisedButton.

RaisedButton…?

How is it look like?

How to add it to my code?

Okay… wait.

After reading this post, you will learn a lot more about RaisedButton.

then don’t waste my time. Please start.

Here we go.

Flutter RaisedButton

flutter raisedbutton

From the title, you can understand that It’s a raised button.

Yes, it is.

Actually the button appears elevated or in more detail, it placed higher than the surrounding area or page. It shows more shadow when the button is tapped.

You can also make icon using RaisedButton.

But now, let’s make a simple RaisedButton. You can create flutter project using flutter command or Android Studio.

simple raisedbutton exampl

import 'package:flutter/material.dart';

void main() => runApp(MyApp()); //application entry point, Calls MyApp

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter RaisedButton Example'),
        ),
        body: Center(
          child: RaisedButton(
            child: Text('RaisedButton'),
            onPressed: () {
              //onpressed gets called when the button is tapped.
              print("RaisedButton clicked");
            },
          ),
        ),
      ),
    );
  }
}

RaisedButton properties

1. VoidCallback onPressed

Just like FlatButton, RaisedButton invokes onPressed when button tapped. you can provide values in two ways.

  1. Using anonymous function

  2. In this way, you don’t need to specify method’s name. It’s actually helpful when you want to execute simple lines of unrepeated code.

    RaisedButton(
                child: Text('RaisedButton'),
                color: Colors.white,
                onPressed: () {
                  print("RaisedButton tapped - anonymous function");
                },
                ),
    
    
  3. By specifying the Function name

Specify the function name as onPressed value. just like below

RaisedButton(
            child: Text('RaisedButton'),
            color: Colors.white,
             onPressed: raisedButtonTapped,
          ),

void raisedButtonTapped() {
    print("RaisedButton tapped - Using function");
  }

2. VoidCallback onLongPress

It gets called when RaisedButton pressed for a finite long time. You can use those ways I have told above in onPressed property.

  1. Using Anonymous Function

  2. RaisedButton(
                child: Text('RaisedButton'),
                color: Colors.white,
                onPressed: () {},
                onLongPress: () {
                  print("RaisedButton long pressed - Using anonymous function");
                },
                
              ), 
    
  3. Using Function name

RaisedButton(
            child: Text('RaisedButton'),
            color: Colors.white,
            onPressed: () {},
            onLongPress: raisedButtonTapped,
          ),
...
..
  void raisedButtonTapped() {
    print("RaisedButton long pressed - Using function name");
  }

3. ValueChanged onHighlightChanged

raisedbutton onhighlightchanged example

onHighlightChanged property gives you true value when the button is tapped down and gives false after the release of the button.

4.Color textColor

RaisedButton textcolor examle
The textColor property helps to change text color on RaisedButton.

RaisedButton(
            onPressed: () {},
            child: Text("SIGN IN"),
            textColor: Colors.red,
          ),

5. Color disabledTextColor

flutter Raisedbutton disabled text color

It assist us to change Button’s text color when onPressed provided with a null value.

RaisedButton(
                child: Text('RaisedButton - Default Disabled Text Color'),
                onPressed: null,
              ),
              RaisedButton(
                child: Text('RaisedButton - Custom Disabled Text Color'),
                onPressed: null,
                disabledTextColor: Colors.black,
              ),

6. Color color

raisedbutton background color example

The color property used to set RaisedButton background. You can change it to a different color rather than default one.

RaisedButton(
            child: Text('RaisedButton'),
            color: Colors.yellow,
            onPressed: () {},
          ),

7. Color disabledColor

disabledcolor and text
Sometimes you need to disable the button and change it’s color, then apply disabledColor property like shown below. Just specify color as disabledColor property value.

RaisedButton(
                child: Text('RaisedButton - Default Disabled Color'),
                onPressed: null,
              ),
              RaisedButton(
                  child: Text('RaisedButton - Custom Disabled Color & Text'),
                  onPressed: null,
                  disabledTextColor: Colors.white60,
                  disabledColor: Colors.blueAccent),

8. FocusNode focusNode

It’s a focus related property, utilize focusNode property to set focus to RaisedButton. Look at the focusColor property, the given below how to use focusNode.

9.Color focusColor

focuscolor example

When RaisedButton gets the focus, focusColor property helps us to change the color of RaisedButton.


import 'package:flutter/material.dart';

void main() {
  runApp(HomeScreen());
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State {
  FocusNode _raisedFocusNode;

  @override
  void initState() {
    super.initState();
    _raisedFocusNode = FocusNode();
  }

  @override
  void dispose() {
    _raisedFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "RaisedButton FocusColor Example",
      home: Scaffold(
        appBar: AppBar(
          title: Text("RaisedButton FocusColor Example"),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(18.0),
              child: TextField(
                onChanged: (value) =>
                    FocusScope.of(context).requestFocus(_raisedFocusNode),
              ),
            ),
            RaisedButton(
              color: Colors.blue,
              focusNode: _raisedFocusNode,
              focusColor: Colors.red,
              child: Text("DONE"),
              onPressed: () {
                print("RaisedButton clicked");
              },
            )
          ],
        ),
      ),
    );
  }
}

  • When you enter a key in TextField, it calls onChanged and make request to the _raisedFocusNode
  • RaisedButton’s focusNode value is _raisedFocusNode. When the RaisedButton gets focus, focusColor invokes and shows Red color

10.Color hoverColor

Use this property to change color when the pointer is hovering over the button. There is no hovering action in Mobile devices.

11.Color highlightColor

highlight color

highlightColor property uses to highlight the RaisedButton When it tapped.

RaisedButton(
          padding: EdgeInsets.all(25),
          highlightColor: Colors.redAccent,
          child: Text('RaisedButton - highlight Color'),
          onPressed: () {
            //onpressed gets called when the button is tapped.
            print("RaisedButton tapped");
          },
        ),

12. Color splashColor

splash color example
splashColor property shows animation when touches the button, Like something falls into liquid.

RaisedButton(
          padding: EdgeInsets.all(100),
          splashColor: Colors.redAccent,
          child: Text('RaisedButton - Splash Color'),
          //makes background color white
          onPressed: () {
            //onpressed gets called when the button is tapped.
            print("FlatButton tapped");
          },
        ),

13. Brightness colorBrightness

brightness example - raisedbutton

If colorBrightness is Brightness.light, then text color set to Black, otherwise text color set to white.

RaisedButton(
                child: Text('RaisedButton - Brightness.light'),
                colorBrightness: Brightness.light,
                color: Colors.blue[100],
                onPressed: () {
                  //onpressed gets called when the button is tapped.
                  print("RaisedButton tapped");
                },
              ),
              RaisedButton(
                child: Text('RaisedButton - Brightness.dark'),
                colorBrightness: Brightness.dark,
                color: Colors.black,
                onPressed: () {
                  //onpressed gets called when the button is tapped.
                  print("RaisedButton tapped");
                },
              ),

14. double elevation

flutter raisedbutton elevation

By increasing elevation, you can see RaisedButton is more floating above the page and shadow spreads too.


RaisedButton(
          elevation: 5.0,
          color: Color(0xFFCE93D8),
          child: Text('RaisedButton - Elevation'),
          onPressed: () {
            //onpressed gets called when the button is tapped.
            print("RaisedButton tapped");
          },
        ),

15. double focusElevation

focuselevation example
This property used to elevate or make shadow when the RaisedButton gets focus.


         import 'package:flutter/material.dart';

void main() {
  runApp(HomeScreen());
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State {
  FocusNode _raisedFocusNode;

  @override
  void initState() {
    super.initState();
    _raisedFocusNode = FocusNode();
  }

  @override
  void dispose() {
    _raisedFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "RaisedButton focusElevation Example",
      home: Scaffold(
        appBar: AppBar(
          title: Text("RaisedButton focusElevation Example"),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20.0),
              child: TextField(
                onChanged: (_) {
                  FocusScope.of(context).requestFocus(_raisedFocusNode);
                },
              ),
            ),
            RaisedButton(
              color: Colors.deepOrange[300],
              focusNode: _raisedFocusNode,
              focusElevation: 8.0,
              child: Text("DONE"),
              onPressed: () {},
            )
          ],
        ),
      ),
    );
  }
}


16. double hoverElevation

The hoverElevation property makes RaisedButton elevated when the pointer hovers over the RaisedButton.

17. double highlightElevation

highlight elevation

The highlightElevation property can be used to show more shadow when the RaisedButton pressed. By default, highlightElevation value is 8.0

RaisedButton(
          color: Colors.red,
          textColor: Colors.white,
          highlightElevation: 15.0,
          child: Text('RaisedButton - highlight elevation'),
          onPressed: () {
            //onpressed gets called when the button is tapped.
            print("RaisedButton tapped");
          },
        ),

18.double disabledElevation

disabledelevation raisedbutton

By default, disabled Elevation is 0.0, you can customize it using like below.

RaisedButton(
            disabledElevation: 1.0,
            child: Text("DONE"),
            onPressed: null,
          ),

19. EdgeInsetsGeometry padding

raisedbutton padding all

  • padding property used to generate space between child widget and Borders of the Parent widget. Here, RaisedButton.
  • padding property needs EdgeInsets value.
  • Here EdgeInsets.all(50) means give 50 padding to all sides of the child or Text widget.
RaisedButton(
                child: Text('RaisedButton'),
                onPressed: () {},
                padding: EdgeInsets.all(50),
                color: Color(0xFFFFAA4D),
              ),

raisedbutton padding

  • If you want to move text child to certain sides only, then you can use EdgeInsets.only()

raisedbutton top left right padding

  • You can specify more than one side.

raisedbutton symmetric padding

  • You can specify horizontal or vertical sides by applying EdgeInsets.symmetric().

20. Widget child

Just like almost other Flutter widgets, RaisedButton also gives child property to hold other widget.
Most of the time the child must be Text. But you can use others too. For example, the Image.

21. autofocus

RaisedButton’s autofocus is false by default. you can turn it on by adding autofocus:true.

22.Flutter RaisedButton Shapes Example

Shape Using Border.all()

RaisedButton(
                onPressed: () {},
                child: Text('RaisedButton'),
                shape: Border.all(
                  width: 2.0,
                  color: Color(
                    0xFF03DAC5,
                  ),
                ),
              ),

StadiumBorder

stadiumborder RaisedButton

RaisedButton(
                onPressed: () {},
                child: Text('StadiumBorder'),
                shape: StadiumBorder(),
                color: Color(
                  0xFF03DAC5,
                ),
              ),

CircleBorder

circleborder

  RaisedButton(
                onPressed: () {},
                child: Text('GO'),
                shape: CircleBorder(),
                color: Color(
                  0xFF03DAC5,
                ),
              ),

CircleBorder with BorderSide

circleborder with borderside raisedbutton

RaisedButton(
                onPressed: () {},
                child: Text('OK'),
                color: Colors.amber[100],
                shape: CircleBorder(
                  side: BorderSide(
                    color: Color(
                      0xFF03DAC5,
                    ),
                  ),
                ),
              ),

Rounded Rectangular Border

rounded rectangular border raisedbutton

RaisedButton(
                child: Text('Rounded Rectangle Border'),
                onPressed: () {},
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15)),
                color: Colors.amber[100],
              ),

Beveled Rectangular Border

beveled rectangle border

RaisedButton(
                onPressed: () {},
                child: Text('Beveled Rectangle Border'),
                shape: BeveledRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
                color: Colors.amber[100],
              ),

OutlineInputBorder

outline input border

RaisedButton(
                onPressed: () {},
                child: Text('Outline Input Border'),
                shape: OutlineInputBorder(),
                color: Colors.amber[100],
              ),

UnderlineInputBorder

underline input border

RaisedButton(
                onPressed: () {},
                child: Text('Underline Input Border'),
                shape: UnderlineInputBorder(),
                color: Colors.amber[100],
              ),

How To Change Width & Height Of RaisedButton

flutter raisedbutton height width

In this example, You will change RaisedButton height and width using ButtonTheme.


Padding(
            padding: const EdgeInsets.all(8.0),
            child: ButtonTheme(
              minWidth: double.infinity,
              height: 50.0,
              child: RaisedButton(
                color: Colors.amber[300],
                onPressed: () {},
                child: Text('RaisedButton'),
              ),
            ),
          ),

  • Here ButtonTheme helps to customize RaisedButton
  • minWidth: double.infinity means minimum width must be same as parent.
  • height: 50.0
  • If you remove padding widget, RaisedButton will stretch to screen.

RaisedButton With Image Icon Example in Flutter

raisedbutton with image icon flutter


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('RaisedButton Icon Example'),
        ), 
        body: Center(
          child: RaisedButton.icon(
            onPressed: () {
              print('RaisedButton.icon clicked');
            },
            icon: Icon(Icons.attach_file), //icon image
            label: Text('Attach File'), //text to show in button
            textColor: Colors.white, //button text and icon color.
            color: Colors.red[400],
          ),
        ),
      ),
    );
  }
}



Flutter Gradient RaisedButton Example

flutter gradient raisedbutton example

Let’s make a Gradient Button…


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Gradient RaisedButton Example'),
        ),
        body: Center(
          child: RaisedButton(
            textColor: Colors.white,
            padding: EdgeInsets.all(0.0),
            shape: StadiumBorder(),
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(25.0),
                gradient: LinearGradient(
                  colors: [
                    Color(0xFF00b09b),
                    Color(0xFF96c93d),
                  ],
                ),
              ),
              child: Text(
                'ANDROIDRIDE',
                style: TextStyle(fontSize: 15.0),
              ),
              padding: EdgeInsets.symmetric(horizontal: 70.0, vertical: 15.0),
            ),
            onPressed: () {
              print('Gradient RaisedButton clicked');
            },
          ),
        ),
      ),
    );
  }
}


Flutter RaisedButton Example – Data from List

flutter raisedbutton list example

In this example, you will create an application that will display items in the list using RaisedButton.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {

  List myList = [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday'
  ];

  int counter = 0;//stores list index

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'Flutter RaisedButton Example',//appbar title
          ),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  myList[counter],//each array item
                  style: TextStyle(fontSize: 45.0),
                ),
              ),
              RaisedButton(
                color: Colors.red,
                textColor: Colors.white,
                elevation: 10.0,
                onPressed: () {
                  setState(
                    () {
                      if (counter == 6) {
                        counter = 0;
                      } else {
                        counter++;
                      }
                    },
                  );
                },
                child: const Text('Click Here'),//button label
              ),
            ],
          ),
        ),
      ),
    );
  }
}
  • Here code has one counter variable and list of weekdays.
  • Using column and Center widget, we made TextField and RaisedButton center in screen.
  • When you click on the RaisedButton, it will add counter variable by one.
  • Incrementing counter variable, shows different item in List

For more information: docs

3 Flutter FlatButton Examples With Tutorial

There are many widgets in Flutter to make a better user interface. In every UI, Buttons have their own important role.

From this post, you will start to learn about the Flutter button widgets. Such as FlatButton, RaisedButton, FloatingActionButton, and more.

So let’s start with Flutter FlatButton.

Flutter FlatButton

flutter flatbutton
flutter flatbutton

Flat Button ??

Yes, Because by default, it’s just a black text or label without any

  • borders
  • elevation

You can use flatbutton in toolbars, dialogs, cards, and where ever enough space to add. Flatbutton also make the icon widget using FlatButton.icon().

FlatButton Simple Example

So let’s start programming and make a simple FlatButton like below. You can create flutter project using flutter command or with the help of Android Studio.

flutter flatbutton example

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FlatButton(
        child: Text('FlatButton'),
        color: Colors.white,
        onPressed: () {
          print("FlatButton tapped");
        },
      ),
    );
  }
}

 

  • App gets started execution from main method. At last, build() method renders FlatButton with the help of MaterialApp.
  • If you do not use the MaterialApp in above code, it could result in No directionality widget found error.
  • I have used white color as FlatButton background using the color property. Otherwise, you could get a black screen with debug banner.
  • Already told you FlatButton text color is black by default

Check it out by removing color: Colors.white line from above code and reload.

FlatButton Properties

Let’s talk about the properties of FlatButton.

flatbutton onpressed example

1. VoidCallback onPressed: It gets called when FlatButton is tapped, You need to pass VoidCallback method, means no arguments and no return value.


For ex: void myFunction();

If you haven’t provided onPressed property or specified null value, then the button will look like in the first one from the above image.

If you have given a method name or anonymous function then the button will look like in the second one.

Okay. How to provide values to onPressed property.

  1. Using anonymous function

  2. 
    FlatButton(  
                onPressed: () {
               //implement your code.
    },
               .....
     ),
    
    
  3. Using function name

  4. void flatButtonTapped(){
      
    }
    
    FlatButton(onPressed: flatButtonTapped,
    
    )
    
    

    You don’t need to give parentheses ‘()’ here. Only the function name. Download all source code from the top link.

    2. VoidCallback onLongPress
    This property gets called when a long tap occurs. Just like onPressed property, pass an anonymous function or method name.

    
    FlatButton(onLongPress: (){},
    
    

    3. ValueChanged onHighlightChanged
    flatbutton highlight changed
    onHighlightChanged calls when you click down or up the button. When the button clicks down, it gives true value. false when button clicks up.

    
    FlatButton(
                child: Text('FlatButton'),
                onHighlightChanged: (value) {
                  print('onHighlightChanged value : $value');
                },
                onPressed: () {
                  //onpressed gets called when the button is tapped.
                },
              ),
    

    4. ButtonTextTheme textTheme

    It control the button’s text color based on the theme. There are 3 values

    1. ButtonTextTheme.Normal
    2. ButtonTextTheme.accent
    3. ButtonTextTheme.primary

    you can use like this

    
    textTheme: ButtonTextTheme.normal.
    
    

    It shows color based on your theme and swatch.

    5. Color textColor

    flatbutton textcolor example

    It determines button label’s or text color.

    
    FlatButton(
                onPressed: () {},
                child: Text("Login"),
                textColor: Colors.indigo,
              ),

    6. Color disabledTextColor

    flatbutton disabled text color example

    The color is used to display when the button is disabled. set null to onPressed.

    
    FlatButton(
                    child: Text('Flat Button - Default Disabled Text Color'),
                    onPressed: null,
                  ),
                  FlatButton(
                    child: Text('Flat Button - Custom Disabled Text Color'),
                    onPressed: null,
                    disabledTextColor: Colors.black54,
                  ),

    7. Color highlightColor

    Highlight property uses to highlight the button when it pressed. After the tap event, highlightColor spreads to fill the whole button and fade out.

    flatbutton high light color

    
    FlatButton(
              padding: EdgeInsets.all(80),
              highlightColor: Colors.redAccent,
              child: Text('FlatButton - highlight Color'),
               onPressed: () {
                //onpressed gets called when the button is tapped.
                print("FlatButton tapped");
              },
            ),
    

    8. Color splashColor

    When the button tapped, splashColor or tap event behaves as something falls into the liquid.

    splash color example

    
    FlatButton(
                       child: Text('Button'),
                       onPressed: (){},
                       splashColor: Colors.red,
            )
    

    9. Brightness colorBrightness

    flatbutton brightness example

    It’s used to increase the readability of text in Button. Use Brightness.light for light and Brightness.dark for dark background color.

    
    FlatButton(
                    child: Text('FlatButton - Brightness.light'),
                    colorBrightness: Brightness.light,
                    color: Colors.limeAccent,
                    onPressed: () {
                      //onpressed gets called when the button is tapped.
                      print("flat button tapped");
                    },
                  ),
                  FlatButton(
                    child: Text('FlatButton - Brightness.dark'),
                    colorBrightness: Brightness.dark,
                    color: Colors.deepPurple,
                    onPressed: () {
                      //onpressed gets called when the button is tapped.
                      print("flat button tapped");

    10. EdgeInsetsGeometry padding
    padding property helps us to specify the padding of FlatButton internal child. Here internal child is Text widget.

    
    FlatButton(
                    child: Text('FlatButton'),
                    onPressed: () {},
                    padding: EdgeInsets.all(50),
                    color: Color(0xFFFFD8C8),
                  ),
    • EdgeInsets.all() – Give enough padding to all sides of button’s text. Above code will apply 50 padding for all sides of the Text(Top, Bottom, Left and Right).

    • EdgeInsets.only() – It gives padding to the only specified side. You can specify one or more sides like below.

    flutter padding - EdgeInsets.only(top,left, right)

    
      FlatButton(
                    child: Text('FlatButton'),
                    onPressed: () {},
                    color: Color(0xFFFC6453),
                    padding: EdgeInsets.only(top: 10, left: 30, right: 20),
                  ),
    

    • EdgeInsets.symmetric() – You can provide values in horizontal and vertical directions.
    
      FlatButton(
                    child: Text('FlatButton'),
                    onPressed: () {},
                    color: Color(0xFF534858),
                    colorBrightness: Brightness.dark,
                    padding: EdgeInsets.symmetric(horizontal: 50),
                  ),
    
                  FlatButton(
                    child: Text('FlatButton'),
                    onPressed: () {},
                    color: Color(0xFF534858),
                    colorBrightness: Brightness.dark,
                    padding: EdgeInsets.symmetric(vertical: 50),
                  ),
                  Padding(
                    padding: EdgeInsets.all(10),
                  ),
                  FlatButton(
                    child: Text('FlatButton'),
                    onPressed: () {},
                    color: Color(0xFF534858),
                    colorBrightness: Brightness.dark,
                    padding: EdgeInsets.symmetric(horizontal: 50, vertical: 30),
                  ),
    
    

    11. ShapeBorder shape

    Shape property gives different options to make different shapes of flatbutton. Let’s make a rectangle FlatButton using shape property with the help of Border.all().

    flatbutton border all shape

    FlatButton(onPressed: (){}, child: Text('OK'),
              shape: Border.all(width: 2.0, color: Colors.pink),),
    
    
    • Border width is 2.0 and color is pink.

    StadiumBorder shape

    
     FlatButton(
                    onPressed: () {},
                    child: Text('StadiumBorder'),
                    shape: StadiumBorder(),
                    color: Colors.pink,
                    textColor: Colors.white,
                  ),
    

    CircleBorder

    FlatButton(
                    onPressed: () {},
                    child: Text('OK'),
                    shape: CircleBorder(),
                    color: Colors.pink,
                    textColor: Colors.white,)
    
    

    CircleBorder with Side

    
     FlatButton(
                    onPressed: () {},
                    child: Text('OK'),
                    shape: CircleBorder(
                      side: BorderSide(
                        color: Colors.pink,
                      ),
                    ),
                  )
    

    Rounded Rectangle Border

    FlatButton(
                    child: Text('Rounded Rectangle Border'),
                    onPressed: () {},
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(15)),
                    color: Colors.pink,
                    textColor: Colors.white,
                  )
    

    Beveled Rectangle Border

    FlatButton(
                    onPressed: () {},
                    child: Text('Beveled Rectangle Border'),
                    shape: BeveledRectangleBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                    color: Colors.pink,
                    textColor: Colors.white,
                  ),

    Outline Input Border

    FlatButton(
                    onPressed: () {},
                    child: Text('Outline Input Border'),
                    shape: OutlineInputBorder(),
                    color: Colors.pink,
                    textColor: Colors.white,
                  ),

    YOu can create underline using shape.

    Underline Input Border

    flatbutton underline input border

     FlatButton(
                    onPressed: () {},
                    child: Text('Underline Input Border'),
                    shape: UnderlineInputBorder(),
                    color: Colors.pink,
                    textColor: Colors.white,
                  ),

    FlatButton.Icon Example

    FlatButton.Icon Example
    Let’s create the Icon button using FlatButton.Icon

    
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'FlatButton Icon Ex',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Scaffold(
            appBar: AppBar(title: Text('FlatButton Icon Example'),
            centerTitle: true,),//it makes appbar title to center
            body: Center(
              child: FlatButton.icon(
                icon: Icon(Icons.add_alarm),//icon image
                label: Text('Add alarm'),//text to show in button
                textColor: Colors.white,//button text and icon color.
                color: Colors.green,//button background color
                onPressed: () {},
              ),
            ),
          ),
        );
      }
    }
    

    Flutter FlatButton onPressed Example – Counter Button


    flatbutton onpressed example
    In this example, you will learn how to change count using Flutter FlatButton. Final output will be like above image. Okay, Let’s start.

    
    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State {
      int counter = 0;
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('FlatButton onPressed Example'),
            ),
            body: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Center(
                  child: Text(
                    '$counter',
                    style: TextStyle(fontSize: 60.0),
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                FlatButton(
                  child: Text('CHANGE COUNT'),
                  onPressed: (){
                    setState(() {
                      counter = counter + 1;
                    });
                  },
               color: Colors.red,
                  textColor: Colors.white,
                ),
              ],
            ),
          ),
        );
      }
    }
    
    
    
    • Application starts execution from main() function.
    • The build() function builds user interface.
    • when we tap on the button, it increases counter variable by 1 and also calls setState().
    • The setState() function calls build() method again.

    Assume you liked this post, please share it with your family and friends.

    More information about Flutter FlatButton: FlatButton docs
    flutter text button flatbutton

7 Flutter Commands & Command Line Options You Must Know : Create New Project, Run & More Commands Using CLI

flutter create new project command line options cli create flutter app
In this post, you will learn about flutter terminal commands and command-line options. Using Flutter command-line interface (CLI), you can perform lots of operations in your project.

Before that make sure you have downloaded Flutter SDK and updated path variable if you are using Windows.

If you haven’t, you can use Flutter Android Studio post to do that.

You could run below commands in flutter console too.

flutter console terminal

This is Flutter console. You can find it in Flutter SDK.

Let’s start…

7. Flutter clean – Reduces Project Size by deleting build and .dart_tool directories.

When I created a simple flutter app, it’s size only below 200 kb but after a run in an emulator, Its size largely increases and takes more than 300 MB.

So if you have a low-configuration PC and you are learning flutter by making different apps. That might takes lots of memory in your device.

So just use below command in the root folder of the project.

flutter clean
flutter clean
flutter clean command
  • Using “flutter clean” command, you can reduce flutter project size. The command just deletes the build directory and some other files.

6.Flutter build – List Build Commands

For publishing your flutter app, you need to make binaries for Android and Ios. The build command by default makes a release flavor of the app.

flutter build

flutter build
  • It helps to list build formats of flutter
flutter build appbundle - build an appbundle
  • Recommended to build appbundle than apk.
flutter build apk 
  • It builds fat apk.
flutter build apk --split-per-abi 
  • Above command creates apks based on ABI.
flutter build ios 
  • Creates binaries for Ios.

5. Flutter channel – List Different Flutter Source Code Branches

Flutter channel means a git branch where we get Flutter source code. It could be used to change different branches such as master, dev, beta, and stable.

Just run “flutter channel” to find out.

flu
flutter channel
  • The channel with star symbol is you are currently using.
  • Here I am using stable channel and stable is recommended for product development.

Let’s change the channel…

flutter channel [channel_name] – this is syntax, let’s change stable to master.

flutter channel master
how to change flutter channel
change flutter channel to master
  • run “flutter upgrade” to ensure you are on the latest build.

4. Flutter run – Run Flutter Project

If you have created your flutter project, then you can run it on any devices or emulators using the run command. While using the run command, it must be called from the root directory of the project. you can use cd command for that purpose.

cd flutter_app
flutter run

    • If there are no emulators and devices connected, cmd will show “No supported devices connected”.
    • The app will get loaded and start running, If single device get connected,.
    • Multiple devices get connected, specify one device id with “flutter run -d” command
flutter run & fluttter run -d
flutter run & fluttter run -d
      • Just look at the above image, I just run “flutter run” and I got two devices, emulator and a physical device.
flutter run -d emulator-5554
    • Here I use emulator-5554 as device id.
  • If you want to run app on all devices, run “flutter run -d all” command.
  • By default, the debug version of the app will run on your device. It supports hot reload and fine for testing purposes.
  • There are other build flavors you can use like profile, flavor, and release.
  • the release version is for when you ready to publish it in play store or Appstore and it is not supported for emulators.
flutter run --release
  • If you use above command, you could see that the debug banner is gone.

3.flutter create – Create new flutter project Using Command Line

This command is used to create flutter projects, such as Flutter application, package, plugin, and module.

flutter create [output_directory_name or project_name]
  • Creates a Flutter app project
flutter create flutter_app
  • Creates a flutter app named “flutter_app”.
create flutter app flutter create new project command line
flutter create new project command line
  • After running above command, necessary files will be created on the specified name.
  • project name – It’s recommended to use lowercase with underscores.
  • If you run flutter create with existing flutter project name then the project will be recreated and if there are any files is missing, that too recreated again.
flutter creates project again
flutter recreates project
  • I have deleted main.dart file in the lib folder, now it recreated.

Let’s create a project with our own package name and description, use below code

flutter create --org com.androidride --description "simple example" my_flutter_app
  • It creates a package name with “com.androidride”, you can view description in README.md

Let’s check how to create a package using flutter commands.

flutter create -t package flutter_package
  • Creates a package named flutter_package.
flutter create package
flutter create package
  • You can use -t or –template to specify the flutter project.

Let’s create a plugin project with flutter create command.

flutter create -t plugin flutter_plugin
  • It creates plugin project named flutter_plugin.
  • By default, swift is used as ios language, Kotlin for Android.

we can change that by using the below command.

flutter create -t plugin -i objc -a java my_flutter_plugin
  • Here -i means ios language – objc used, -a means android language.
  • You can remove -t plugin, if you are making Flutter application

2.Flutter doctor – Diagnoses Flutter system environment.

This command diagnoses our system and tells us is everything fine or any issues need to treat just like a doctor.

If there are no issues, you are good to go. You don’t need to worry about all issues. For example, you are making a flutter app in VS Code, So you can avoid problems associated with Android Studio.

For example, Flutter plugin not installed in Android Studio like error.

flutter doctor

flutter doctor

  • Here I have one issue because I haven’t connected any devices.

Okay… Let’s know more details by running

flutter doctor -v

flutter doctor -v

  • Using the above image, we can understand that flutter doctor -v  gave more details about our Flutter development environment and tools.

1. flutter help

Just like the name it helps developers to find other commands and tells us how to use them just like a senior developer who is sitting nearby you. So I think, you don’t need to remember all commands I told above, Just remember this one.

flutter help
  • flutter -h and flutter –help give you the same results.
flutter help command
flutter help
flutter help -v
  • The above command gives a verbose output of flutter help.
flutter help [command]
  • Using the above syntax, we can check how other commands work.
flutter help create
  • Above command helps us to know more about create command.
flutter help create
flutter help create

Flutter Other Commands

Now I will show you some other commands with fewer details that helped me while I create flutter apps.

  • flutter doctor –android-licenses – It helps to accept all android licenses. If it didn’t work, use (your android_sdk directory)\tools\bin\sdkmanager –licenses
  • flutter logs – Shows logs generated by flutter apps in emulators and devices.
  • flutter analyze – It guides to make better code.
  • flutter config – Configures Flutter SDK and other settings.
  • flutter config –android-sdk “SDK_PATH”  – set Android SDK path.
  • flutter config –android-studio-dir “ANDROID_STUDIO_DIRECTORY_LOCATION” – sets Android Studio directory location
  • flutter upgrade – upgrade Flutter SDK to latest version
  • flutter downgrade – downgrade Flutter SDK to lower version
  • flutter pug get – pub is dart’s package manager, this command installs packages. The same function as packages get in Android Studio and Get packages in VS code.
  • flutter pub upgrade – upgrade packages to the latest version.
  • flutter emulators – shows available emulators.
  • flutter devices – shows connected emulators and devices
  • flutter screenshot – Takes screenshot from emulator or device
  • flutter screenshot -o C:\Users\Admin\Desktop\screenshot.png – Takes screenshot and stores in Desktop. (Windows users)

That’s all for now. Thank you. If you like this post, please share it with your friends and family.

How To Install Flutter In Android Studio In Windows : Flutter Android Studio Set Up Tutorial

how to install flutter in android studio in windows 10
Welcome to our first Flutter Android Studio tutorial.

Let’s start by talking about Flutter.

Google has introduced its software development kit Flutter in 2017. Using Flutter, you can develop applications for Android, ios, Mac, Windows, Linux, and More.

If you are making an app for Android and ios. You can consider using Flutter, which helps you to make both in one codebase.

So in this post, you will learn,

I am assuming that you have downloaded

and know, how to create an android project, emulator also.

How To Download Flutter SDK In Windows

how to install flutter in android studio in windows

download flutter sdk windows

  • While scrolling down, you will see a blue button with flutter latest SDK version in a zip file, just click on it.
  • Download begins…

Extract download flutter sdk windows

  • After the download, Extract the zip file

 

flutter sdk windows

  • Just cut and paste the extracted file in C drive, just like above. You can choose your suitable location except for Program Files in C drive.
  • Just click on the extracted directory.

flutter sdk

 

  • Click on flutter.

flutter console

  • This is Flutter software development kit. Here you can click on flutter console and check flutter commands.

flutter console terminal

  • This is flutter console window.
  • click on bin folder.

flutter bin directory

  • We need to update the PATH variable with “…/flutter/bin”, then only we can run flutter commands from any command prompt.
  • So copy the path with “flutter/bin” like shown above.

How To Update Path Variable With Flutter SDK Path In Windows

environment variable flutter setup

  • Search “env” on the search bar and click on “Edit environment variables for your account”.

update path variable with flutter

  • Click on the path field -> Edit -> New -> Paste it in the empty field. Just like above.
  • Click Ok.

create new path variable flutter

If the Path variable doesn’t exist, you need to create one. By clicking New->Providing values in each field (name and value) and click OK (just like shown above).

flutter doctor command check to install flutter plugin

  • Open the command prompt, and run the “flutter doctor” command.
  • If there is any problem you will see the red cross mark.
  • Here I got errors because flutter and dart plugin are unavailable, let’s clear it now.

How To Install Flutter Plugin In Android Studio

plugins android studio

  • Open Android Studio
  • If you don’t get a window like the above image.
    You may not close your last opened project. So just close your project, File -> Close Project.
  • Click on “Configure“.

plugins android studio 2

  • Next click on the “plugins” items from the drop-down menu.
  • flutter marketplace
  • Next, we have to find the flutter plugin from the marketplace. Make sure you are on the marketplace tab.
  • Then search “Flutter” in the search box and press Enter.
  • Click on the install button to install the flutter plugin.

flutter and dart plugin installation android studio

 

  • Dart plugin is also needed to make flutter applications. You don’t need to install separately. Just click on ‘Install‘ on the dialog box.
  • It will automatically download both.

restart android studio ide

  • Now click on the Restart IDE button to restart the Android Studio.

restart android studio ide dialog

  • In the next alert dialog box, “Restart Android Studio to activate changes in plugins?“. Click on Restart.

start a new flutter project in android studio

  • After the restart, now you can see “Start a new flutter project” item in the window.
  • That means you have successfully installed a flutter plugin in Android Studio.
  • But check again to confirm our system is ready to create flutter applicaions using flutter doctor command.

check flutter setup

  • Everything fine now.

How To Create Flutter Project In Android Studio

start a new flutter project in android studio

  • Click on “Start a new Flutter project”.

flutter project flutter application android studio

 

  • Select “Flutter Application” and click “Next”.

How To Change Flutter SDK Path In Android Studio

new flutter application android studio

 

  • I just let the project name as ‘flutter_app’. After that, one of the important step is to change the Flutter SDK path.
  • Click on Flutter SDK path (3 dot) button.

flutter sdk path set in android studio

  • Now you have to select the flutter SDK location, for me, it’s in C drive.  Expand drives by clicking on it.
  • After selecting flutter folder just click OK.

set flutter sdk path

  • Flutter SDK path is set now, then click Next.

change package name of flutter project

 

  • Change package name if you want.
  • I have changed to “com.androidride” , leave others, and click Finish.

How To Run Flutter Project In Android Studio

flutter run project android studio

 

  • After the build, the project will shown up just like above.
  • Like Android Project, Select your emulator and click on Run button.

run flutter app

  • The flutter application is ready now.

How To Open Existing Flutter Project In Android Studio

Method I – Drag And Drop Flutter Project To Android Studio

open existing flutter project in android studio

 

  • Before drag and drop your project, make sure you have installed the flutter plugin in Android Studio.

Method II – Using Open An Existing Android Studio Project

open existing flutter project in android studio

 

  • Click on “Open an Existing Android Studio project “.

open existing flutter app

  • Now you have to find the location of your flutter project. Here, my fluter project is located at desktop.
  • After selecting your project, just click OK.
  • The project is ready now.

I believe that this post will help you start your flutter journey. If you like this post, please share it with your family and friends. Thank you.

3 Android RecyclerView Load More On Scroll Examples

This post contains affiliate links. If you use these links to buy something I may earn a commission. Thanks.”

We are using lots of apps that load data while we scrolling. Facebook, Instagram, and more apps using this technique. This technique helps users to wait less time.

So if you are planning to make an app like that, using RecyclerView. Then this post is for you.

In this post, You will learn how to use Load More on Scroll or pagination or endless scrolling or infinite scroll or whatever you call, with RecyclerView.

Before that, I recommend reading our RecyclerView Tutorial Guide.

This post is not dealing with the pagination library.

How To Implement Pagination In Android RecyclerView

In this post, I am going to talk about two methods, that implement pagination in RecyclerView. But in both methods, we will use scroll Listener with RecyclerView to listen to scroll events. When RecyclerView scrolls, onScrolled() method gets called.

So first learn how to add OnScrollListener with Recyclerview.

How To Add OnScrollListener With RecyclerView


    //attaches scrollListener with RecyclerView
        recyclerview.addOnScrollListener(object : RecyclerView.OnScrollListener()
        {
            override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int)
            {
                super.onScrolled(recyclerView, dx, dy)

              

            }
            })


Simple Android RecyclerView Load More On Scroll Example

Let’s make a linear list Using RecyclerView and add an endless scroll feature.

pagination in android recyclerview

After the implementation of scroll listener, we should do the following

  • we use findLastCompletelyVisibleItemPosition() to get the position of last visible item.
  • Use a variable which checks progressbar loading or not
  • If last item reached and progressbar not loading, loadmore() gets called. Using Handler, we add “load” in list.
  • When adapter checks list, ProgressBar gets added.
  • Next data chunks received, ProgressBar gets removed and data got added.
  • For showing different View types. here
    1. Data row
    2. ProgressBar

    Make use of getViewType() method in RecyclerView.Adapter.

MainActivity.kt

class MainActivity : AppCompatActivity()
{
    //handler instance
    var handler: Handler = Handler()
    //list for holding data
    lateinit var list : ArrayList

    lateinit var adapter : RecyclerViewAdapter
    //Variable for checking progressbar loading or not
    private var isLoading: Boolean = false
    lateinit var layoutManager : LinearLayoutManager



    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        layoutManager = LinearLayoutManager(this)
        //attaches LinearLayoutManager with RecyclerView
        recyclerview.layoutManager = layoutManager

        list = ArrayList()

        load()

        adapter = RecyclerViewAdapter(list)

        recyclerview.adapter = adapter

        addScrollerListener()

    }

    private fun addScrollerListener()
    {
        //attaches scrollListener with RecyclerView
        recyclerview.addOnScrollListener(object : RecyclerView.OnScrollListener()
        {
            override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int)
            {
                super.onScrolled(recyclerView, dx, dy)

                if (!isLoading)
                {
                    //findLastCompletelyVisibleItemPostition() returns position of last fully visible view.
                    ////It checks, fully visible view is the last one.
                    if (layoutManager.findLastCompletelyVisibleItemPosition() == list.size - 1)
                    {

                        loadMore()
                        isLoading = true

                    }
                }

            }
            })
    }

    private fun loadMore()
    {
        //notify adapter using Handler.post() or RecyclerView.post()
        handler.post(Runnable
        {
            list.add("load")
            adapter.notifyItemInserted(list.size - 1)

        })

        handler.postDelayed(Runnable {

            //removes "load".
            list.removeAt(list.size - 1)
            var listSize = list.size

            adapter.notifyItemRemoved(listSize)
            //sets next limit
            var nextLimit = listSize + 10

            for(i in listSize until nextLimit)
            {
                list.add("Item No $i")
            }

            adapter.notifyDataSetChanged()
            isLoading = false

        },2500)
    }


    private fun load()
    {
        for(i in 0..9)
        {
            list.add("Item No: $i")
        }
    }

}

 

  • It's better to use Handler.post() or RecyclerView.post() while updating adapter when RecyclerView measures.
  • findLastCompletelyVisibleItemPosition() returns only completely visible Item's position, So make sure your last view is fully visible.
  • 2500 milliseconds - delay time

RecyclerViewAdapter.kt

package m.example.simplerecyclerviewloadmoreex_kotlin

import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.row.view.*

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import java.lang.IllegalArgumentException

class RecyclerViewAdapter(var list: ArrayList<String>) : RecyclerView.Adapter<RecyclerView.ViewHolder>()
{
    companion object
    {
        private const val VIEW_TYPE_DATA = 0;
        private const val VIEW_TYPE_PROGRESS = 1;
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewtype: Int): RecyclerView.ViewHolder
    {
        return when (viewtype)
        {
            VIEW_TYPE_DATA ->
            {//inflates row layout
                val view = LayoutInflater.from(parent.context).inflate(R.layout.row,parent,false)
                DataViewHolder(view)
            }

            VIEW_TYPE_PROGRESS ->
            {//inflates progressbar layout
                val view = LayoutInflater.from(parent.context).inflate(R.layout.progressbar,parent,false)
                ProgressViewHolder(view)
            }
            else -> throw IllegalArgumentException("Different View type")

        }
    }

    override fun getItemCount(): Int
    {
        return list.size
    }

    override fun getItemViewType(position: Int): Int
    {
        var viewtype = list.get(position)

        return when(viewtype)
        {//if data is load, returns PROGRESSBAR viewtype.
            "load"  -> VIEW_TYPE_PROGRESS
            else -> VIEW_TYPE_DATA
        }
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, p1: Int)
    {

        if (holder is DataViewHolder)
        {
            holder.textview.text = list.get(p1)
        }
    }

    inner class DataViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
    {
        var textview = itemView.textview

        init {
            itemView.setOnClickListener {
                Toast.makeText(itemView.context,list.get(adapterPosition),Toast.LENGTH_LONG).show()
            }
        }
    }

    inner class ProgressViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)

}

 

  • getItemViewType(int position) method returns VIEW_TYPE_PROGRESS, if data is "load". Otherwise, it returns VIEW_TYPE_DATA.
  • Based on ViewType, In onCreateViewHolder layout will get inflated.

Grid RecyclerView Pagination Example - Different Approach

Now we will make a Grid RecyclerView with pagination. Sometimes we need to load data before the last item loads.

grid android recyclerview infinite scroll example pagination

For that purpose, you can make use of this approach.

Okay, what we do in this approach.

we define 3 variables, visibleThreshold, lastVisibleItem, and totalItemCount.

  • visibleThreshold : limit of items that user want to see before loading next items
  • lastVisibleItem : just like name, last visible item position in adapter
  • totalItemCount : No.of items in adapter

after the scroll listener setup,

  • When onScrolled() gets called, just checks totalItemCount <= lastVisibleItem + visibleThreshold with isLoading : variable for storing progressbar state.
  • if both are true, next chunks of data get loaded
class MainActivity : AppCompatActivity()
{
    lateinit var list : ArrayList
    lateinit var adapter : RecyclerViewAdapter
    private var isLoading: Boolean = false
    lateinit var gridlayoutManager : GridLayoutManager


    private var visibleThreshold = 5
    private var lastVisibleItem = 0
    private var totalItemCount = 0

    //handler instance
    private var handler: Handler = Handler()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //no of columns or span in the grid.
        var columns = 2

        gridlayoutManager = GridLayoutManager(this, columns)
        recyclerview.layoutManager = gridlayoutManager

        load()

        adapter = RecyclerViewAdapter(list)

        recyclerview.adapter = adapter

        addScrollerListener()

        gridlayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup()
        {
            //Each item occupies 1 span by default.
            override fun getSpanSize(p0: Int): Int
            {
                return when (adapter.getItemViewType(p0))
                {
                    //returns total no of spans, to occupy full sapce for progressbar
                    RecyclerViewAdapter.VIEW_TYPE_PROGRESS -> gridlayoutManager.spanCount
                    RecyclerViewAdapter.VIEW_TYPE_DATA -> 1
                    else -> -1
                }
            }
        }
    }

      private  fun addScrollerListener()
        {
            recyclerview.addOnScrollListener(object : RecyclerView.OnScrollListener()
            {
                override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int)
                {
                    super.onScrolled(recyclerView, dx, dy)

                    //total no. of items
                    totalItemCount = gridlayoutManager.itemCount
                    //last visible item position
                    lastVisibleItem = gridlayoutManager.findLastCompletelyVisibleItemPosition()

                    if(!isLoading && totalItemCount <= (lastVisibleItem + visibleThreshold))
                    {
                        loadMore()
                        isLoading = true
                    }
                }
            })
        }



    private fun loadMore()
    {
        handler.post(Runnable
        {
            //adds load item in list
            list.add("load")
            adapter.notifyItemInserted(list.size - 1)

        })

        recyclerview.postDelayed(Runnable {

            //removes load item in list.
            list.removeAt(list.size - 1)
            var listSize = list.size

            adapter.notifyItemRemoved(listSize)
            //next limit
            var nextLimit = listSize + 10

            for(i in listSize until nextLimit)
            {
                list.add("Item No $i")
            }

            adapter.notifyDataSetChanged()
            isLoading = false

        },7000)

    }

    private fun load()
    {
        list = ArrayList()

        for(i in 0..9)
        {
            list.add("Item $i")
        }
    }

}

  • Make ProgressBar width to maximum using setSpanSizeLookup() method

 

RecyclerViewAdapter.kt

 

class RecyclerViewAdapter(var list: ArrayList<String>) : RecyclerView.Adapter<RecyclerView.ViewHolder>()
{
    companion object
    {
        const val VIEW_TYPE_DATA = 0;
        const val VIEW_TYPE_PROGRESS = 1;
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewtype: Int): RecyclerView.ViewHolder
    {
        return when (viewtype)
        {
            VIEW_TYPE_DATA ->
            {
                val view = LayoutInflater.from(parent.context).inflate(R.layout.row,parent,false)
                DataViewHolder(view)
            }

            VIEW_TYPE_PROGRESS ->
            {
                val view = LayoutInflater.from(parent.context).inflate(R.layout.progressbar,parent,false)
                ProgressViewHolder(view)
            }
            else -> throw IllegalArgumentException("Different View type")

        }
    }

    override fun getItemCount(): Int
    {
        return list.size
    }

    override fun getItemViewType(position: Int): Int
    {
        var viewtype = list.get(position)
        return when(viewtype)
        {
            "load"  -> VIEW_TYPE_PROGRESS
            else -> VIEW_TYPE_DATA
        }
    }

    override fun onBindViewHolder(p0: RecyclerView.ViewHolder, p1: Int)
    {

        if (p0 is DataViewHolder)
        {
            p0.textview.text = list.get(p1)
        }
    }

    inner class DataViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
    {
        var textview = itemView.textview

        init {
            itemView.setOnClickListener {
                Toast.makeText(itemView.context,list.get(adapterPosition),Toast.LENGTH_LONG).show()
            }
        }
    }

    inner class ProgressViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
    
}

Retrofit Android RecyclerView Infinite Scroll Example

In this example, we will load data from the internet using Retrofit2. You can download PHP(data.php) code from the Source Code link shown at the top.

I am using Android Studio 3.5.


Let's create a project.

In choosing your project window, click on "Empty Activity" and click Next.

Name: RetrofitRecyclerViewLoadMoreEx

Package name: androidride.com

Select language Kotlin

I am going to use AndroidX library, so make sure you tick on the androidx.* artifacts.
That's your choice, but I recommend to use this one.

Click "Finish".


add below dependencies

implementation 'com.squareup.retrofit2:retrofit:2.0.2'
implementation 'com.squareup.retrofit2:converter-gson:2.0.2'

implementation 'androidx.cardview:cardview:1.0.0'
implementation 'androidx.recyclerview:recyclerview:1.1.0'
  • Gson converter : It helps to serialize and deserialize JSON data.

build.gradle(Module:App)

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 28
    buildToolsVersion "29.0.2"
    defaultConfig {
        applicationId "com.androidride.retrofitrecyclerviewloadmoreex"
        minSdkVersion 15
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.core:core-ktx:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.2.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'


    implementation 'com.squareup.retrofit2:retrofit:2.0.2'
    implementation 'com.squareup.retrofit2:converter-gson:2.0.2'

    implementation 'androidx.cardview:cardview:1.0.0'
    implementation 'androidx.recyclerview:recyclerview:1.1.0'

}

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
</resources>

 

strings.xml

<resources>
    <string name="app_name">Retrofit RecyclerView LoadMore Ex - Kotlin</string>
</resources>

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

 

  • Don't forget to add INTERNET permission in AndroidManifest.xml like below

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.androidride.retrofitrecyclerviewloadmoreex">

    <uses-permission android:name="android.permission.INTERNET"/>

    <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>

Data.kt

package com.androidride.retrofitrecyclerviewloadmoreex

data class Data(var category: String)
{
    var title: String? = null
    var subtitle: String? = null

    init {
        this.category = category
    }
}

DataApi.kt

package com.androidride.retrofitrecyclerviewloadmoreex

import retrofit2.Call
import retrofit2.http.GET
import retrofit2.http.Query

interface DataApi
{
@GET("data.php")
fun getData(@Query("index") index : Int): Call<List<Data>>
}
  • In Retrofit2, endpoints defined in Interface with special annotations.
  • This endpoint returns List.

MainActivity.kt

package com.androidride.retrofitrecyclerviewloadmoreex

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.activity_main.*
import retrofit2.Call
import retrofit2.Callback
import retrofit2.Response
import retrofit2.Retrofit


class MainActivity : AppCompatActivity()
{
    lateinit var list: ArrayList
    lateinit var adapter: RecyclerViewAdapter

    var notLoading = true
    lateinit var layoutManager: LinearLayoutManager
    lateinit var api: DataApi
    lateinit var retrofit: Retrofit


    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)


        list = ArrayList()
        adapter = RecyclerViewAdapter(list)
        recyclerview.setHasFixedSize(true)

        layoutManager = LinearLayoutManager(this)
        recyclerview.layoutManager = layoutManager
        recyclerview.adapter = adapter

        retrofit = RetrofitInstance.getRetrofitInstance()
        api = retrofit.create(DataApi::class.java)

        load(0)

        addscrolllistener()
    }

    private fun addscrolllistener()
    {
        recyclerview.addOnScrollListener(object : RecyclerView.OnScrollListener()
        {
            override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int)
            {
                if(notLoading &&  layoutManager.findLastCompletelyVisibleItemPosition() == list.size -1 )
                {
                    list.add(Data("progress"))
                    adapter.notifyItemInserted(list.size - 1)
                    notLoading = false

                    val call: Call<List> = api.getData(list.size - 1)

                    call.enqueue( object :  Callback<List>
                    {
                        override fun onResponse(call: Call<List>?, response: Response<List>?)
                        {
                        list.removeAt(list.size - 1)
                        adapter.notifyItemRemoved(list.size)

                                if(response!!.body().isNotEmpty())
                                {
                                    list.addAll(response.body())
                                    adapter.notifyDataSetChanged()
                                    notLoading = true
                                }
                                else
                                {
                                    Toast.makeText(applicationContext,"End of data reached", Toast.LENGTH_LONG).show()
                                }

                        }

                        override fun onFailure(call: Call<List>?, t: Throwable?) {
                            TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
                        }
                    })
                }
            }
        })
    }

    private fun load(i: Int)
    {
        val call: Call<List> = api.getData(0)

        call.enqueue(object : Callback<List>
        {
            override fun onResponse(call: Call<List>?, response: Response<List>?)
            {
                if(response!!.isSuccessful)
                {
                    list.addAll(response!!.body())
                    adapter.notifyDataSetChanged()
                }

            }

            override fun onFailure(call: Call<List>?, t: Throwable?)
            {

            }
        })

    }
}


RetrofitInstance.kt

package com.androidride.retrofitrecyclerviewloadmoreex

import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory

class RetrofitInstance
{
    companion object
    {
        fun getRetrofitInstance(): Retrofit
        {
            val retrofit = Retrofit.Builder().baseUrl("https://www.androidride.com/").addConverterFactory(
                GsonConverterFactory.create()).build()

            return retrofit

        }
    }
}

  • For performing network requests, we need to create Retrofit Instance using Retrofit.Builder() using Base Url

RecyclerViewAdapter.kt

package com.androidride.retrofitrecyclerviewloadmoreex;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import org.w3c.dom.Text;

import java.util.ArrayList;

public class RecyclerViewAdapter extends RecyclerView.Adapter
{

    public static final int TYPE_DATA = 0;
    public static final int TYPE_PROGRESS = 1;

    ArrayList list;

        public RecyclerViewAdapter(Context context,ArrayList list)
        {
            this.list = list;
        }


    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType)
    {
        LayoutInflater inflater = LayoutInflater.from(parent.getContext());

            if(viewType == TYPE_DATA)
            {
                return new DataHolder(inflater.inflate(R.layout.row,parent,false));
            }
            else
            {
                return new ProgressHolder(inflater.inflate(R.layout.progressbar,parent,false));
            }

    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position)
    {
            if(holder instanceof  DataHolder)
            {
                ((DataHolder) holder).textTitle.setText(list.get(position).title);
                ((DataHolder) holder).textSubtitle.setText(list.get(position).subtitle);
            }
    }

    @Override
    public int getItemCount()
    {
        return list ==  null ? 0 : list.size() ;
    }

    @Override
    public int getItemViewType(int position)
    {
        if(list.get(position).category.equals("data"))
        {
            return TYPE_DATA;
        }
        else
         {
            return TYPE_PROGRESS;
         }
    }

    class DataHolder extends RecyclerView.ViewHolder
    {
        TextView textTitle,textSubtitle;

        public DataHolder(@NonNull final View itemView)
        {
            super(itemView);

            textTitle =(TextView)itemView.findViewById(R.id.title);
            textSubtitle = (TextView)itemView.findViewById(R.id.subtitle);

            itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view)
                {
                    Toast.makeText(itemView.getContext(),"Clicked Item: "+list.get(getAdapterPosition()).subtitle,Toast.LENGTH_SHORT).show();
                }
            });
        }
    }

    class ProgressHolder extends RecyclerView.ViewHolder
    {
        public ProgressHolder(@NonNull View itemView)
        {
            super(itemView);
        }
    }
}


retrofit android recyclerview pagination example

Thanks for scrolling. If you have liked this post, please share it with your friends and family.

Please disable your adblocker or whitelist this site!