Merge pull request #26 from Ahmadre/fix/#25

Fix/#25
Ahmadre · Jun 15, 2021 · ff4c9b0 · ff4c9b0
2 parents fc6d667 + 407b649
commit ff4c9b0
Show file tree

Hide file tree

Showing 6 changed files with 357 additions and 144 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 2.0.3 - [15/06/2021]
+
+* Fixed issue [#25](https://github.com/Ahmadre/image_picker_web/issues/25) when clicking on cancel or close buttons
+* Improved example file
+
 ## 2.0.2 - [27/04/2021]
 
 * Fixed issue [#22](https://github.com/Ahmadre/image_picker_web/issues/22)

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -1,136 +1,32 @@
-import 'dart:html' as html;
-
 import 'package:flutter/material.dart';
-import 'package:image_picker_web/image_picker_web.dart';
-
-void main() => runApp(MyApp());
-
-class MyApp extends StatefulWidget {
-  @override
-  _MyAppState createState() => _MyAppState();
-}
+import 'package:image_picker_web_example/photoHistory_add_view.dart';
+import 'package:image_picker_web_example/sample_page.dart';
 
-class _MyAppState extends State<MyApp> {
-  final _pickedImages = <Image>[];
-  final _pickedVideos = <dynamic>[];
-
-  String _imageInfo = '';
-
-  Future<void> _pickImage() async {
-    Image fromPicker =
-        await ImagePickerWeb.getImage(outputType: ImageType.widget);
-
-    if (fromPicker != null) {
-      setState(() {
-        _pickedImages.clear();
-        _pickedImages.add(fromPicker);
-      });
-    }
-  }
-
-  Future<void> _pickVideo() async {
-    final videoMetaData =
-        await ImagePickerWeb.getVideo(outputType: VideoType.bytes);
-    if (videoMetaData != null)
-      setState(() {
-        _pickedVideos.clear();
-        _pickedVideos.add(videoMetaData);
-      });
-  }
-
-  Future<void> _pickMultiImages() async {
-    List<Image> images =
-        await ImagePickerWeb.getMultiImages(outputType: ImageType.widget);
-    setState(() {
-      _pickedImages.clear();
-      _pickedImages.addAll(images);
-    });
-  }
-
-  Future<void> _getImgFile() async {
-    html.File infos = await ImagePickerWeb.getImage(outputType: ImageType.file);
-    setState(() => _imageInfo =
-        'Name: ${infos.name}\nRelative Path: ${infos.relativePath}');
-  }
-
-  Future<void> _getImgInfo() async {
-    final infos = await ImagePickerWeb.getImageInfo;
-    setState(() {
-      _pickedImages.clear();
-      _pickedImages.add(Image.memory(
-        infos.data,
-        semanticLabel: infos.fileName,
-      ));
-      _imageInfo = '${infos.toJson()}';
-    });
-  }
+void main() => runApp(MaterialApp(home: HomePage()));
 
+class HomePage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
-      home: Scaffold(
-        appBar: AppBar(
-          title: const Text('Image Picker Web Example'),
+    return Scaffold(
+      appBar: AppBar(title: Text('Home')),
+      body: Center(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            ElevatedButton(
+              onPressed: () => Navigator.push(
+                  context, MaterialPageRoute(builder: (_) => SamplePage())),
+              child: Text('Sample 1'),
+            ),
+            const SizedBox(height: 8),
+            ElevatedButton(
+              onPressed: () => Navigator.push(context,
+                  MaterialPageRoute(builder: (_) => PhotosHistoryAddPage())),
+              child: Text('Sample 2'),
+            ),
+          ],
         ),
-        body: Center(
-            child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                crossAxisAlignment: CrossAxisAlignment.center,
-                mainAxisSize: MainAxisSize.min,
-                children: <Widget>[
-              Wrap(
-                // spacing: 15.0,
-                children: <Widget>[
-                  AnimatedSwitcher(
-                    duration: const Duration(milliseconds: 300),
-                    switchInCurve: Curves.easeIn,
-                    child: SizedBox(
-                      width: 500,
-                      height: 200,
-                      child: ListView.builder(
-                          scrollDirection: Axis.horizontal,
-                          itemCount:
-                              _pickedImages == null ? 0 : _pickedImages.length,
-                          itemBuilder: (context, index) =>
-                              _pickedImages[index]),
-                    ),
-                  ),
-                  Container(
-                    height: 200,
-                    width: 200,
-                    child: Text(_imageInfo, overflow: TextOverflow.ellipsis),
-                  ),
-                  ..._pickedVideos
-                      .map<Widget>((e) => Text(
-                            e.toString(),
-                            overflow: TextOverflow.ellipsis,
-                          ))
-                      .toList(),
-                ],
-              ),
-              ButtonBar(alignment: MainAxisAlignment.center, children: <Widget>[
-                ElevatedButton(
-                  onPressed: _pickImage,
-                  child: const Text('Select Image'),
-                ),
-                ElevatedButton(
-                  onPressed: _pickVideo,
-                  child: const Text('Select Video'),
-                ),
-                ElevatedButton(
-                  onPressed: _pickMultiImages,
-                  child: const Text('Select Multi Images'),
-                ),
-                ElevatedButton(
-                  onPressed: _getImgFile,
-                  child: const Text('Get Image File'),
-                ),
-                ElevatedButton(
-                  onPressed: _getImgInfo,
-                  child: const Text('Get Image Info'),
-                ),
-              ]),
-            ])),
       ),
     );
   }

diff --git a/example/lib/photoHistory_add_view.dart b/example/lib/photoHistory_add_view.dart
@@ -0,0 +1,120 @@
+import 'package:flutter/material.dart';
+import 'package:image_picker_web/image_picker_web.dart';
+
+const Color kDarkGray = Color(0xFFA3A3A3);
+const Color kLightGray = Color(0xFFF1F0F5);
+
+class PhotosHistoryAddPage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) => ImagePickerWidget();
+}
+
+enum PageStatus { LOADING, ERROR, LOADED }
+
+class ImagePickerWidget extends StatefulWidget {
+  @override
+  _ImagePickerWidgetState createState() => _ImagePickerWidgetState();
+}
+
+class _ImagePickerWidgetState extends State<ImagePickerWidget> {
+  final _photos = <Image>[];
+  PageStatus _pageStatus = PageStatus.LOADED;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text('Sample 2')),
+      body: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        mainAxisAlignment: MainAxisAlignment.start,
+        children: <Widget>[
+          Container(
+            height: 100,
+            child: ListView.builder(
+              scrollDirection: Axis.horizontal,
+              itemCount: _photos.length + 1,
+              itemBuilder: (context, index) {
+                if (index == 0) {
+                  return _buildAddPhoto();
+                }
+                var image = _photos[index - 1];
+                return Stack(
+                  children: <Widget>[
+                    InkWell(
+                      child: Container(
+                          margin: EdgeInsets.all(5),
+                          height: 100,
+                          width: 100,
+                          color: kLightGray,
+                          child: image),
+                    ),
+                  ],
+                );
+              },
+            ),
+          ),
+          if (_pageStatus == PageStatus.LOADED)
+            Container(
+              margin: EdgeInsets.all(16),
+              child: ElevatedButton(
+                onPressed: () {},
+                child: Text('Save'),
+              ),
+            )
+        ],
+      ),
+    );
+  }
+
+  InkWell _buildAddPhoto() {
+    if (_pageStatus == PageStatus.LOADING) {
+      return InkWell(
+        onTap: () => null,
+        child: Container(
+          margin: EdgeInsets.all(5),
+          height: 100,
+          width: 100,
+          color: kDarkGray,
+          child: Center(child: Text('Please wait..')),
+        ),
+      );
+    } else {
+      return InkWell(
+        onTap: () => _onAddPhotoClicked(context),
+        child: Container(
+          margin: EdgeInsets.all(5),
+          height: 100,
+          width: 100,
+          color: kDarkGray,
+          child: Center(
+            child: Icon(
+              Icons.add_to_photos,
+              color: kLightGray,
+            ),
+          ),
+        ),
+      );
+    }
+  }
+
+  Future<void> _onAddPhotoClicked(context) async {
+    setState(() {
+      _pageStatus = PageStatus.LOADING;
+    });
+
+    final image =
+        (await ImagePickerWeb.getImage(outputType: ImageType.widget)) as Image;
+    print(image);
+
+    if (image != null) {
+      setState(() {
+        _photos.add(image);
+        _pageStatus = PageStatus.LOADED;
+      });
+    } else {
+      setState(() {
+        _pageStatus = PageStatus.LOADED;
+      });
+    }
+  }
+}