像 Instagram 一样的底部屏幕导航

Question

你好，我正在尝试实现底部屏幕导航，就像 Flutter 中的 Instagram 一样。

我尝试过标签栏、底部栏，但我无法实现。

我也在 GitHub 和 google 上搜索过，但没有得到任何解决方案。

有人可以帮助我使用哪个小部件吗？我怎样才能实现相同的用户界面。

这是我的代码。

class AddStorySwipeRoute extends GetView<HomeController> {
  const AddStorySwipeRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppTheme.primary,
      bottomNavigationBar: Container(
        width: double.infinity,
        alignment: Alignment.bottomRight,
        height: kToolbarHeight,
        child: TabBar(
          tabs: const [
            Padding(
              padding: EdgeInsets.symmetric(vertical: 15.0),
              child: Center(
                child: Text(
                  'Post',
                  textAlign: TextAlign.center,
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(vertical: 15.0),
              child: Center(
                child: Text(
                  textAlign: TextAlign.center,
                  'Story',
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(vertical: 15.0),
              child: Center(
                child: Text(
                  textAlign: TextAlign.center,
                  'Clips',
                ),
              ),
            ),
          ],
          labelStyle: AppUtils.textBlueSFMedium14,
          unselectedLabelStyle: AppUtils.textGreylblSFMedium14,
          unselectedLabelColor: AppTheme.greylblColor,
          indicator: const BoxDecoration(
            border: Border(
              bottom: BorderSide(
                color: Colors.transparent,
                width: 2.0,
              ),
            ),
          ),
          indicatorWeight: 3.0,
          indicatorSize: TabBarIndicatorSize.label,
          isScrollable: true,
          controller: controller.tabController,
          // tabAlignment: TabAlignment.center,
        ),
      ),
      body: TabBarView(
          controller: controller.tabController,
          // physics: const NeverScrollableScrollPhysics(),
          children: [
            CameraRoute(1),
            AddFeedPostRoute(),
            CameraRoute(1),
          ]),
    );
  }
}

Answer 1

实现此目的的一种方法是通过以下 Widget 层次结构：

Scaffold 
  > Stack
    > Your main page content
    > Positioned // make this positioned `bottom`/`left`/`right`: `0`
      > Container // Here you add the shape (Stadium border), and other styling
        > Row // main axis alignment: `.end`
          > [Text, Text, Text]

这将帮助您创建一个“浮动”底部导航栏，其定位和样式与 Instagram 上的方式相同。