[Flutter]Flutter Widget of the Week「#64 TweenAnimationBuilder」、「#65 Image」、「#66 DefaultTabController,TabBar,TabBarView」

はじめに

前回はFlutter Widget of the Weekの「#61 ColorFiltered」、「#62 ToggleButtons」、「#63 CupertinoActionSheet」を紹介しました。

今回はその続きで「#64 TweenAnimationBuilder」、「#65 Image」、「#66 DefaultTabController,TabBar,TabBarView」の3つです。

前回の記事はこちら

Flutter Widget of the Week

環境

Flutter 3.0.5

記事にした時点でのバージョンです。GitHubに公開しているのは常に最新の安定版(stable)を使う予定です。

#64 TweenAnimationBuilder

TweenAnimationBuilder

ビルトインされているアニメーションウィジェットではなく、カスタムアニメーションを作りたい場合にこのTweenAnimationBuilderが役に立ちます。

さらに厄介なAnimationContorollerが不要です。

サンプルコード

import 'package:flutter/material.dart';

class SamplePage064 extends StatelessWidget {
  const SamplePage064({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TweenAnimationBuilder'),
        centerTitle: true,
      ),
      body: SafeArea(
        child: Center(
          child: TweenAnimationBuilder<Color?>(
            duration: const Duration(seconds: 3),
            tween: ColorTween(
              begin: Colors.white,
              end: Colors.orange,
            ),
            builder: (context, color, child) {
              return ColorFiltered(
                colorFilter: ColorFilter.mode(
                  color ?? Colors.transparent,
                  BlendMode.modulate,
                ),
                child: child,
              );
            },
            child: const Icon(
              Icons.flutter_dash,
              size: 64,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

結果

動画

公式リファレンス

TweenAnimationBuilder class - widgets library - Dart API

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

#65 Image

Imageとは

その名の通り、画像を表示させるウィジェットです。

アプリ内の画像、ネットワークを利用して画像を取得等に対応しています。

アプリ内の画像の場合はファイルのパスをpubspec.yamlに追加する必要があります。

サンプルコード

import 'package:flutter/material.dart';

class SamplePage065 extends StatelessWidget {
  const SamplePage065({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image'),
        centerTitle: true,
      ),
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset(
                'assets/genba_neko.png',
                height: 128,
              ),
              const SizedBox(height: 20),
              Image.network(
                'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',
                width: 128,
                loadingBuilder: (context, child, progress) {
                  return progress == null
                      ? child
                      : const CircularProgressIndicator();
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

結果

動画

公式リファレンス

Image class - widgets library - Dart API

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

#66 DefaultTabController,TabBar,TabBarView

DefaultTabController,TabBar,TabBarViewとは

この3つのウィジェットを利用することで、タブ切り替えのUIが簡単に実装できてしまいます。

サンプルコード

import 'package:flutter/material.dart';

class SamplePage066 extends StatefulWidget {
  const SamplePage066({
    super.key,
  });

  @override
  State<SamplePage066> createState() => _SamplePage066State();
}

class _SamplePage066State extends State<SamplePage066> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('DefaultTabController & TabBar & TabBarView'),
          centerTitle: true,
          bottom: const TabBar(
            tabs: [
              Tab(text: 'Home'),
              Tab(text: 'Flutter'),
              Tab(text: 'Settings'),
            ],
          ),
        ),
        body: const SafeArea(
          child: TabBarView(
            children: [
              Icon(
                Icons.home,
                size: 128,
              ),
              Icon(
                Icons.flutter_dash,
                size: 128,
              ),
              Icon(
                Icons.settings,
                size: 128,
              ),
            ],
          ),
        ),
      ),
    );
  }
}