如何在 Flutter 中使用 FAB 获得底部导航功能

Question

我有这样的设计，当我们打开应用程序时，默认情况下它首先转到主屏幕，并且我有两个底部导航栏项目。

我无法让它工作，因为我希望它按照底部导航栏的工作方式运行，但我希望默认屏幕成为主页。当您点击购物车或个人资料时，它应该突出显示该选项卡，但当您点击主页时，它应该取消突出显示。

Answer 1

Answer 2

这是 Flutter 中 Bottom 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 包它允许在所有带有导航器的页面中显示底部导航，在其他包中你必须自己做所有事情。

如果你想使用 persistent_bottom_nav_bar 检查这个

Top 16 Flutter Navigation Libraries

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: () {}),
                ],
              ),
            )),
      ),
    );
  }
}

如何在 Flutter 中使用 FAB 获得底部导航功能

How to get Bottom Navigation Functionality with FAB in Flutter

android

dart

flutter

flutter-dependencies

flutter-layout