【Flutter】TabVarViewを使った画面の切り替え

この記事ではTabBarとTabBarViewを使って画面を切り替えるUIの実装方法をご紹介いたします。TabBarにアイコンを表示して、Tabにコンテンツを表示する時に使用するイメージを持って頂ければ良いかと思います。

TabBarView

使用方法

使用方法は以下の図のイメージとなります。

1. 全体をDefaultTabControllerでページを囲む。lengthプロパティにタブの数を設定する。
2. AppBarのbottomプロパティにTabBarを設定
3. bodyプロパティにTabBarViewを設定

アーキテクチャー

ユーザーインターフェース

このように2画面が表示され、それぞれのタブをタップするとスクロールしてそれぞれの画面に遷移しているように見えます。

サンプルコード

@override
Widget build(BuildContext context) {
  return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          flexibleSpace: Container(
            decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.black  ,appbar_green],
                  begin: const FractionalOffset(0.0, 0.0),
                  end:  const FractionalOffset(1.0, 0.0),
                  stops: [0.0, 1.0],
                  tileMode: TileMode.clamp,
                )
            ),
          ),
          title: Text(
            'TabView',
            style: TextStyle(
                fontSize: 55,
                color: Colors.white,
                fontFamily: 'Signatra'
            ),
          ),
          centerTitle: true,
          bottom: TabBar(
            tabs: [
              Tab(
                icon: Icon(Icons.arrow_back_ios,color: Colors.white,),
                text:'左側ページへ',),
              Tab(
                icon: Icon(Icons.arrow_forward_ios,color: Colors.white,),
                text:'右側ページ',),
            ],
            indicatorColor: Colors.white38,
            indicatorWeight: 5,
          ),
        ),
        body: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  colors: [appbar_green,Colors.black],
                  begin: Alignment.topRight,
                  end:  Alignment.bottomLeft
              )
          ),
          child: TabBarView(
            children: [
              Page1(),
              Page2(),
            ],
          ),
        ),
      ));