DEV UPDATE:Step complete image page

lib/routes/picture/pictureDetail.dart

@@ -0,0 +1,150 @@
+import 'dart:typed_data';
+
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:dio/dio.dart';
+import 'package:extended_image/extended_image.dart';
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:image_gallery_saver_v3/image_gallery_saver.dart';
+
+class PictureDetail extends StatefulWidget {
+  const PictureDetail({
+    Key? key,
+    required this.index,
+    required this.images,
+  }) : super(key: key);
+
+  final int index;
+  final List<String> images;
+
+  @override
+  State<PictureDetail> createState() => _PictureDetailState();
+}
+
+class _PictureDetailState extends State<PictureDetail> {
+  late int currentIndex;
+
+  @override
+  void initState() {
+    currentIndex = widget.index;
+    super.initState();
+  }
+
+  _save(String url) async {
+    try {
+      var response = await Dio()
+          .get(url, options: Options(responseType: ResponseType.bytes));
+      final result = await ImageGallerySaver.saveImage(
+        Uint8List.fromList(response.data),
+      );
+      Fluttertoast.showToast(
+          msg: "存图成功👌",
+          toastLength: Toast.LENGTH_SHORT,
+          gravity: ToastGravity.CENTER,
+          timeInSecForIosWeb: 1,
+          backgroundColor: Colors.red,
+          textColor: Colors.white,
+          fontSize: 16.0);
+    } catch (e) {
+      Fluttertoast.showToast(
+          msg: "存图失败😒",
+          toastLength: Toast.LENGTH_SHORT,
+          gravity: ToastGravity.CENTER,
+          timeInSecForIosWeb: 1,
+          backgroundColor: Colors.red,
+          textColor: Colors.white,
+          fontSize: 16.0);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Container(
+        width: double.infinity,
+        height: double.infinity,
+        child: Stack(
+          children: [
+            Positioned(
+              top: 0,
+              bottom: 0,
+              left: 0,
+              right: 0,
+              child: Container(
+                color: Colors.black,
+                child: ExtendedImageGesturePageView.builder(
+                  itemBuilder: (BuildContext context, int index) {
+                    var item = widget.images[index];
+                    var itemImage = CachedNetworkImageProvider(item);
+                    Widget image = ExtendedImage(
+                      image: itemImage,
+                      fit: BoxFit.contain,
+                      mode: ExtendedImageMode.gesture,
+                      initGestureConfigHandler: (ExtendedImageState state) {
+                        return GestureConfig(
+                          inPageView: true,
+                          initialScale: 1.0,
+                          //you can cache gesture state even though page view page change.
+                          //remember call clearGestureDetailsCache() method at the right time.(for example,this page dispose)
+                          cacheGesture: false,
+                        );
+                      },
+                    );
+                    image = Container(
+                      child: image,
+                      padding: EdgeInsets.all(5.0),
+                    );
+                    if (index == currentIndex) {
+                      return Hero(
+                        tag: item + index.toString(),
+                        child: image,
+                      );
+                    } else {
+                      return image;
+                    }
+                  },
+                  itemCount: widget.images.length,
+                  onPageChanged: (int index) {
+                    currentIndex = index;
+                  },
+                  // controller: PageController(
+                  //   initialPage: currentIndex,
+                  // ),
+                  scrollDirection: Axis.horizontal,
+                ),
+              ),
+            ),
+            Positioned(
+              left: 4,
+              child: SafeArea(
+                child: IconButton(
+                  onPressed: () {
+                    Navigator.pop(context);
+                  },
+                  icon: Icon(
+                    Icons.arrow_back,
+                    color: Colors.white,
+                  ),
+                ),
+              ),
+            ),
+            Positioned(
+              right: 4,
+              child: SafeArea(
+                child: IconButton(
+                  onPressed: () {
+                    _save(widget.images[currentIndex]);
+                  },
+                  icon: Icon(
+                    Icons.save,
+                    color: Colors.white,
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/routes/picture/pictureSwiper.dart

@@ -1,4 +1,5 @@
 import 'package:cached_network_image/cached_network_image.dart';
+import 'package:eoe_fans/routes/picture/pictureDetail.dart';
 import 'package:extended_image/extended_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
@@ -20,14 +21,26 @@ class PictureSwiper extends StatelessWidget {
             return Stack(
               children: [
                 Positioned(
-                  top:0,
+                  top: 0,
                   bottom: 0,
                   left: 0,
                   right: 0,
-                  child: Container(
-                    child: ExtendedImage(
-                      image: image,
-                      fit: BoxFit.cover,
+                  child: GestureDetector(
+                    onTap: () {
+                      Navigator.push(
+                        context,
+                        MaterialPageRoute(
+                          builder: (context) {
+                            return PictureDetail(index: index, images: images);
+                          },
+                        ),
+                      );
+                    },
+                    child: Container(
+                      child: ExtendedImage(
+                        image: image,
+                        fit: BoxFit.cover,
+                      ),
                     ),
                   ),
                 ),
@@ -37,7 +50,14 @@ class PictureSwiper extends StatelessWidget {
                   right: 0,
                   child: Container(
                     height: 40,
-                    color: Color.fromRGBO(0, 0, 0, .3),
+                    decoration: new BoxDecoration(
+                      color: Color.fromRGBO(0, 0, 0, .3),
+                      gradient: LinearGradient(
+                        colors: [Colors.transparent, Colors.black],
+                        begin: Alignment.topCenter,
+                        end: Alignment.bottomCenter,
+                      ),
+                    ),
                   ),
                 )
               ],

pubspec.lock

@@ -296,6 +296,13 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  fluttertoast:
+    dependency: "direct main"
+    description:
+      name: fluttertoast
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "8.1.2"
   frontend_server_client:
     dependency: transitive
     description:
@@ -373,6 +380,13 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "3.3.0"
+  image_gallery_saver_v3:
+    dependency: "direct main"
+    description:
+      name: image_gallery_saver_v3
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "1.0.0"
   io:
     dependency: transitive
     description:

pubspec.yaml

@@ -17,7 +17,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 # In Windows, build-name is used as the major, minor, and patch parts
 # of the product and file versions while build-number is used as the build suffix.
-version: 1.4.0+1
+version: 1.4.1+1
 
 environment:
     sdk: '>=2.18.6 <3.0.0'
@@ -50,6 +50,8 @@ dependencies:
     settings_ui: ^2.0.2
     hgg_app_upgrade: ^1.0.0
     extended_image: ^6.3.4
+    image_gallery_saver_v3: ^1.0.0
+    fluttertoast: ^8.1.2
 
 dev_dependencies:
     flutter_test: