【Flutter】TabBar()を下(bottomNavigationBar)に配置する方法

こんにちは!本記事ではTabBarでページ遷移する方法について、サンプルコードと一緒に説明していきます。

目次

作りたいもの

左の動画のように、下にTabBarを設置し、それぞれのTabBarを押すと該当するページやウィジェットが開かれるようになります。

サンプルコード

まず、サンプルコードを載せます。このコードをそのままmain.dartにコピペすれば動画通りのものが作れます。TabBarを使用するにあたって必要な構文などは次の章でそれぞれ説明していきます。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: Main(),
    );
  }
}

class Main extends StatefulWidget {
  @override
  _MainState createState() => _MainState();
}
class _MainState extends State<Main> with SingleTickerProviderStateMixin {
  final List<Tab> tabs = <Tab>[
    Tab(text: 'Home'),
    Tab(text: 'History'),
    Tab(text: 'World'),

  ];
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: tabs.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.purple.shade100,
        title: Text("TabBar"),
      ),
      bottomNavigationBar: TabBar(
        tabs: tabs,
        controller: _tabController,
        unselectedLabelColor: Colors.grey,
        indicatorColor: Colors.purple,
         indicatorWeight: 3,
         indicatorPadding: EdgeInsets.symmetric(horizontal: 18.0,
             vertical: 8),
        labelColor: Colors.black,
      ),
        body: TabBarView(
          controller: _tabController,
          children:[
            Text("Home"),
            Text("History"),
            Text("World")
          ]
        )
    );
  }
}

TabBarを作る手順

それでは、TabBarを表示させるために必要な手順を説明していきます。

class に with SingleTickerProviderStateMixinを追加する

TabBarを設定するメインページで、下記のようにwith以下を記入します。

class _MainState extends State<Main> with SingleTickerProviderStateMixin {
}

SingleTickerProviderStateMixinとは、Animation Controllerを1つ使っている時に使います。TabControllerはAnimation Controllerに含まれるので、この宣言が必要です。

Tab()のリストを作成する

下のタブバー部分に表示するタブをリストにして宣言します。

  final List<Tab> tabs = <Tab>[
    Tab(text: 'Home'),
    Tab(text: 'History'),
    Tab(text: 'World'),

  ];

TabControllerを宣言する

late TabController _tabController;

initState()内で、tabControllerを作成する。

initState()は、オブジェクトが開始される時に呼び出されます。ここで以下のように記述してTabcontrollerを表示させます。

 @override
  void initState() {
    super.initState();
    _tabController = TabController(length: tabs.length, vsync: this);
  }

AnimationController, TickerProviderを使用する場合は、vsyncが必要です。

このページにその理由がかなり丁寧に書かれています。参考にしてみてください。

Scaffold()内のbottomNavigationBarでTabBarを宣言する

実際にTabBarを宣言します。

tabsで先ほど宣言したTab()リストのtabsを、controllerも宣言したものを表記します。

残りはデザインの話です。

bottomNavigationBar: TabBar(
        tabs: tabs,
        controller: _tabController,
        unselectedLabelColor: Colors.grey,
        indicatorColor: Colors.purple,
         indicatorWeight: 3,
         indicatorPadding: EdgeInsets.symmetric(horizontal: 18.0,
             vertical: 8),
        labelColor: Colors.black,
      ),

Scaffold()内bodyでは、TabBarViewを宣言する

TabBarView()の中に表示するウィジェットのリストを組み込むことで、Tabに合わせてページを遷移することができます。クラスを宣言したければ、Text()の部分を該当するClass()に置き換えればOKです。

        body: TabBarView(
          controller: _tabController,
          children:[
            Text("Home"),
            Text("History"),
            Text("World")
          ]
        )

まとめ・関連記事

下部にTabBarを表示する方法について説明しました。

Flutterに関する記事まとめはこちらをご覧ください。

あわせて読みたい
【Flutter】記事まとめ こんにちは!本記事ではFlutterに関する記事を体形立ててまとめています。目次としてお使いください。 【全体図】 全ての記事を図でまとめています。(2022年2月22日現在...

他にもこんなTabBarのデザインもあります。

あわせて読みたい
【Flutter】bottom_Navy_barを用いたタブバー作成と、それに合わせたページ遷移を実装してみました。 ・Flutterでタブバーの作り方わからない。。・タブバーは表示されたんだけど対応ページをどうやって表示させるんだろう。。・タブバーのおすすめのパッケージと使い方を...

参考記事

Qiita
[Flutter] TabBarとTabBarViewを勉強しよう。 - Qiita こんにちは。Dreamwalkerです。 今回はTabBarとTabBarと一緒に使うTabBarViewについて、かいてみたいと おもいます~ まず、TabControllerから TabBarやTabBarViewにはT...
よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる