Добавить строки на нижней панели навигации

Question

Я хочу добавить этот тип линии на нижней панели навигации в флаттере Я хочу this type of blue lines when navigate or tap to another tab

это мой код

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

Этот пакет должен помочь вам достичь этого. Возможно, вам просто нужно настроить его под свои нужды.

Answer 2

Вы можете использовать панель вкладок вместо 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(),
    );
  }
}