How To Select multiple images with Flutter

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.

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

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

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

class _MyAppState extends State<MyApp> {
  List<Asset> images = List<Asset>();

  @override
  void initState() {
    super.initState();
  }

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

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

    setState(() {
      images = resultList;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('Multi Image Picker - FlutterCorner.com'),
        ),
        body: Column(
          children: <Widget>[
            RaisedButton(
              child: Text("Pick images"),
              onPressed: pickImages,
            ),
            Expanded(
              child: GridView.count(
                crossAxisCount: 3,
                children: List.generate(images.length, (index) {
                  Asset asset = images[index];
                  return AssetThumb(
                    asset: asset,
                    width: 300,
                    height: 300,
                  );
                }),
              ),
            )
          ],
        ),
      ),
    );
  }
}

For Android

Dont Forgot to add this lines into your AndroidManifest.xml under android/app/src/main/AndroidManifest.xml

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

For iOS

Add below lines into your info.plist file under ios/Runner/info.plist

<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires to save your images user gallery</string>

Summery

So Guys That’s It For How to Select multiple images with Flutter. Hope you like our tutorial. Comment below Your thoughts and your queries. And Also Comment below your suggestion here.

Also Read

• How to make a blur Background Image effect in Flutter using BackdropFilter.
• Create Rounded Corners Image in Flutter.
• Also Read How to set Background Image to Scaffold in Flutter.
• [Solved] How to fix HttpException: Connection closed before full header was received
• How to Launching Google Maps and Apple Maps in Flutter