Posted at

[Flutter] TabBarとTabBarViewを勉強しよう。

こんにちは。Dreamwalkerです。

今回はTabBarとTabBarと一緒に使うTabBarViewについて、かいてみたいと

おもいます~


まず、TabControllerから

TabBarやTabBarViewにはTabControllerというクラスが必要です。


main.dart


TabController _tabController;


tabControllerはTabBarのインデックスを管理します。で、TabBarで押したメニューを

TabBarViewでWidgetを変わったりします。


後、TickerProviderが必要です。


main.dart

class _MainPageState extends State<MainPage>

with SingleTickerProviderStateMixin {

SingleTickerProviderStateMixin やTickerProviderStateMixin を追加します。


Controller init

StatefulWidgetを使うので、initStateに


main.dart

_tabController = TabController(length: tabs.length, vsync: this);



main.dart

 @override

void initState() {
// TODO: implement initState
super.initState();
_tabController = TabController(length: tabs.length, vsync: this);
}



Tab Widgetを作ろう

TabBarに使うTab Widgetを追加します。

こんな感じです。


main.dart


final List<Tab> tabs = <Tab>[
Tab(
text: 'One',
),
Tab(
text: "Two",
),
Tab(
text: "Three",
),
Tab(
text: "Four",
)
];



TabBarを画面に。

TabBarはAppBarのBottomでよくつかいます。

他のWidgetに追加して、使っても問題ないし、問題なかったです。

Widget位置は気楽に。


main.dart

appBar: AppBar(

backgroundColor: Colors.white,
title: Text("TabBar & TabView Study", style: TextStyle(
color: Colors.black,
),),
bottom: TabBar(
// isScrollable: true,
tabs: tabs,
controller: _tabController,
unselectedLabelColor: Colors.grey,
indicatorColor: Colors.blue,
indicatorSize: TabBarIndicatorSize.tab,
indicatorWeight: 2,
indicatorPadding: EdgeInsets.symmetric(horizontal: 18.0,
vertical: 8),
indicator: CustomTabIndicator(),
labelColor: Colors.black,
),
),


Indicatorなど、カスタマイズする。

基本のDefaultで使ってもおしゃれです。でも、プロジェクトによって

デザインは変わるので、カスタマイズ際は indicatorをカスタマイズしましょう。


main.dart

indicator: CustomTabIndicator(),



TabBarViewを使おう

TabBarViewのWidgetはTabBarのWidget数と同じく

Children Widgetが必要です。これを注意しましょう。


main.dart


body: TabBarView(
controller: _tabController,
children: tabs.map((tab) {
return _createTab(tab);
}).toList(),)


Code


main.dart

import 'package:flutter/material.dart';

class TabBarTestApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MainPage(),
);
}
}

class MainPage extends StatefulWidget {
@override
_MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage>
with SingleTickerProviderStateMixin {
final List<Tab> tabs = <Tab>[
Tab(
text: 'One',
),
Tab(
text: "Two",
),
Tab(
text: "Three",
),
Tab(
text: "Four",
)
];
TabController _tabController;

@override
void initState() {
// TODO: implement initState
super.initState();
_tabController = TabController(length: tabs.length, vsync: this);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title: Text("TabBar & TabView Study", style: TextStyle(
color: Colors.black,
),),
bottom: TabBar(
// isScrollable: true,
tabs: tabs,
controller: _tabController,
unselectedLabelColor: Colors.grey,
indicatorColor: Colors.blue,
indicatorSize: TabBarIndicatorSize.tab,
indicatorWeight: 2,
indicatorPadding: EdgeInsets.symmetric(horizontal: 18.0,
vertical: 8),
indicator: CustomTabIndicator(),
labelColor: Colors.black,
),
),
//Todo
body: TabBarView(
controller: _tabController,
children: tabs.map((tab) {
return _createTab(tab);
}).toList(),)
);
}

Widget _createTab(Tab tab){
return Center(
child: Text("10 min Rest Time" , style: TextStyle(
fontSize: 24.0
),),
);
}
}


Screenshot_1554024796.png


動画もあります。

最近Flutterライブコーティングし始めました。

今回のTabBarとTabBarViewについでの動画はこちら

https://www.youtube.com/watch?v=W6i8PVCOQgM