【Flutter】 タブで画面を切り替える方法

image

Fultterでタブで画面を切り替える方法を紹介します。
画面をタブで整理するなら、DefaultTabControllerTabBarTabBarViewを使うのが最適です。
また、記事の後半でTabControllerを使うパターンも紹介しています。

tabDemo

Version

  • Flutter 2.8.1
  • Dart 2.15.1

使い方3ステップ

①DefaultTabControllerを設定

まずはDefaultTabControllerでタブを表示するページを囲みます。
そしてlengthプロパティにタブの数を設定します。これは必須です。

home: DefaultTabController(
length: 3,
child: Scaffold( appBar: AppBar( title: const Text('タブ画面移動サンプル'), ), ),
),

②TabBarを設定

次にTabBarを使って、ユーザーが画面の切り替えに使うタブを設定します。 TabBarTabのリストを取得します。タブにはTextやアイコンなどを設定できます。

home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('タブ画面移動サンプル'),
bottom: const TabBar(
tabs: <Widget>[
Tab(icon: Icon(Icons.cloud_outlined)),
Tab(icon: Icon(Icons.beach_access_sharp)),
Tab(icon: Icon(Icons.brightness_5_sharp)),
],
),
), ), ),

③TabBarViewを設定

最後にTabBarViewを使って、各タブに対応するコンテンツを設定します。
TabBarで設定したタブと1対1で対応させます。
今回はTextを表示させていますがここに別のページを設定することもできます。

home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('タブ画面移動サンプル'),
            bottom: const TabBar(
              tabs: <Widget>[
                Tab(icon: Icon(Icons.cloud_outlined)),
                Tab(icon: Icon(Icons.beach_access_sharp)),
                Tab(icon: Icon(Icons.brightness_5_sharp)),
              ],
            ),
          ),
body: const TabBarView(
children: <Widget>[
Center(child: Text('くもり', style: TextStyle(fontSize: 50))),
Center(child: Text('雨', style: TextStyle(fontSize: 50))),
Center(child: Text('晴れ', style: TextStyle(fontSize: 50))),
],
),
), ),

コード全文

サンプルアプリのソースコードです。まずはこれをコピペして動かしてみてから中身を調べていくとわかりやすいと思います!

import 'package:flutter/material.dart';

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

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

  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('タブ画面移動サンプル'),
            bottom: const TabBar(tabs: <Widget>[
              Tab(icon: Icon(Icons.cloud_outlined)),
              Tab(icon: Icon(Icons.beach_access_sharp)),
              Tab(icon: Icon(Icons.brightness_5_sharp)),
            ]),
          ),
          body: const TabBarView(
            children: <Widget>[
              Center(child: Text('くもり', style: TextStyle(fontSize: 50))),
              Center(child: Text('雨', style: TextStyle(fontSize: 50))),
              Center(child: Text('晴れ', style: TextStyle(fontSize: 50))),
            ],
          ),
        ),
      ),
    );
  }
}

【参考】DefaultTabControllerを使わないパターン

タブはDefaultTabControllerを使わないで実装することも可能です。
その場合DefaultTabControllerの代わりにTabControllerを使います。
以下では、同じサンプルアプリをTabControllerを使って実装してみます。

①TabControllerを設定

Stateの部分を以下のように変更してTabControllerのインスタンス_tabControllerを定義します。

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
late TabController _tabController;
void initState() {
super.initState();
_tabController = TabController(length: 3, vsync: this);
}
Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('タブ画面移動サンプル'), ), ); } }

②TabBarを設定

次にTabBarを使って、ユーザーが画面の切り替えに使うタブを設定します。
ここでやっていることは、このページの前半で説明したDefaultTabControllerを使うパターンの②とほぼ同じです。
controllerプロパティに①で定義した_tabControllerを設定するところだけ違うので注意してください。

return Scaffold(
      appBar: AppBar(
        title: const Text('タブ画面移動サンプル'),
bottom: TabBar(
controller: _tabController,
tabs: const <Widget>[
Tab(icon: Icon(Icons.cloud_outlined)),
Tab(icon: Icon(Icons.beach_access_sharp)),
Tab(icon: Icon(Icons.brightness_5_sharp)),
],
),
), );

③TabBarViewを設定

最後にTabBarViewを使って、各タブに対応するコンテンツを設定します。
やっていることは、このページの前半で説明したDefaultTabControllerを使うパターンの③とほぼ同じです。
ここでもcontrollerプロパティに①で作った_tabControllerを設定します。

return Scaffold(
      appBar: AppBar(
        title: const Text('タブ画面移動サンプル'),
        bottom: TabBar(
          controller: _tabController,
          tabs: const <Widget>[
            Tab(icon: Icon(Icons.cloud_outlined)),
            Tab(icon: Icon(Icons.beach_access_sharp)),
            Tab(icon: Icon(Icons.brightness_5_sharp)),
          ],
        ),
      ),
body: TabBarView(
controller: _tabController,
children: const <Widget>[
Center(child: Text('くもり', style: TextStyle(fontSize: 50))),
Center(child: Text('雨', style: TextStyle(fontSize: 50))),
Center(child: Text('晴れ', style: TextStyle(fontSize: 50))),
],
),
);

コード全文

import 'package:flutter/material.dart';

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

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

  
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late TabController _tabController;

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

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('タブ画面移動サンプル'),
        bottom: TabBar(
          controller: _tabController,
          tabs: const <Widget>[
            Tab(icon: Icon(Icons.cloud_outlined)),
            Tab(icon: Icon(Icons.beach_access_sharp)),
            Tab(icon: Icon(Icons.brightness_5_sharp)),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: const <Widget>[
          Center(child: Text('くもり', style: TextStyle(fontSize: 50))),
          Center(child: Text('雨', style: TextStyle(fontSize: 50))),
          Center(child: Text('晴れ', style: TextStyle(fontSize: 50))),
        ],
      ),
    );
  }
}

さいごに

いかがでしたでしょうか。
タブの利用は奥が深く細かいカスタマイズが可能ですが、本記事では核となる最低限の使い方だけを紹介しました。
参考にしていただけたら幸いです。

参考

https://api.flutter.dev/flutter/material/DefaultTabController-class.html https://api.flutter.dev/flutter/material/TabBar-class.html

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (70)初心者向け (22)イベント (15)Nextjs (8)Google Apps Script (7)可茂IT塾 (6)Firebase (6)React (5)新卒 (3)就活 (3)給与支払報告書 (3)riverpod (3)Dart (3)JavaScript (3)TypeScript (3)インターン (3)FlutterWeb (2)画像 (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)ワーケーション (2)社会人 (2)大学生 (2)お知らせ (2)webfeed (1)RSS (1)CodeRunner (1)VSCode (1)個人開発 (1)設計 (1)フルリモート (1)学生向け (1)Java (1)Spring Boot (1)エンジニア (1)DeviceOrientation (1)正規表現 (1)神楽 (1)趣味紹介 (1)プログラミングだけではない可茂IT塾のメンバー (1)線型計画法 (1)事例 (1)PreferredSize (1)マテリアルデザイン (1)Material (1)クパチーノデザイン (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)シェアハウス (1)スクレイピング (1)Gmail (1)Googleグループ (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)Vercel (1)Google Domains (1)branch (1)Git (1)オンラインオフィス (1)Freezed (1)アイコン (1)Apple Store Connect (1)FlutterGen (1)検索機能 (1)Navigator (1)メール送信 (1)カスタム認証 (1)アニメーション (1)FloatingActionButton (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)Dialog (1)Figma (1)デザイン (1)Slack (1)BI (1)非同期処理 (1)BackdropFilter (1)iOS (1)レビュー (1)getAuth (1)匿名 (1)Algolia (1)chakra-ui (1)コンサルティング (1)Symbol (1)reactive_forms (1)

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More