momo/lib/material/detail.dart

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 ConsumerStatefulWidget {
  const ImageDetail({Key? key}) : super(key: key);

  @override
  ConsumerState<ImageDetail> createState() => _ImageDetailState();
}

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=0;
  double _scale = 1;

  Offset offsetBeforeDrag = const Offset(0, 0);
  Offset origin = const Offset(0, 0);
  double ox = 0;

  @override
  Widget build(BuildContext context) {
    String id = 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,

            child: GestureDetector(
              onTapDown: (TapDownDetails details) {
                print("tap start");
                print(details.globalPosition.dx);
                offsetBeforeDrag = details.globalPosition;
              },
              child: Draggable(
                onDragUpdate: (details) {
                  print("on drag update");
                  print(details.globalPosition.dx - offsetBeforeDrag.dx);
                  // print(details.localPosition - offsetBeforeDrag);
                  // print(offsetBeforeDrag.dx - details.localPosition.dx);
                  // print(offsetBeforeDrag.dy - details.localPosition.dy);
                  //
                  setState(() {
                    origin = (offsetBeforeDrag - details.localPosition);
                    // /
                    // (_scale - 1);
                  });
                },
                feedback: const SizedBox(),
                child: FutureBuilder(
                    future: loadImage(id),
                    builder: (BuildContext context, snapshot) {
                      if (snapshot.hasData) {
                        // return ClipRect(
                        //   child: SizedBox(
                        //     width: double.infinity,
                        //     height: double.infinity,
                        //     child: Transform.scale(
                        //       origin: Offset(0, 0),
                        //       scale: _scale,
                        //       child: Image.network(
                        //           "${dio.options.baseUrl}/image/${snapshot.data?.file_path}",
                        //           loadingBuilder: (BuildContext context, child,
                        //               loadingProgress) {
                        //         if (loadingProgress == null) {
                        //           return child;
                        //         }
                        //         return Center(
                        //           child: CircularProgressIndicator(
                        //             value: loadingProgress.expectedTotalBytes !=
                        //                     null
                        //                 ? loadingProgress
                        //                         .cumulativeBytesLoaded /
                        //                     loadingProgress.expectedTotalBytes!
                        //                 : null,
                        //           ),
                        //         );
                        //       }),
                        //     ),
                        //   ),
                        // );
                        return Image.network(
                            "${dio.options.baseUrl}/image/${snapshot.data?.file_path}",
                            loadingBuilder:
                                (BuildContext context, child, loadingProgress) {
                          if (loadingProgress == null) {
                            return ClipRect(
                              child: SizedBox(
                                width: double.infinity,
                                height: double.infinity,
                                child: Transform.scale(
                                    origin: Offset(166, 0),
                                    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: _scale > 0.2
                              ? () {
                                  setState(() {
                                    _scale -= 1;
                                  });
                                }
                              : null,
                          icon: const Icon(Icons.remove_circle_outline)),
                      IconButton(
                          onPressed: _scale < 10
                              ? () {
                                  setState(() {
                                    _scale += 1;
                                  });
                                }
                              : null,
                          icon: const Icon(Icons.add_circle_outline)),
                      IconButton(
                          onPressed: () {
                            setState(() {
                              // _scale += 0.1;
                              ox += 100 / 2;
                            });
                          },
                          icon: const Icon(Icons.chevron_left)),
                    ],
                  ),
                ),
              )),
        ],
      ),
    );
  }
}