Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
39
Help us understand the problem. What is going on with this article?
@Dreamwalker

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

More than 1 year has passed since last update.

こんにちは。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についでの動画はこちら

39
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
39
Help us understand the problem. What is going on with this article?