Improving the UX/UI of Image widget

Currently, Back function is applied when the image touching. This can be operated by accident when zooming in the user's image.
So explicitly place the close button in the upper right corner
pull/470/head
Develeste 4 years ago committed by GitHub
parent b72a701e65
commit 8574521899
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 47
      lib/src/widgets/image.dart

@ -17,13 +17,52 @@ class ImageTapWrapper extends StatelessWidget {
constraints: BoxConstraints.expand(
height: MediaQuery.of(context).size.height,
),
child: GestureDetector(
onTapDown: (_) {
child: Stack(
children: [
PhotoView(
imageProvider: imageProvider,
loadingBuilder: (context, event) {
return Container(
color: Colors.black,
child: Center(
child: CircularProgressIndicator(),
),
);
},
),
Positioned(
right: 10.0,
top: MediaQuery.of(context).padding.top + 10.0,
child: InkWell(
onTap: () {
Navigator.pop(context);
},
child: PhotoView(
imageProvider: imageProvider,
child: Stack(
children: [
Opacity(
opacity: 0.2,
child: Container(
height: 30.0,
width: 30.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.black87,
),
),
),
Positioned(
top: 0,
bottom: 0,
left: 0,
right: 0,
child: Icon(Icons.close,
color: Colors.grey[400], size: 28.0),
)
],
),
),
),
],
),
),
);

Loading…
Cancel
Save