Question

我想在我想要this type of blue lines when navigate or tap to another tab的flutter中的bottomNavigation Bar上添加这种类型的线

这是我的代码

BottomNavigationBar(   //Bottom navigation bar 
      onTap: onTabTapped,
      showSelectedLabels: true,
      currentIndex: _currentIndex,
      items: [
        BottomNavigationBarItem(    //Items of BottomNavigation Bar 
          icon: Image.asset(
            unSelectedTabs[0],
            width: iconSize,
            height: iconSize,
          ),
          title:
              Text("Home", style: TextStyle(color: _currentIndex == 0 ? AppTheme.mainThemeColor() : AppTheme.hintTextColor())),
          activeIcon: Image.asset(
            selectedTabs[0],
            width: iconSize,
            height: iconSize,
          ),
        ),

       .........
other childItem

请帮助找出该问题

Answer 1

您可以使用标签栏代替BottomNavigationBar 这是一个示例

class Home extends StatefulWidget {
  Home({Key key, this.title}) : super(key: key);

  final String title;

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

class _HomeState extends State<Home> with TickerProviderStateMixin {
  final PageStorageBucket bucket = PageStorageBucket();
  TabController tabController;
  final List<Widget> mainScreens = [
    HomePage(),
    FriendHomePage(),
    QrPage(),
    BillingHomePage(),
    BorrowedHomePage(),
  ];

  @override
  void initState() {
    super.initState();
    tabController = TabController(initialIndex: 0, length: 5, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: SafeArea(
        child: PageStorage(
          child: TabBarView(
            controller: tabController,
            physics: NeverScrollableScrollPhysics(),
            children: mainScreens,
          ),
          bucket: bucket,
        ),
      ),
      bottomNavigationBar: SafeArea(
        child: Material(
          color: Colors.white,
          elevation: 10,
          child: BottomAppBar(
            notchMargin: 8,
            shape: CircularNotchedRectangle(),
            child: TabBar(
              tabs: [
                Tab(
                    icon: ImageIcon(
                      AssetImage(
                        'assets/bottombar/home.png',
                      ),
                    ),
                    text: 'Үндсэн'),
                Tab(
                  icon: ImageIcon(
                    AssetImage(
                      'assets/bottombar/friends.png',
                    ),
                  ),
                  text: 'Найзууд',
                ),
                SizedBox(),
                Tab(
                  icon: ImageIcon(
                    AssetImage(
                      'assets/bottombar/billing.png',
                    ),
                  ),
                  text: 'Төлбөр',
                ),
                Tab(
                  icon: ImageIcon(
                    AssetImage(
                      'assets/bottombar/awlaga.png',
                    ),
                  ),
                  text: 'Авлага',
                )
              ],
              labelStyle: TextStyle(fontSize: 10),
              labelColor: Theme.of(context).primaryColor,
              unselectedLabelColor: Theme.of(context).accentColor,
              isScrollable: false,
              indicatorSize: TabBarIndicatorSize.tab,
              indicatorPadding: EdgeInsets.all(5.0),
              indicatorColor: Theme.of(context).primaryColor,
              controller: tabController,
              indicator: UnderlineTabIndicator(
                insets: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 75.0),
                borderSide:
                    BorderSide(color: Theme.of(context).primaryColor, width: 3),
              ),
            ),
          ),
        ),
      ),
      floatingActionButton: Material(
        elevation: 10,
        color: Theme.of(context).primaryColor,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(36)),
        ),
        child: InkWell(
          customBorder: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(36)),
          ),
          onTap: () => tabController.animateTo(2),
          child: Container(
            width: 65,
            height: 65,
            padding: EdgeInsets.all(8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Image.asset(
                  'assets/bottombar/qr.png',
                  height: 25,
                  fit: BoxFit.cover,
                  color: Theme.of(context).accentColor,
                ),
              ],
            ),
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      drawer: Drawer(),
    );
  }
}

Answer 2

This软件包应该可以帮助您实现目标。您可能只需要根据需要自定义它即可。

Answer 3

你可以这样做，虽然这对我有用，但这不是最好的方法。这也适用于 2-3 件商品


      bottomNavigationBar: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Align(
                        alignment: model.currentIndex == 0
                            ? Alignment.bottomLeft
                            : model.currentIndex == 1
                                ? Alignment.bottomCenter
                                : Alignment.bottomRight,
                        child: Container(
                          height: 2,
                          color: AppColors.secondaryColor,
                          width: width(context) * 0.33,
                        ),
                      ),
                      BottomNavigationBar(
                         ....
                          currentIndex: model.currentIndex,
                          onTap: (demo) {
                            model.setIndex(demo);
                          }),
                    ],
                  ),

在底部导航栏上添加行

3 个答案: