如何在 Flutter 中制作类似 Linkedin 的底部导航栏？

Question

LinkedIn 底部导航栏

正如我们在导航栏项目上看到的那样，有黑色滚动条，在应用栏中，我们可以通过 DefaultTabController() 或仅通过 TabBar 中的控制器属性来实现，但我无法在底部导航栏中找到,即使我在 pub.dev 上也没有找到任何包裹所以我希望有人用代码回答这个问题

Answer 1

这是一个示例，您可以控制颜色和标签的显示方式，首先确保扩展 TickerProviderStateMixin 例如：

class _LandingState extends State<Landing> with TickerProviderStateMixin {

然后创建一个 TabController

TabController? con;

在 initState 方法中输入：

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

长度是你有多少widget in Linked in there 5 所以长度设置为5

在脚手架小部件中添加以下内容

bottomNavigationBar: Container(
          decoration: const BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(
                25,
              ),
              topRight: Radius.circular(
                25,
              ),
            ),
          ),
          child: TabBar(
            controller: con,
            indicatorColor: Colors.red,
            overlayColor: MaterialStateProperty.all(Colors.white,),
            labelStyle: const TextStyle(
              fontSize: 0,
            ),
            labelColor: Colors.white,
            unselectedLabelStyle: const TextStyle(
              fontSize: 11,
            ),
            tabs: const [
              Tab(
                icon: Icon(
                  Icons.home_outlined,
                ),
                text: 'Home',
              ),
              Tab(
                icon: Icon(
                  Icons.notifications,
                ),
                text: 'Notification',
              ),
              Tab(
                icon: Icon(
                  Icons.app_registration,
                ),
                text: 'Information',
              ),
              Tab(
                icon: Icon(
                  Icons.settings,
                ),
                text: 'Settings',
              ),
            ],
          ),
        ),

然后在脚手架主体中：

TabBarView(
          controller: con,
          children: <widget>[
           Container(
              child: Text(con!.index.toString()),
            ), 
           Container(
              child: Text(con!.index.toString()),
            ), 
           Container(
              child: Text(con!.index.toString()),
            ),
           Container(
              child: Text(con!.index.toString()),
            ),
           Container(
              child: Text(con!.index.toString()),
            ),
         ],
),

确保 TabBarView 的子项中只有 5 个小部件，与您在 TabController 中设置的长度完全相同。

如何在 Flutter 中制作类似 Linkedin 的底部导航栏？

How to make bottom navigation bar like Linkedin in Flutter?

dart

flutter

flutter-layout