image detail

lib/material/app.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:momo/material/router.dart';
-import 'package:momo/provider/rerender.dart';
 import 'package:momo/provider/token.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 
@@ -17,9 +16,9 @@ class MyMaterialApp extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     String? token = ref.watch(tokenProvider);
-    UniqueKey uniqueKey = ref.watch(uniqueIdProvider);
+    // UniqueKey uniqueKey = ref.watch(uniqueIdProvider);
     MyMaterialRouterConfig myMaterialRouterConfig =
-        MyMaterialRouterConfig(token,uniqueKey);
+        MyMaterialRouterConfig(token);
 
     return MaterialApp.router(
       routerConfig: myMaterialRouterConfig.router,

lib/material/detail.dart

@@ -1,18 +1,129 @@
+import 'package:dio/dio.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
+import 'package:momo/models/image_resp.dart';
+import 'package:momo/provider/rerender.dart';
+import 'package:momo/request/http_client.dart';
 
-class ImageDetail extends StatefulWidget {
+class ImageDetail extends ConsumerStatefulWidget {
   const ImageDetail({Key? key}) : super(key: key);
 
   @override
-  State<ImageDetail> createState() => _ImageDetailState();
+  ConsumerState<ImageDetail> createState() => _ImageDetailState();
 }
 
-class _ImageDetailState extends State<ImageDetail> {
+class _ImageDetailState extends ConsumerState<ImageDetail> {
+  Future<ImageResp?> loadImage(id) async {
+    try {
+      var resp = await dio.get("/image/detail/$id");
+      return ImageResp.fromJson(resp.data);
+    } catch (e) {
+      if (e is DioError) {
+        if (kDebugMode) {
+          print(e.response?.data);
+        }
+      }
+    }
+    return null;
+  }
+
+  double? dx;
+  double? dy;
+  double _scale = 1;
+
   @override
   Widget build(BuildContext context) {
-    return Center(
+    String id = GoRouterState.of(context).queryParams["id"] ?? "";
-      child: Text(GoRouterState.of(context).queryParams["id"] ?? ""),
+    return Container(
+      width: double.infinity,
+      height: double.infinity,
+      color: Colors.white,
+      // TODO: 缩放组件溢出
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          Positioned(
+              left: dx,
+              top: dy,
+              child: Draggable(
+                onDragUpdate: (drag) {
+                  print(drag);
+                  // setState(() {
+                  //   dx = drag.localPosition.dx;
+                  //   dy = drag.localPosition.dy;
+                  // });
+                },
+                feedback: const SizedBox(),
+                child: FutureBuilder(
+                    future: loadImage(id),
+                    builder: (BuildContext context, snapshot) {
+                      if (snapshot.hasData) {
+                        return Image.network(
+                            "${dio.options.baseUrl}/image/${snapshot.data?.file_path}",
+                            loadingBuilder:
+                                (BuildContext context, child, loadingProgress) {
+                          if (loadingProgress == null) {
+                            return Transform.scale(
+                              scale: _scale,
+                              child: child,
+                            );
+                          }
+                          return Center(
+                            child: CircularProgressIndicator(
+                              value: loadingProgress.expectedTotalBytes != null
+                                  ? loadingProgress.cumulativeBytesLoaded /
+                                      loadingProgress.expectedTotalBytes!
+                                  : null,
+                            ),
+                          );
+                        });
+                      } else if (snapshot.hasError) {
+                        print(snapshot.error);
+                        return ErrorWidget("err");
+                      }
+                      return CircularProgressIndicator();
+                    }),
+              )),
+          Positioned(
+              bottom: 10,
+              child: Card(
+                // decoration: BoxDecoration(),
+                elevation: 30,
+                // color: Colors.pinkAccent,
+                child: Padding(
+                  padding: const EdgeInsets.fromLTRB(20, 5, 20, 5),
+                  child: Row(
+                    children: [
+                      IconButton(
+                          onPressed: () {
+                            dio.delete("/image/delete/$id").then((resp) {
+                              ref.read(uniqueIdProvider.notifier).updateId();
+                              context.go("/");
+                            });
+                          },
+                          icon: const Icon(Icons.delete)),
+                      IconButton(
+                          onPressed: () {
+                            setState(() {
+                              _scale -= 0.1;
+                            });
+                          },
+                          icon: const Icon(Icons.remove_circle_outline)),
+                      IconButton(
+                          onPressed: () {
+                            setState(() {
+                              _scale += 0.1;
+                            });
+                          },
+                          icon: const Icon(Icons.add_circle_outline)),
+                    ],
+                  ),
+                ),
+              )),
+        ],
+      ),
     );
   }
 }

lib/material/gallery.dart

@@ -3,17 +3,29 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 import 'package:momo/models/image_list_resp.dart';
 import 'package:momo/models/image_resp.dart';
-import 'package:momo/provider/gallery.dart';
+import 'package:momo/provider/rerender.dart';
 import 'package:momo/request/http_client.dart';
 
-class Gallery extends ConsumerStatefulWidget {
+class Gallery extends ConsumerWidget {
   const Gallery({Key? key}) : super(key: key);
 
   @override
-  ConsumerState<Gallery> createState() => _GalleryState();
+  Widget build(BuildContext context, WidgetRef ref) {
+    UniqueKey key = ref.watch(uniqueIdProvider);
+    return ImageGrid(
+      key: key,
+    );
+  }
 }
 
-class _GalleryState extends ConsumerState<Gallery> {
+class ImageGrid extends StatefulWidget {
+  const ImageGrid({Key? key}) : super(key: key);
+
+  @override
+  State<ImageGrid> createState() => _ImageGridState();
+}
+
+class _ImageGridState extends State<ImageGrid> {
   late ScrollController _scrollController;
 
   List<ImageResp> imageList = [];
@@ -42,20 +54,12 @@ class _GalleryState extends ConsumerState<Gallery> {
     }
   }
 
-  void resetState() {
-    imageList = [];
-    pageNum = 1;
-    hasMore = true;
-    loading = false;
-    ref.read(galleryProvider.notifier).clearImage();
-  }
-
   @override
   void initState() {
     // TODO: implement initState
     super.initState();
     print("init");
-    // ref.read(galleryProvider.notifier).clearImage();
+
     _scrollController = ScrollController(initialScrollOffset: 5.0)
       ..addListener(() {
         if (_scrollController.offset >=
@@ -72,7 +76,6 @@ class _GalleryState extends ConsumerState<Gallery> {
 
   @override
   Widget build(BuildContext context) {
-    print("build gallery");
     return GridView.builder(
         itemCount: imageList.length,
         controller: _scrollController,
@@ -95,28 +98,5 @@ class _GalleryState extends ConsumerState<Gallery> {
             ),
           );
         });
-    // final imageList = ref.watch(galleryProvider);
-    // return GridView.builder(
-    //     itemCount: imageList.length,
-    //     controller: _scrollController,
-    //     gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-    //         crossAxisCount: MediaQuery.of(context).size.width > 640 ? 5 : 3),
-    //     itemBuilder: (BuildContext context, int index) {
-    //       return InkWell(
-    //         onTap: () {
-    //           context.go(Uri(
-    //                   path: "/detail",
-    //                   queryParameters: {"id": "${imageList[index].id}"})
-    //               .toString());
-    //         },
-    //         child: Image.network(
-    //           "${dio.options.baseUrl}/image/thumbnail/${imageList[index].file_path}",
-    //           fit: BoxFit.cover,
-    //           errorBuilder: (BuildContext context, o, err) {
-    //             return const Icon(Icons.error_outline);
-    //           },
-    //         ),
-    //       );
-    //     });
   }
 }

lib/material/home.dart

@@ -18,6 +18,8 @@ class HomePage extends ConsumerStatefulWidget {
 
 class _HomePageState extends ConsumerState<HomePage> {
   int selectedIndex = 0;
+  bool uploading = false;
+  double uploadProgress = 0;
   final tabList = [
     {"path": "/", "title": "相册"},
     {"path": "/profile", "title": "用户资料"},
@@ -45,48 +47,69 @@ class _HomePageState extends ConsumerState<HomePage> {
         ),
         elevation: 10,
       ),
-      floatingActionButton: selectedIndex == 0
+      floatingActionButton:
-          ? FloatingActionButton(
+          selectedIndex == 0 && GoRouterState.of(context).fullpath == "/"
-              onPressed: () async {
+              ? (!uploading
-                FilePickerResult? result =
+                  ? FloatingActionButton(
-                    await FilePicker.platform.pickFiles(type: FileType.image);
+                      onPressed: () async {
+                        FilePickerResult? result = await FilePicker.platform
+                            .pickFiles(type: FileType.image);
 
-                if (result != null) {
+                        if (result != null) {
-                  String? filePath = result.files.first.path;
+                          String? filePath = result.files.first.path;
-                  if (filePath == null) {
+                          if (filePath == null) {
-                    return;
+                            return;
-                  }
+                          }
-                  String? mimeType = lookupMimeType(filePath);
+                          String? mimeType = lookupMimeType(filePath);
-                  FormData data = FormData.fromMap({
+                          FormData data = FormData.fromMap({
-                    "pic": await MultipartFile.fromFile(filePath,
+                            "pic": await MultipartFile.fromFile(filePath,
-                        filename: result.files.first.name,
+                                filename: result.files.first.name,
-                        contentType: MediaType(mimeType!.split("/").first,
+                                contentType: MediaType(
-                            mimeType.split("/").last))
+                                    mimeType!.split("/").first,
-                  });
+                                    mimeType.split("/").last))
-                  await dio.post("/image/upload", data: data).then((value) {
+                          });
-                    ref.read(uniqueIdProvider.notifier).updateId();
+                          setState(() {
-                    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
+                            uploading = true;
-                      content: Row(
+                          });
-                        crossAxisAlignment: CrossAxisAlignment.center,
+                          await dio.post("/image/upload", data: data,
-                        children: const [
+                              onSendProgress: (sended, total) {
-                          Icon(
+                            print("$sended / $total");
-                            Icons.check_circle,
+                            setState(() {
-                            color: Colors.white,
+                              uploadProgress = sended / total;
-                          ),
+                            });
-                          SizedBox(
+                          }).then((value) {
-                            width: 10,
+                            setState(() {
-                          ),
+                              uploading = false;
-                          Text("上传成功")
+                            });
-                        ],
+                            ref.read(uniqueIdProvider.notifier).updateId();
+                            ScaffoldMessenger.of(context).showSnackBar(SnackBar(
+                              content: Row(
+                                crossAxisAlignment: CrossAxisAlignment.center,
+                                children: const [
+                                  Icon(
+                                    Icons.check_circle,
+                                    color: Colors.white,
+                                  ),
+                                  SizedBox(
+                                    width: 10,
+                                  ),
+                                  Text("上传成功")
+                                ],
+                              ),
+                              backgroundColor: Colors.lightGreen,
+                            ));
+                          });
+                        } else {}
+                      },
+                      child: const Icon(Icons.add),
+                    )
+                  : FloatingActionButton(
+                      onPressed: null,
+                      child: CircularProgressIndicator(
+                        value: uploadProgress,
                       ),
-                      backgroundColor: Colors.lightGreen,
+                    ))
-                    ));
+              : null,
-                  });
-                } else {}
-              },
-              child: const Icon(Icons.add),
-            )
-          : null,
       body: Row(
         children: [
           MediaQuery.of(context).size.width > 640

lib/material/router.dart

@@ -12,7 +12,7 @@ class MyMaterialRouterConfig {
   final GlobalKey<NavigatorState> _rootNavigatorKey =
       GlobalKey<NavigatorState>();
 
-  MyMaterialRouterConfig(String? token, UniqueKey uniqueKey) {
+  MyMaterialRouterConfig(String? token) {
     router = GoRouter(
       navigatorKey: _rootNavigatorKey,
       initialLocation: "/",
@@ -41,9 +41,8 @@ class MyMaterialRouterConfig {
                   GoRoute(
                       path: "detail",
                       name: "图片详情",
-                      pageBuilder:
+                      builder: (BuildContext context, GoRouterState state) =>
-                          (BuildContext context, GoRouterState state) =>
+                          const ImageDetail())
-                              const NoTransitionPage(child: ImageDetail())),
                 ]),
             GoRoute(
                 path: "/profile",

lib/provider/gallery.dart

@@ -8,7 +8,6 @@ class GalleryNotifier extends Notifier<List<ImageResp>> {
   }
 
   void addImage({required List<ImageResp> imageList}) {
-    // return await rc.future;
     state = [...state, ...imageList];
   }