【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part13 基本的なウィジェット

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part13 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part12 基本的なウィジェット

引き続き、基本的なウィジェットについて学びます。

基本的なウィジェット

Image,RowImageウィジェット

frameBuilderプロパティ

frameBuilderは画像が表示されるときにフェードイン効果などを付与できるようです。
AnimatedOpacityを使ってフェード効果を実装できます。

ただ表示するだけの場合
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

var ok = false;

class MyApp extends StatefulWidget {
  @override
  State createState() {
    return _State();
  }
}

class _State extends State {
  int count = 0;
  // centerSliceを使ってみました。
  Image motoImg = Image.asset(
    "images/button.png",
  );
  Image useImg = Image.asset("images/button.png",
      height: 100, width: 350, centerSlice: Rect.fromLTRB(15, 15, 35, 35));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('テスト中です。'),
        ),
        // https://api.flutter.dev/flutter/widgets/Image/frameBuilder.html
        // のサンプルを引用させていただきました。
        body: Center(
          child: Image.network(
            'https://flutter.github.io/assets-for-api-docs/assets/widgets/puffin.jpg',
            frameBuilder: (BuildContext context, Widget child, int? frame,
                bool wasSynchronouslyLoaded) {
              if (wasSynchronouslyLoaded) {
                return child;
              }
              // AnimatedOpacityでラッピングしなかった場合
              return child;
            },
          ),
        ),
      ),
    );
  }
}
わかりにくいですが、以下のGIFはAndroidエミュレータ再起動時の動作となります。
AnimatedOpacityの例
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

var ok = false;

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State<MyApp> {
  int count = 0;
  // centerSliceを使ってみました。
  Image motoImg = Image.asset(
    "images/button.png",
  );
  Image useImg = Image.asset("images/button.png",
      height: 100, width: 350, centerSlice: Rect.fromLTRB(15, 15, 35, 35));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('テスト中です。'),
        ),
        // https://api.flutter.dev/flutter/widgets/Image/frameBuilder.html
        // のサンプルを引用させていただきました。
        body: Center(
          child: Image.network(
            'https://flutter.github.io/assets-for-api-docs/assets/widgets/puffin.jpg',
            frameBuilder: (BuildContext context, Widget child, int? frame,
                bool wasSynchronouslyLoaded) {
              if (wasSynchronouslyLoaded) {
                return child;
              }
              // AnimatedOpacityでラッピングした場合
              return AnimatedOpacity(
                child: child,
                opacity: frame == null ? 0 : 1,
                duration: const Duration(seconds: 1),
                curve: Curves.easeOut,
              );
            },
          ),
        ),
      ),
    );
  }
}

フェードイン効果を使用することで柔らかい印象の画像表示となりますね。

最後に

ふわっと表示するとなんだか柔らかな感じがしていいですよね。
今日はここまで!

参考

frameBuilder property – Image class – widgets library – Dart API (flutter.dev)