Flutterexperts

The flutter widget is built using a modern framework. It is like a reaction. In this, we start with the widget to create any application. Each component in the screen is a widget. The widget describes what his outlook should be given his present configuration and condition. Widget shows were similar to its idea and current setup and state. Flutter is a free and open-source tool to develop mobile, desktop, web applications with a single code base.

In this article, we will explore the Multiple Image Picker in flutter using the multiple_image_picker_package. With the help of the package, we can easily achieve a flutter number picker. So let’s get started.

multi_image_picker | Flutter Package
Flutter plugin that allows you to display multi-image picker on iOS and Android. Key Features * Documentation * FAQ *…pub.dev

---

Table Of Contents :

Multiple Image Picker

Implementation

Code Implement

Code File

Conclusion

---

Multiple Image Picker :

A multi-image picker library is used to select multiple images to show the selected image in the app, so we are going to use a multi-image picker library to select multiple images.

Demo Module :

Implementation :

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies :dependencies:
numberpicker: ^2.0.1

Step 2: Importing

import 'package:numberpicker/numberpicker.dart';

Step 3: Enable AndriodX

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

Step 4: Run flutter package get

Code Implementation :

Create a new dart file called multi_image_picker_demo.dart inside the libfolder.

First of all, we have created a list of the image.

List<Asset> images = <Asset>[];

Now we have defined a button, inside which there is a method named loadAssets, which has used the MultiImagePicker, which shows us by selecting the image.

ElevatedButton(
child: Text("Pick images"),
onPressed: loadAssets,
),

Before using the multi-image picker, create a list of build grid view builders inside which will show the selected image.

Container(
height:DeviceSize.height(context),
width:DeviceSize.width(context),
child:Column(
mainAxisAlignment:MainAxisAlignment.center,
children: <Widget>[
//Center(child: Text('Error: $_error')),
ElevatedButton(
child: Text("Pick images"),
onPressed: loadAssets,
),
Expanded(
child: buildGridView(),
),
],
),
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File :

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

class MultipleImageDemo extends StatefulWidget {
@override
_MultipleImageDemoState createState() => _MultipleImageDemoState();
}

class _MultipleImageDemoState extends State<MultipleImageDemo> {
List<Asset> images = <Asset>[];

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

Widget buildGridView() {
return GridView.count(
crossAxisCount: 3,
children: List.generate(images.length, (index) {
Asset asset = images[index];
return AssetThumb(
asset: asset,
width: 300,
height: 300,
);
}),
);
}

Future<void> loadAssets() async {
List<Asset> resultList = <Asset>[];
String error = 'No Error Detected';

try {
resultList = await MultiImagePicker.pickImages(
maxImages: 300,
enableCamera: true,
selectedAssets: images,
cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
materialOptions: MaterialOptions(
actionBarColor: "#abcdef",
actionBarTitle: "Example App",
allViewTitle: "All Photos",
useDetailsView: false,
selectCircleStrokeColor: "#000000",
),
);
} on Exception catch (e) {
error = e.toString();
}

if (!mounted) return;

setState(() {
images = resultList;
// _error = error;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Multiple Picker Image'),
),
body:Container(
height:DeviceSize.height(context),
width:DeviceSize.width(context),
child:Column(
mainAxisAlignment:MainAxisAlignment.center,
children: <Widget>[
//Center(child: Text('Error: $_error')),
ElevatedButton(
child: Text("Pick images"),
onPressed: loadAssets,
),
Expanded(
child: buildGridView(),
),
],
),
),
);
}
}

Conclusion:

In this flutter article, I have explained a Multi-Image Picker in a flutter, which you can modify and experiment with according to your own, this little introduction was from the Image Pickerdemo from our side.

I hope this blog will provide you with sufficient information in Trying up the Image Picker in your flutter project. We will show you the Image Picker is?, and work on it in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

Feel free to connect with us
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.