Phóng to hình flutter
Demo:
Link code demo:https://github.com/thaiviethai99/flutter_zoom_image
Tạo project flutter
flutter create zoom_photo
Thêm permission ra internet edit file zoom_photo\android\app\src\main\AndroidManifest.xml
Thêm
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.zoom_photo"> <uses-permission android:name="android.permission.INTERNET"/>
Edit file main.dart như sau
Giao diện như sau:
Cài đặt thư viện photo_view link tham khảo https://pub.dev/packages/photo_view
Edit file pubspec.yaml thêm vào:
dependency_overrides: photo_view: git: url: https://github.com/bluefireteam/photo_view ref: master
Import package:
import 'package:photo_view/photo_view.dart';
Thêm vào file main.dart
class HeroPhotoViewRouteWrapper extends StatelessWidget { const HeroPhotoViewRouteWrapper({ Key? key, required this.imageProvider, this.backgroundDecoration, this.minScale, this.maxScale, }) : super(key: key); final ImageProvider imageProvider; final BoxDecoration? backgroundDecoration; final dynamic minScale; final dynamic maxScale; @override Widget build(BuildContext context) { return Container( constraints: BoxConstraints.expand( height: MediaQuery.of(context).size.height, ), child: PhotoView( imageProvider: imageProvider, backgroundDecoration: backgroundDecoration, minScale: minScale, maxScale: maxScale, heroAttributes: const PhotoViewHeroAttributes(tag: "someTag"), ), ); } }
Edit onTap:
onTap: () { Navigator.of(context).push( MaterialPageRoute( builder: (context) => const HeroPhotoViewRouteWrapper( imageProvider: NetworkImage( 'https://gamek.mediacdn.vn/thumb_w/640/133514250583805952/2021/8/20/photo-1-1629447701073264305963.jpg', ), ), ), ); },
File main.dart hoàn chỉnh: