「Flutter/画像/画像viewer」の版間の差分

2020年1月17日 (金) 15:38時点における版

インストール

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/