How To Select multiple images with Flutter - fluttercorner.com
Published: 2020-11-04 14:49:36

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](https://fluttercorner.com/how-to-select-multiple-images-with-flutter/)