use extended_image

This commit is contained in:
quantulr
2023-02-13 00:36:25 +08:00
parent 9261d482cf
commit cdd930d523
5 changed files with 89 additions and 116 deletions

View File

@ -1,4 +1,5 @@
import 'package:dio/dio.dart';
import 'package:extended_image/extended_image.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
@ -32,10 +33,6 @@ class _ImageDetailState extends ConsumerState<ImageDetail> {
// 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"] ?? "";
@ -48,95 +45,27 @@ class _ImageDetailState extends ConsumerState<ImageDetail> {
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();
}),
),
),
),
child: FutureBuilder(
future: loadImage(id),
builder: (context, snapshot) {
if (snapshot.hasData) {
return ClipRect(
child: SizedBox(
width: double.infinity,
height: double.infinity,
child: ExtendedImage.network(
"${dio.options.baseUrl}/image/${snapshot.data?.file_path}",
mode: ExtendedImageMode.gesture,
// scale: 3,
),
));
} else if (snapshot.hasError) {
return ErrorWidget("13");
}
return const Center(
child: CircularProgressIndicator(),
);
})),
Positioned(
bottom: 10,
child: Card(
@ -156,31 +85,16 @@ class _ImageDetailState extends ConsumerState<ImageDetail> {
},
icon: const Icon(Icons.delete)),
IconButton(
onPressed: _scale > 0.2
? () {
setState(() {
_scale -= 1;
});
}
: null,
onPressed: _scale > 0.2 ? () {} : null,
icon: const Icon(Icons.remove_circle_outline)),
IconButton(
onPressed: _scale < 10
? () {
setState(() {
_scale += 1;
});
}
: null,
onPressed: _scale < 10 ? () {} : null,
icon: const Icon(Icons.add_circle_outline)),
IconButton(
onPressed: () {
setState(() {
// _scale += 0.1;
ox += 100 / 2;
});
setState(() {});
},
icon: const Icon(Icons.chevron_left)),
icon: const Icon(Icons.menu_rounded)),
],
),
),

View File

@ -27,8 +27,8 @@ class MyMaterialRouterConfig {
GoRoute(
path: "/",
name: "相册",
builder: (BuildContext context, GoRouterState state) =>
const Gallery(),
pageBuilder: (BuildContext context, GoRouterState state) =>
const NoTransitionPage(child: Gallery()),
redirect: (BuildContext context, GoRouterState state) {
if (token == null || token.isEmpty) {
return '/login';
@ -45,8 +45,8 @@ class MyMaterialRouterConfig {
GoRoute(
path: "/profile",
name: "个人资料",
builder: (BuildContext context, GoRouterState state) =>
const Profile()),
pageBuilder: (BuildContext context, GoRouterState state) =>
const NoTransitionPage(child: Profile())),
],
),
GoRoute(