How To Select multiple images with Flutter. Hello Guys How are you all ? hope you all are fine. Today we are come with another tutorial. Many times you have to pick more than 1 image and show them in app. So we are going to learn Select multiple images with Flutter.

To select multiple images we will use multi_image_picker flutter package. in this Package we can select multiple images from gallery. so without wasting your time lets start this Tutorial.

Select multiple images with Flutter

First Of All Add multi_image_picker package in your pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  multi_image_picker: ^4.7.14

After That run pub get command to get dependencies.

then import material.dart , multi_image_picker.dart and async in your main.dart file.

import 'package:flutter/material.dart';
import 'package:multi_image_picker/multi_image_picker.dart';
import 'dart:async';

Then Lets Create void main and Define MyApp in your runApp.
void main() {
  runApp(MyApp());
}

Now, Create a class named MyApp extends with a StatefulWidget widget. This is our main View class.

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

class _MyAppState extends State<MyApp> {

}

Lets make one List Of Asset that will hold all multiple images list.

  List<Asset> images = List<Asset>();

After That make future method named pickImages();

Future<void> pickImages() async {

}

Then, Lets trigger this method to our RaisedButton. on click of this button our pickImage method will be call.

            RaisedButton(
              child: Text("Pick images"),
              onPressed: pickImages,
            ),

Now, Lets Define List of Asset in resultList inside our pickImages method.

Future<void> pickImages() async {
  List<Asset> resultList = List<Asset>();
}

Then after lets choose image by our plugin.

resultList will hold list of Assets that return from MultiImagePicker.pickImages() method Return As Define Below.

    MultiImagePicker.pickImages(
        maxImages: 300,
        enableCamera: true,
        selectedAssets: images,
        materialOptions: MaterialOptions(
          actionBarTitle: "FlutterCorner.com",
        ),
      );

Now, when we click on our RaisedButton your gallery will be open and then we can choose images.

            RaisedButton(
              child: Text("Pick images"),
              onPressed: pickImages,
            ),

After that we have assets list. that we can use everywhere there we need.

    try {
      resultList = await MultiImagePicker.pickImages(
        maxImages: 300,
        enableCamera: true,
        selectedAssets: images,
        materialOptions: MaterialOptions(
          actionBarTitle: "FlutterCorner.com",
        ),
      );
    } on Exception catch (e) {
      print(e);
    }

Now for Demo purpose we are showing all images that we have chosen all images.

Lets use builder method to show images.

            GridView.count(
                crossAxisCount: 3,
                children: List.generate(images.length, (index) {
                  Asset asset = images[index];
                  return AssetThumb(
                    asset: asset,
                    width: 300,
                    height: 300,
                  );
                }),
              ),

Here is my Main.dart file that will helpful for you. How To Select multiple images with Flutter

Blog

How To Select multiple images with Flutter - fluttercorner.com

FlutterCorner

Select multiple images with Flutter

Join Our Newsletter. No Spam, Only the good stuff.

Related