How to Select Multiple Images From image_picker in Flutter?
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