Flutter

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

flutter-zoom-preview

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

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

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

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

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

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

これだけで上記のキャプチャのような機能を実装することができます (キャプチャの写真は以前作ったビーフシチューの写真です笑) これの便利なところは、画像だけでなく、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,
))
flutter-zoom-preview1

ライブラリーを使おうかと思ったのですが、今回は純粋な画像以外も拡大/縮小できる必要があり、いわゆるフォトプレビューみたいなものは使えなかったので、時間をかけずに、標準のものでこんな簡単に作れて、よかったです!

Swiftの方が書きやすいなというときもありますが、今回のような実装やhot reloadなど、Flutterの方が実装しやすいという場面も多く、どんどんFlutterの開発の魅力に取り憑かれています笑

 

+1

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA