Flutterで写真のプレビューを作る

Contents

Flutterで写真のプレビューを作る
- ピンチイン・ピンチアウトをするような時は、InteractiveViewerを使う

Flutterで写真のプレビューを作る

最近Flutter開発を本格的に始め、Flutterの開発のしやすさに驚くことも驚くことも多いです。
そんな中で写真の拡大/縮小できるプレビューを作ろうとした時に、どうやって作ろうかなと思って、色々調べたら、想定よりもかなり簡単に、そして外部のパッケージを使用せずに作成できたので、備忘録として残そうと思います。

ピンチイン・ピンチアウトをするような時は、InteractiveViewerを使う

FlutterでWidgetを拡大/縮小させたい時に使えるのが、InteractiveViewerです。

api.flutter.dev

Link

InteractiveViewer class – widgets library – Dart API

https://api.flutter.dev/flutter/widgets/InteractiveViewer-class.html

API docs for the InteractiveViewer class from the widgets library, for the Dart programming language.

これを使うと、簡単に拡大/縮小ができる写真のプレビューを作成できます。コードは以下の通りです。

InteractiveViewer(
  minScale: 0.1,
  maxScale: 5,
  child: Container(
    child: Image.asset('images/sample.JPG'),
    color: Colors.black,
  ),
)

これだけで上記のキャプチャのような機能を実装することができます (キャプチャの写真は以前作ったビーフシチューの写真です笑) これの便利なところは、画像だけでなく、Widget自体の拡大/縮小ができるので、上記の画像の上に別のレイヤー、例えばタイトルや日付などを重ねた状態でも拡大/縮小することが可能です。

InteractiveViewer(
  minScale: 0.1,
  maxScale: 5,
  child: Container(
    child: Center(
      child: Stack(
        alignment: Alignment.center,
        children: [
          Image.asset('images/sample.JPG'),
          Text(
            '美味しいビーフシチュー',
            style: TextStyle(
              color: Colors.white,
              fontSize: 28,
              fontWeight: FontWeight.bold),
            ),
        ],
      ),
    ),
    color: Colors.black,
))