Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

How to Make Multiple Image Picker in Flutter App

In this example, we are going to show you how to make multiple image file picker from the local gallery and display picked images on Flutter App. See the example below:

Read this also: How to use Image Picker and upload file to PHP server

First, add image_picker Flutter package on your project by adding the following lines on pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^0.8.4+4

Import Packages to your script:

import 'dart:io';
import 'package:image_picker/image_picker.dart';

How to Pick multiple Image Files on Flutter:

final ImagePicker imgpicker = ImagePicker();
List<XFile>? imagefiles;
try {
    var pickedfiles = await imgpicker.pickMultiImage();
    //you can use ImageCourse.camera for Camera capture
    if(pickedfiles != null){
        imagefiles = pickedfiles;
        setState(() {
        });
    }else{
        print("No image is selected.");
    }
}catch (e) {
    print("error while picking file.");
}

Full Flutter/Dart Code Example:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() {
  runApp( MaterialApp(
       home: Home()
  ));
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {

  final ImagePicker imgpicker = ImagePicker();
  List<XFile>? imagefiles;

  openImages() async {
try {
    var pickedfiles = await imgpicker.pickMultiImage();
    //you can use ImageCourse.camera for Camera capture
    if(pickedfiles != null){
        imagefiles = pickedfiles;
        setState(() {
        });
    }else{
        print("No image is selected.");
    }
}catch (e) {
    print("error while picking file.");
}
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
         resizeToAvoidBottomInset: false,
         appBar: AppBar(
            title: Text("Multiple Image Picker Flutter"),
            backgroundColor: Colors.deepPurpleAccent,
         ),
          body: Container(
             alignment: Alignment.center,
             padding: EdgeInsets.all(20),
             child: Column(
               children: [

                  //open button ----------------
                  ElevatedButton(
                    onPressed: (){
                        openImages();
                    }, 
                    child: Text("Open Images")
                  ),

                  Divider(),
                  Text("Picked Files:"),
                  Divider(),

                  imagefiles != null?Wrap(
                     children: imagefiles!.map((imageone){
                        return Container(
                           child:Card( 
                              child: Container(
                                 height: 100, width:100,
                                 child: Image.file(File(imageone.path)),
                              ),
                           )
                        );
                     }).toList(),
                  ):Container()
               ],
             ),
          )
      );
  }
}

Output Screenshot:

Image selector during picking:

Image Showing in Flutter app after selecting image:

In this way, you can make multiple image file picker in Flutter app.

No any Comments on this Article


Please Wait...