「Flutter/画像/画像viewer」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→一覧から次前へ移動できるviewerへ) |
(→画像アニメーション(hero)) |
||
(同じ利用者による、間の1版が非表示) | |||
行138: | 行138: | ||
==画像アニメーション(hero)== | ==画像アニメーション(hero)== | ||
− | + | heroを使うには、遷移先、遷移元のimageを以下のようにする。tagの文字列を一致させる。 | |
+ | |||
photoViewでは | photoViewでは | ||
<pre> | <pre> |
2020年1月24日 (金) 23:51時点における最新版
目次
インストール
pubspec.yaml
dependencies: photo_view: ^0.9.1
公式
https://pub.dev/packages/photo_view
サンプル
ローカル画像
import 'package:photo_view/photo_view.dart'; PhotoView photoView = PhotoView( imageProvider: AssetImage("assets/image1.jpg"), minScale: PhotoViewComputedScale.contained * 1.0, maxScale: 2.0, );
ネット画像
import 'package:photo_view/photo_view.dart'; if (imageUrl != null) { PhotoView photoView = PhotoView( imageProvider: NetworkImage(imageUrl), // imageProvider: NetworkImage("http://wiki.nonip.net/skins/Vector/images/share/d.png"), ); }
imageUrlにはnullを一度でも入れると表示されなくなる。asyncを使ってる場合は注意。値渡しはprefを経由するなどではなく、Navigatorからそのまま値を渡したほうが良いかも。
次前へ移動できるviewer
PhotoViewGallery photoViewGallery = PhotoViewGallery.builder( scrollPhysics: const BouncingScrollPhysics(), builder: (BuildContext context, int index) { NetworkImage networkImage = NetworkImage(imgs[index].url); FadeInImage image = FadeInImage.assetNetwork( placeholder: 'assets/loading.gif', image: imgs[index].url, fit: BoxFit.cover, ); return PhotoViewGalleryPageOptions( imageProvider: networkImage, initialScale: PhotoViewComputedScale.contained, minScale: PhotoViewComputedScale.contained * 0.7, maxScale: PhotoViewComputedScale.covered * 2, ); }, itemCount: imgs.length, backgroundDecoration: BoxDecoration( color: Theme.of(context).canvasColor, ), loadingChild: Center( child: CircularProgressIndicator(), ), );
参考:https://resocoder.com/2019/05/04/flutter-photo-view-gallery-resize-rotate-image-carousel/
参考:https://www.cnblogs.com/gggggggxin/p/11195401.html
一覧から次前へ移動できるviewerへ
class ImageViewerPage extends StatefulWidget { final String title; final int initialIndex; PageController pageController; List<Img> imgs = []; ImageViewerPage({Key key, this.title, this.imgs, this.initialIndex}) : super(key: key) { pageController = PageController(initialPage: initialIndex); } @override _ImageViewerPageState createState() => _ImageViewerPageState(); } class _ImageViewerPageState extends State<ImageViewerPage> { int currentIndex; bool initFlag = true; @override void initState() { super.initState(); setState(() { currentIndex = widget.initialIndex; }); } void onPageChanged(int index) { setState(() { currentIndex = index; }); } @override Widget build(BuildContext context) { PhotoViewGallery photoViewGallery = PhotoViewGallery.builder( scrollPhysics: const BouncingScrollPhysics(), builder: (BuildContext context, int index) { NetworkImage networkImage = NetworkImage(widget.imgs[index].url); return PhotoViewGalleryPageOptions( imageProvider: networkImage, initialScale: PhotoViewComputedScale.contained, minScale: PhotoViewComputedScale.contained * 0.7, maxScale: PhotoViewComputedScale.covered * 2, heroAttributes: PhotoViewHeroAttributes(tag: widget.imgs[index].url), ); }, itemCount: widget.imgs.length, onPageChanged: onPageChanged, pageController: widget.pageController, backgroundDecoration: BoxDecoration( color: Theme.of(context).canvasColor, ), loadingChild: Center( child: CircularProgressIndicator(), ), ); return Scaffold( appBar: AppBar( backgroundColor: Colors.blue.withOpacity(0.3), elevation: 0.0, title: Text("画像", style: TextStyle( fontSize: 16, locale: Locale("ja", "JP") ) ), ), extendBodyBehindAppBar: true, body: photoViewGallery ); } }
imgsにはnullを一度でも入れると初回の一枚目が開いてしまう。asyncを使って取得するのではなく、Navigatorからそのまま値を渡したほうが良い。
画像アニメーション(hero)
heroを使うには、遷移先、遷移元のimageを以下のようにする。tagの文字列を一致させる。
photoViewでは
PhotoViewGalleryPageOptions( heroAttributes: PhotoViewHeroAttributes(tag: url), )
遷移先、遷移元
Hero( tag: url, child: Image.network(url) ),