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

image

Fultterでタブで画面を切り替える方法を紹介します。
画面をタブで整理するなら、DefaultTabController、TabBar、TabBarViewを使うのが最適です。

tabDemo

Version

・Flutter 2.2.0
・Dart 2.13.0

使い方3ステップ

①DefaultTabControllerを設定

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

return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: MyHomePage(),
      ),
    );

②TabBarを設定

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

return Scaffold(
      appBar: AppBar(
        title: Text('タブ画面移動サンプル'),
        bottom: 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を表示させていますがここに別のページを設定することもできます。

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(MyApp());
}

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('タブ画面移動サンプル'),
        bottom: TabBar(
          tabs: <Widget>[
            Tab(icon: Icon(Icons.cloud_outlined)),
            Tab(icon: Icon(Icons.beach_access_sharp)),
            Tab(icon: Icon(Icons.brightness_5_sharp)),
          ],
        ),
      ),
      body: TabBarView(
        children: <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