DEV Community

Cover image for How To Select multiple images with Flutter - fluttercorner.com
FlutterCorner
FlutterCorner

Posted on

How To Select multiple images with Flutter - fluttercorner.com

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
Enter fullscreen mode Exit fullscreen mode

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());
}
Enter fullscreen mode Exit fullscreen mode

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> {

}
Enter fullscreen mode Exit fullscreen mode

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

  List<Asset> images = List<Asset>();
Enter fullscreen mode Exit fullscreen mode

After That make future method named pickImages();

Future<void> pickImages() async {

}
Enter fullscreen mode Exit fullscreen mode

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,
            ),
Enter fullscreen mode Exit fullscreen mode

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

Future<void> pickImages() async {
  List<Asset> resultList = List<Asset>();
}
Enter fullscreen mode Exit fullscreen mode

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",
        ),
      );
Enter fullscreen mode Exit fullscreen mode

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,
            ),
Enter fullscreen mode Exit fullscreen mode

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);
    }
Enter fullscreen mode Exit fullscreen mode

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,
                  );
                }),
              ),
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
minhthuanit profile image
thuantm

Thank you for your post.

Multi image picker package was discontinued.
I recommend freemar_image_picker, support capture & select images in the same view.

pub.dev/packages/freemar_image_picker

Collapse
 
rutuja07 profile image
Rutuja07

stackoverflow.com/questions/673714... can you help me with this?