[image_picker]Update example app

packages/image_picker/image_picker/CHANGELOG.md

@@ -1,3 +1,6 @@
+## 0.8.1+2
+
+* Update the example app to support the multi-image feature.
 
 ## 0.8.1+1
 

packages/image_picker/image_picker/example/lib/main.dart

@@ -37,8 +37,10 @@ class MyHomePage extends StatefulWidget {
 
 class _MyHomePageState extends State<MyHomePage> {
   PickedFile? _imageFile;
+  List<PickedFile>? _imageFileList;
   dynamic _pickImageError;
   bool isVideo = false;
+  bool isMultiImage = false;
   VideoPlayerController? _controller;
   VideoPlayerController? _toBeDisposed;
   String? _retrieveDataError;
@@ -81,6 +83,24 @@ class _MyHomePageState extends State<MyHomePage> {
       final PickedFile? file = await _picker.getVideo(
           source: source, maxDuration: const Duration(seconds: 10));
       await _playVideo(file);
+    } else if (isMultiImage) {
+      await _displayPickImageDialog(context!,
+          (double? maxWidth, double? maxHeight, int? quality) async {
+        try {
+          final pickedFileList = await _picker.getMultiImage(
+            maxWidth: maxWidth,
+            maxHeight: maxHeight,
+            imageQuality: quality,
+          );
+          setState(() {
+            _imageFileList = pickedFileList;
+          });
+        } catch (e) {
+          setState(() {
+            _pickImageError = e;
+          });
+        }
+      });
     } else {
       await _displayPickImageDialog(context!,
           (double? maxWidth, double? maxHeight, int? quality) async {
@@ -174,6 +194,56 @@ class _MyHomePageState extends State<MyHomePage> {
     }
   }
 
+  Widget _previewMultiImages() {
+    final Text? retrieveError = _getRetrieveErrorWidget();
+    if (retrieveError != null) {
+      return retrieveError;
+    }
+    if (_imageFileList != null) {
+      if (kIsWeb) {
+        // Why network?
+        // See https://pub.dev/packages/image_picker#getting-ready-for-the-web-platform
+        return ListView.builder(
+          key: UniqueKey(),
+          itemBuilder: (context, index) {
+            return Image.network(_imageFileList![index].path);
+          },
+          itemCount: _imageFileList!.length,
+        );
+      } else {
+        return Semantics(
+            child: ListView.builder(
+              key: UniqueKey(),
+              itemBuilder: (context, index) {
+                return Image.file(File(_imageFileList![index].path));
+              },
+              itemCount: _imageFileList!.length,
+            ),
+            label: 'image_picker_example_picked_images');
+      }
+    } else if (_pickImageError != null) {
+      return Text(
+        'Pick image error: $_pickImageError',
+        textAlign: TextAlign.center,
+      );
+    } else {
+      return const Text(
+        'You have not yet picked an image.',
+        textAlign: TextAlign.center,
+      );
+    }
+  }
+
+  Widget _handlePreview() {
+    if (isVideo) {
+      return _previewVideo();
+    } else if (isMultiImage) {
+      return _previewMultiImages();
+    } else {
+      return _previewImage();
+    }
+  }
+
   Future<void> retrieveLostData() async {
     final LostData response = await _picker.getLostData();
     if (response.isEmpty) {
@@ -213,7 +283,7 @@ class _MyHomePageState extends State<MyHomePage> {
                         textAlign: TextAlign.center,
                       );
                     case ConnectionState.done:
-                      return isVideo ? _previewVideo() : _previewImage();
+                      return _handlePreview();
                     default:
                       if (snapshot.hasError) {
                         return Text(
@@ -229,7 +299,7 @@ class _MyHomePageState extends State<MyHomePage> {
                   }
                 },
               )
-            : (isVideo ? _previewVideo() : _previewImage()),
+            : _handlePreview(),
       ),
       floatingActionButton: Column(
         mainAxisAlignment: MainAxisAlignment.end,
@@ -239,10 +309,24 @@ class _MyHomePageState extends State<MyHomePage> {
             child: FloatingActionButton(
               onPressed: () {
                 isVideo = false;
+                isMultiImage = false;
                 _onImageButtonPressed(ImageSource.gallery, context: context);
               },
               heroTag: 'image0',
               tooltip: 'Pick Image from gallery',
+              child: const Icon(Icons.photo),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.only(top: 16.0),
+            child: FloatingActionButton(
+              onPressed: () {
+                isVideo = false;
+                isMultiImage = true;
+                _onImageButtonPressed(ImageSource.gallery, context: context);
+              },
+              heroTag: 'image1',
+              tooltip: 'Pick Multiple Image from gallery',
               child: const Icon(Icons.photo_library),
             ),
           ),
@@ -251,9 +335,10 @@ class _MyHomePageState extends State<MyHomePage> {
             child: FloatingActionButton(
               onPressed: () {
                 isVideo = false;
+                isMultiImage = false;
                 _onImageButtonPressed(ImageSource.camera, context: context);
               },
-              heroTag: 'image1',
+              heroTag: 'image2',
               tooltip: 'Take a Photo',
               child: const Icon(Icons.camera_alt),
             ),
@@ -264,6 +349,7 @@ class _MyHomePageState extends State<MyHomePage> {
               backgroundColor: Colors.red,
               onPressed: () {
                 isVideo = true;
+                isMultiImage = false;
                 _onImageButtonPressed(ImageSource.gallery);
               },
               heroTag: 'video0',
@@ -277,6 +363,7 @@ class _MyHomePageState extends State<MyHomePage> {
               backgroundColor: Colors.red,
               onPressed: () {
                 isVideo = true;
+                isMultiImage = false;
                 _onImageButtonPressed(ImageSource.camera);
               },
               heroTag: 'video1',

packages/image_picker/image_picker/pubspec.yaml

@@ -3,7 +3,7 @@ description: Flutter plugin for selecting images from the Android and iOS image
   library, and taking new pictures with the camera.
 repository: https://github.com/flutter/plugins/tree/master/packages/image_picker/image_picker
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+image_picker%22
-version: 0.8.1+1
+version: 0.8.1+2
 
 environment:
   sdk: ">=2.12.0 <3.0.0"