如何在 Flutter 中使用 FAB 獲得底部導航功能

Question

我有這樣的設計，當我們打開應用程序時，默認情況下它首先進入主屏幕，並且我有兩個底部導航欄項目。

我無法讓它工作，因為我希望它按照底部導航欄的工作方式運行，但我希望默認屏幕成為主頁。 當您單擊購物車或個人資料時，它應該突出顯示該選項卡，但當您單擊主頁時，它應該從中刪除突出顯示。

Answer 1

你可以試試這個persistent_bottom_nav_bar

Answer 2

這是 Flutter 中底部 TabBar 的代碼

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

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

class _TabViewState extends State<TabView> with SingleTickerProviderStateMixin {

  late TabController tabController;
  
  @override
  void initState() {
    super.initState();
    // TODO: CHANGE LENGTH
    tabController = TabController(length: 2, vsync: this);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: Container(
        height: 50,
        child: TabBar(
          unselectedLabelColor: Colors.grey,
          labelColor: kPrimaryColor,
          indicatorColor: kPrimaryColor,
          labelStyle: TextStyle(fontSize: 11, fontWeight: FontWeight.w500),
          tabs: [
            Tab(
              icon: Icon(Icons.home, size: 25.0,),
              text: "Tab1",
              iconMargin: EdgeInsets.zero,
            ),
            Tab(
              icon: Icon(Icons.person, size: 25.0),
              text: "Tab2",
              iconMargin: EdgeInsets.zero,
            ),
          ],
          controller: tabController,
        ),
      ),
      body: TabBarView(
        controller: tabController,
        children: [
          Tab1(),
          Tab2()
        ],
      ),
    );
  }
}

Answer 3

這是一個簡單的解決方法或嘗試搜索 bottomnavigation 包

檢查這個persistent_bottom_nav_bar pacakge 它允許在所有帶有導航器的頁面中顯示底部導航，在其他包中你必須自己做所有的事情。

如果你想使用 persistent_bottom_nav_bar 檢查這個例子 for persistent_bottom_nav_bar

前 16 個 Flutter 導航庫

flutter-bottomappbar-navigation-with-fab

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Title')),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton:
            FloatingActionButton(child: Icon(Icons.add), onPressed: () {}),
        bottomNavigationBar: BottomAppBar(
            shape: CircularNotchedRectangle(),
            child: Container(
              height: 56,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  IconButton(icon: Icon(Icons.home), onPressed: () {}),
                  IconButton(icon: Icon(Icons.search), onPressed: () {}),
                  SizedBox(width: 40), // The dummy child
                  IconButton(icon: Icon(Icons.notifications), onPressed: () {}),
                  IconButton(icon: Icon(Icons.message), onPressed: () {}),
                ],
              ),
            )),
      ),
    );
  }
}