Flutterでタブバーウィジェットを追加する方法

FlutterのTabBarとTabBarViewを使って、タブバーウィジェットを追加する方法を紹介します。

まずはTabBarTabBarViewを使う前に,DefaultTabController()でウィジェットツリーをラップしておきます.

DefaultTabController( 
  initialIndex: 1, 
  length:3,
  child:Scaffold(
     
  )
)

initialIndexのところで開始するIndexを変更することができます。

initialIndex: 0, 

アプリ内でタブを表示したい場所にTabBar()を配置します。今の例では、AppBarの下で配置しています。

AppBar(
            
   bottom: TabBar(
      tabs: [
         Tab(text: "Home",),
         Tab(text: "About Us",),
         Tab(text: "Contact Us",)
         ]
        ),
      ),

次に、コンテンツを表示したい場所にTabBarView()を配置します。

TabBarView(
    children: [
        Container( 
            height: 400,
            color: Colors.red,
        ),
        Container( 
            height: 400,
            color: Colors.green,
        ),
        Container( 
          height: 400,
            color: Colors.white,
        )
    ]
)

金曜担当 – Ami



アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833(平日 10:00~17:00)

お問い合わせフォーム