【Flutter】簡単にアイコン付き＆文字とアイコン付きヘッダータブ作成(TabBar)からスクロールしてタブ切り替え(TabBarView)を実装する方法

2024年2月14日2024年4月2日

【Flutter】簡単にアイコン付き＆文字だけヘッダータブの作成(TabBar)からスクロールしてタブ切り替え(TabBarView)を実装する方法

いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです

この記事を読んでわかること

文字だけのヘッダータブ作成方法
文字とアイコン付きヘッダータブ作成方法
TabBarViewを使ったタブのスクロールによる切り替え方法

開発環境

Dart 3.0.0
Flutter 3.10.0

文字だけのヘッダータブ作成

文字だけのヘッダータブを作成する場合、TabBarウィジェットを使用します。Tabウィジェット内にテキストを配置することでタブ内に文字列を表示させることができるのです。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
                Tab(text: 'Tab 3'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

解説

DefaultTabController: タブの数とタブの内容を管理します。
Scaffold: アプリケーションの基本的なビジュアルレイアウト構造を提供します。
AppBar: アプリケーションバーを表示し、そのbottomプロパティにTabBarを配置します。
TabBar: 文字だけのタブを作成し、それぞれのタブにはTabウィジェットを使用してラベルを設定します。
TabBarView: 各タブの内容を表示するウィジェットで、ここではシンプルなアイコンを使用していますが、実際には任意のウィジェットを配置できます。

動作確認

いちの

実際の画面を確認してみましょ〜

【Flutter】簡単に文字列だけのヘッダータブ(TabBar)を作成しスクロールしてタブ切り替え(TabBarView)をする

文字とアイコン付きヘッダータブ作成

アイコン付きヘッダータブを作成するには、TabBarウィジェットを使用します。また、Tabウィジェット内にアイコンと文字列を設定することで、文字とアイコン付きのヘッダータブを作成することができるのです。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car), text: 'Car'),
                Tab(icon: Icon(Icons.directions_transit), text: 'Transit'),
                Tab(icon: Icon(Icons.directions_bike), text: 'Bike'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}