facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(サンプル)
(サンプル)
行10: 行10:
  
 
==サンプル==
 
==サンプル==
ローカル画像
+
===ローカル画像===
 
<pre>
 
<pre>
 
import 'package:photo_view/photo_view.dart';
 
import 'package:photo_view/photo_view.dart';
行20: 行20:
 
</pre>
 
</pre>
  
ネット画像
+
===ネット画像===
 
<pre>
 
<pre>
 
import 'package:photo_view/photo_view.dart';
 
import 'package:photo_view/photo_view.dart';
行32: 行32:
  
 
imageUrlにはnullを一度でも入れると表示されなくなる。asyncを使ってる場合は注意。値渡しはprefを経由するなどではなく、Navigatorからそのまま値を渡したほうが良いかも。
 
imageUrlにはnullを一度でも入れると表示されなくなる。asyncを使ってる場合は注意。値渡しはprefを経由するなどではなく、Navigatorからそのまま値を渡したほうが良いかも。
 +
 +
===次前へ移動できるviewer===
 +
<pre>
 +
    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(),
 +
          ),
 +
        );
 +
</pre>
 +
参考:https://resocoder.com/2019/05/04/flutter-photo-view-gallery-resize-rotate-image-carousel/

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/