こんにちは！本記事では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に関する記事まとめはこちらをご覧ください。
他にもこんなTabBarのデザインもあります。
参考記事
コメント