LoginSignup
11

More than 3 years have passed since last update.

FlutterでFacebookっぽい下タブをタブを作る

Last updated at Posted at 2019-08-04

Facebookアプリケーションがリニューアルをしたようで下タブの挙動が少し変わっています。

(詳しくはお手元のFacebookアプリをご確認ください)

こんな挙動をFlutterで実現してみました。

作ったのがこちら

output.gif

実装

コピペで動くようにしています。


import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  TabController _tabController;

  final List<Tab> tabs = <Tab>[
    Tab(
      icon: Icon(Icons.home),
    ),
    Tab(
      icon: Icon(Icons.my_location),
    ),
    Tab(
      icon: Icon(Icons.pages),
    ),
    Tab(
      icon: Icon(Icons.person),
    ),
    Tab(
      icon: Icon(Icons.exit_to_app),
    ),
    Tab(
      icon: Icon(Icons.card_membership),
    ),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
        ),
        bottomNavigationBar: SafeArea(
          child: TabBar(
            tabs: tabs,
            controller: _tabController,
            indicator: UnderlineTabIndicator(
              borderSide: BorderSide(color: Colors.blue, width: 5),
              insets: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 40),
            ),
            unselectedLabelColor: Colors.grey,
            indicatorColor: Colors.blue,
            indicatorSize: TabBarIndicatorSize.tab,
            indicatorWeight: 2,
            indicatorPadding:
                EdgeInsets.symmetric(horizontal: 18.0, vertical: 8),
            labelColor: Colors.black,
          ),
        ),
        body: TabBarView(
          physics: NeverScrollableScrollPhysics(),
          controller: _tabController,
          children: tabs.map((tab) {
            return _createTab(tab);
          }).toList(),
        ));
  }

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


以上です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11