Open In App

How to Select Multiple Images From image_picker in Flutter?

Improve
Improve
Like Article
Like
Save
Share
Report

In some scenarios, we have to select multiple images from our device. It is difficult to select images one by one if have to select images of more than 3. So in this article, you will learn how to select multiple images from the device gallery and will display them in our UI also. You can even set the max height, width, imageQuality of the image after it is selected. Refer to this article Gallery Access and Camera in Flutter.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Create a variable for a list of images and image picker

Dart




List<File> selectedImages = []; // List of selected image
final picker = ImagePicker();  // Instance of Image picker


Step 3: Create a button for selecting multiple images

Dart




// Button to select multiple images function you
// can change theme button as per your requirement  
ElevatedButton(
               style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.green)),
                  // TO change button color
                  child: const Text('Select Image from Gallery and Camera'),
                  onPressed: () {
                   getImages();
                  },
                ),


Step 4: Show images in the grid view builder

Dart




Expanded(
          child: SizedBox(
                   width: 300.0, // To show images in particular area only
                   child: selectedImages.isEmpty  // If no images is selected
                       ? const Center(child: Text('Sorry nothing selected!!'))
                       // If atleast 1 images is selected
                       : GridView.builder(
                           itemCount: selectedImages.length,
                           gridDelegate:
                               const SliverGridDelegateWithFixedCrossAxisCount(
                                   crossAxisCount: 3
                               // Horizontally only 3 images will show
                               ),
                           itemBuilder: (BuildContext context, int index) {
                             // TO show selected file
                             return Center(
                                 child: kIsWeb
                                     ? Image.network(
                                         selectedImages[index].path)
                                     : Image.file(selectedImages[index]));
                             // If you are making the web app then you have to
                             // use image provider as network image or in
                             // android or iOS it will as file only
                           },
                         ),
                 ),
               ),


Step 5: Add Function to button to select images

Dart




Future getImages() async {
    final pickedFile = await picker.pickMultiImage(
        imageQuality: 100, // To set quality of images
      maxHeight: 1000, // To set maxheight of images that you want in your app
      maxWidth: 1000); // To set maxheight of images that you want in your app
    List<XFile> xfilePick = pickedFile;
 
         // if atleast 1 images is selected it will add
        // all images in selectedImages
        // variable so that we can easily show them in UI
        if (xfilePick.isNotEmpty) {
          for (var i = 0; i < xfilePick.length; i++) {
            selectedImages.add(File(xfilePick[i].path));
          }
           setState(
      () {  },
    );
        } else {
          // If no image is selected it will show a
          // snackbar saying nothing is selected
          ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('Nothing is selected')));
        }
     
  }


Complete Code

Dart




import 'dart:io';
 
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.green),
      home: const MultipleImageSelector(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
class MultipleImageSelector extends StatefulWidget {
  const MultipleImageSelector({super.key});
 
  @override
  State<MultipleImageSelector> createState() => _MultipleImageSelectorState();
}
 
class _MultipleImageSelectorState extends State<MultipleImageSelector> {
  List<File> selectedImages = [];
  final picker = ImagePicker();
  @override
  Widget build(BuildContext context) {
    // display image selected from gallery
    return Scaffold(
      appBar: AppBar(
        title: const Text('Multiple Images Select'),
        backgroundColor: Colors.green,
        actions: const [],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.green)),
              child: const Text('Select Image from Gallery and Camera'),
              onPressed: () {
                getImages();
              },
            ),
            const Padding(
              padding: EdgeInsets.symmetric(vertical: 18.0),
              child: Text(
                "GFG",
                textScaleFactor: 3,
                style: TextStyle(color: Colors.green),
              ),
            ),
            Expanded(
              child: SizedBox(
                width: 300.0,
                child: selectedImages.isEmpty
                    ? const Center(child: Text('Sorry nothing selected!!'))
                    : GridView.builder(
                        itemCount: selectedImages.length,
                        gridDelegate:
                            const SliverGridDelegateWithFixedCrossAxisCount(
                                crossAxisCount: 3),
                        itemBuilder: (BuildContext context, int index) {
                          return Center(
                              child: kIsWeb
                                  ? Image.network(selectedImages[index].path)
                                  : Image.file(selectedImages[index]));
                        },
                      ),
              ),
            ),
          ],
        ),
      ),
    );
  }
 
  Future getImages() async {
    final pickedFile = await picker.pickMultiImage(
        imageQuality: 100, maxHeight: 1000, maxWidth: 1000);
    List<XFile> xfilePick = pickedFile;
 
    setState(
      () {
        if (xfilePick.isNotEmpty) {
          for (var i = 0; i < xfilePick.length; i++) {
            selectedImages.add(File(xfilePick[i].path));
          }
        } else {
          ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('Nothing is selected')));
        }
      },
    );
  }
}


For Android:

Add this permission to android/app/src/main/AndroidManifest.xml

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

For iOS:

Add the following keys to your Info.plist file, located in <project root>/ios/Runner/Info.plist:

NSPhotoLibraryUsageDescription
NSCameraUsageDescription
NSMicrophoneUsageDescription

Output:

1. When No images are selected  

 

2. When you pressed the button but nothing is selected

 

3. When you selected images 

 

Video Output:



Last Updated : 02 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads