FlutterのTabBarウィジェットは、複数のページやコンテンツを含むアプリケーションのナビゲーションに使用される標準的なUIパターンです。このウィジェットを使用すると、ユーザーはタブをタップして異なるページやコンテンツに切り替えることができます。この記事では、FlutterのTabBarについて、基本的な使い方を中心に解説します。
TabBarの基本的な使い方
まず、TabBarを使うためには、TabBarウィジェットとTabBarViewウィジェットを組み合わせて使用する必要があります。TabBarはタブバー自体を描画し、TabBarViewはタブに関連するページを描画します。
例えば、3つの異なるページを含むアプリケーションを作成する場合、次のようにTabBarとTabBarViewを作成することができます。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My App',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
late TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: 3);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TabBar Example'),
bottom: TabBar(
controller: _tabController,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
),
),
body: TabBarView(
controller: _tabController,
children: [
Center(child: Text('Tab 1')),
Center(child: Text('Tab 2')),
Center(child: Text('Tab 3')),
],
),
);
}
}このコードでは、AppBarウィジェットにTabBarを配置し、TabBarViewをScaffoldのbodyプロパティに追加しています。TabControllerを使用して、タブとその関連するページを結びつけています。
タブのカスタマイズ
TabBarウィジェットを使用して、タブをカスタマイズすることもできます。例えば、TabBarのタブの高さ、色、テキストスタイルなどを変更することができます。以下の例では、タブの高さを48に変更し、タブの文字色を白に変更し、アクティブなタブの背景色を青に変更しています。
TabBar(
controller: _tabController,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
labelColor: Colors.white,
unselectedLabelColor: Colors.white.withOpacity(0.5),
indicator: BoxDecoration(
color: Colors.blue,
),
indicatorSize: TabBarIndicatorSize.tab,
indicatorPadding: EdgeInsets.symmetric(horizontal: 16.0),
indicatorColor: Colors.white,
labelPadding: EdgeInsets.symmetric(horizontal: 8.0),
labelStyle: TextStyle(fontSize: 18.0),
)これにより、タブの高さが48ピクセルに変更され、アクティブなタブの背景色が青色に変更され、テキストの色が白色に変更され、タブの文字スタイルが18ポイントのサイズに変更されました。タブの間の余白を調整するために、labelPaddingとtabPaddingを使用して、タブの幅と高さを調整することもできます。
まとめ
FlutterのTabBarは、複数のページやコンテンツを含むアプリケーションのナビゲーションに使用される標準的なUIパターンです。TabBarを使用すると、ユーザーはタブをタップして異なるページやコンテンツに切り替えることができます。基本的な使い方を覚え、必要に応じてタブをカスタマイズすることができるようになると、アプリケーションのナビゲーションを追加するのに役立ちます。