利用FloatingActionButton實現底部凸起的導航欄

利用FloatingActionButton實現底部凸起的導航欄

FloatingActionButton就是如圖樣式的組件,簡稱FAB

接下來我們要利用FloatingActionButton來實現一個如圖樣式的底部凸起的導航欄


如圖可以看出，實際上就是將FloatingActionButton放在了我們導航欄中間的比特置
准備的五個頁面

CategoryPage.dart

// ignore_for_file: prefer_const_constructors_in_immutables, avoid_unnecessary_containers, prefer_const_constructors, prefer_const_literals_to_create_immutables

import 'package:flutter/material.dart';

class CategoryPage extends StatefulWidget {
    
  CategoryPage({
    Key? key}) : super(key: key);

  @override
  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
    
  @override
  Widget build(BuildContext context) {
    
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Row(
            children: [
              Expanded(child: TabBar(
                isScrollable: true,
              tabs: [         
              Tab(text: "熱門"),
              Tab(text: "切換")
              ],
              )
            )
            ],
            ),
          // bottom: TabBar(
          // tabs: [
          // Tab(text: "熱門"),
          // Tab(text: "切換")
          // ],
          // ),
        ),
        body: TabBarView(
          children: [
            ListView(
              children: [
                ListTile(
                  title: Text("第一個Tab"),
                ),
                ListTile(
                  title: Text("第一個Tab"),
                )
              ],
            ),
            ListView(
              children: [
                ListTile(
                  title: Text("第二個Tab"),
                ),
                ListTile(
                  title: Text("第二個Tab"),
                )
              ],
            )
          ],
          
          ),
      ),
    );
  }
}

EmailPage.dart

// ignore_for_file: avoid_unnecessary_containers, prefer_const_constructors, prefer_const_constructors_in_immutables

import 'package:flutter/material.dart';

class EmailPage extends StatefulWidget {
    
  EmailPage({
    Key? key}) : super(key: key);

  @override
  _EmailPageState createState() => _EmailPageState();
}

class _EmailPageState extends State<EmailPage> {
    
  @override
  Widget build(BuildContext context) {
    
    return Container(
      child: Text("這是郵件頁面"),
    );
  }
}

HomePage.dart

// ignore_for_file: prefer_const_constructors_in_immutables, prefer_const_constructors

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
    
  HomePage({
    Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
    
  @override
  Widget build(BuildContext context) {
    
    return Column(
      children: [
        ElevatedButton(
      onPressed: (){
    
        Navigator.pushNamed(context, '/appbar');
      }, 
      child: Text("點擊轉跳"),
      ),
      ElevatedButton(
      onPressed: (){
    
        Navigator.pushNamed(context, '/tabBarController');
      }, 
      child: Text("點擊轉跳TabBarController"),
      ),
      ElevatedButton(
      onPressed: (){
    
        Navigator.pushNamed(context, '/tabBarController');
      }, 
      child: Text("點擊轉跳TabBarController"),
      )
      ],
    );
  }
}

SettingPage.dart

// ignore_for_file: prefer_const_literals_to_create_immutables

import 'package:flutter/material.dart';

class SettingPage extends StatefulWidget {
    
  SettingPage({
    Key? key}) : super(key: key);

  @override
  _SettingPageState createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
    
  @override
  Widget build(BuildContext context) {
    
    return ListView(
      children: [
        ListTile(
          title: Text("我是設置頁面"),
        )
      ],
    );
  }
}

AddPage.dart（這個頁面對應的導航按鈕會被FloatingActionButton遮住），給FloatingActionButton設置點擊事件改變頁面也可以達到頁面切換的效果

// ignore_for_file: avoid_unnecessary_containers, prefer_const_constructors

import 'package:flutter/material.dart';

class AddPage extends StatelessWidget {
    
  const AddPage({
    Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    return Container(
      child: Text("這是添加頁面"),
    );
  }
}

Tabs.dart

// ignore_for_file: prefer_final_fields, deprecated_member_use, prefer_const_literals_to_create_immutables, prefer_const_constructors

import 'package:flutter/material.dart';
import 'package:flutterapp/pages/User.dart';
import 'package:flutterapp/pages/tabs/add.dart';
import 'tabs/Category.dart';
import 'tabs/Email.dart';
import 'tabs/Home.dart';
import 'tabs/Setting.dart';
import '../pages/User.dart';

class Tabs extends StatefulWidget {
    
  const Tabs({
    Key? key}) : super(key: key);

  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
    
  int currentIndex = 0;
  List _pageList = [
    HomePage(),
    CategoryPage(),
    AddPage(),
    SettingPage(),
    EmailPage()
  ];
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo'),
      ),
      floatingActionButton: Container(
        height: 70,
        width: 70,
        padding: EdgeInsets.all(10),
        margin: EdgeInsets.only(top: 30),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(35),
            color: Color.fromARGB(255, 250, 250, 250)),
        child: FloatingActionButton(
          onPressed: () {
    
            setState(() {
    
              currentIndex = 2;
            });
          },
          child: Icon(Icons.add),
          backgroundColor: currentIndex==2?Colors.yellow:Colors.blue,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      drawer: Drawer(
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                    child: UserAccountsDrawerHeader(
                  accountEmail: Text("[email protected]"),
                  accountName: Text("sky"),
                  currentAccountPicture: CircleAvatar(
                      backgroundImage: NetworkImage(
                          "https://cdn.stocksnap.io/img-thumbs/960w/goose-flock_7EARMYLNXB.jpg")),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                        image: NetworkImage(
                            "https://cdn.stocksnap.io/img-thumbs/960w/ice-nature_PHKM6CXBLQ.jpg"),
                        fit: BoxFit.cover),
                  ),
                  otherAccountsPictures: [
                    Image.network(
                        "https://cdn.stocksnap.io/img-thumbs/960w/flower-bloom_NZWKWLNPYX.jpg"),
                    Image.network(
                        "https://cdn.stocksnap.io/img-thumbs/960w/flower-bloom_KAKMFZ02RH.jpg"),
                  ],
                ))
              ],
            ),
            ListTile(
              leading: CircleAvatar(child: Icon(Icons.home)),
              title: Text("我的空間"),
            ),
            //設置分割線
            Divider(),
            ListTile(
              leading: CircleAvatar(child: Icon(Icons.people)),
              title: Text("用戶中心"),
              onTap: () {
    
                Navigator.of(context).pop();
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (BuildContext context) {
    
                  return UserPage();
                }));
              },
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(child: Icon(Icons.settings)),
              title: Text("設置中心"),
            )
          ],
        ),
      ),
      endDrawer: Drawer(
        child: Text("右側邊欄"),
      ),
      body: _pageList[currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        onTap: (int index) {
    
          setState(() {
    
            currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "首頁",
          ),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "分類"),
          BottomNavigationBarItem(icon: Icon(Icons.add), label: "添加"),
          BottomNavigationBarItem(icon: Icon(Icons.mail), label: "郵件"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "設置"),
        ],
      ),
    );
  }
}

把相關代碼再擺出來方便查看

/*按鈕擺放的比特置和APPBar同級,因為不能設置floatingActionButton大小， 因此在外面嵌套一個Container來設置大小，我們也可以通過margin: EdgeInsets.only(top: 30), 改變來只遮住圖案不遮住文字（我們這裏把文字圖案都遮住了）*/
 floatingActionButton: Container(
        height: 70,
        width: 70,
        padding: EdgeInsets.all(10),
        margin: EdgeInsets.only(top: 30),
        //把Container設置為圓形
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(35),
            color: Color.fromARGB(255, 250, 250, 250)),
        child: FloatingActionButton(
          onPressed: () {
    
            setState(() {
    
              currentIndex = 2;
            });
          },
          child: Icon(Icons.add),
          //點擊時改變按鈕顏色
          backgroundColor: currentIndex==2?Colors.yellow:Colors.blue,
        ),
      ),
      //設置floatingActionButton比特置在底部中間
      floatingActionButtonLocation:  FloatingActionButtonLocation.centerDocked,