Aamil Silawat
Aamil Silawat

Reputation: 8229

Add lines on Bottom Navigation Bar

Image

I wanna Add this type of line on bottomNavigation Bar in flutter I want this type of blue lines when navigate or tap to another tab

this is my code

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

Please help to find out this

Upvotes: 1

Views: 6783

Answers (4)

Arash shirali
Arash shirali

Reputation: 41

you should use column in your active icon property.

  activeIcon: Column(
              children: [
                Container(
                  transform: Matrix4.translationValues(0, -13, 0),
                  height: 4,
                  width: 50,
                  decoration: const BoxDecoration(
                    color: Colors.red,
                  ), 
                ),
           Image.asset(
             selectedTabs[0],
             width: iconSize,
             height: iconSize,
                ),
              ],
            ),

Upvotes: 0

user15243688
user15243688

Reputation: 1

You can do like this, this is not the best way though it worked for me. Also this is suitable for 2-3 items


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

Upvotes: -1

you can use tabbar instead of BottomNavigationBar Here is a sample

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

Upvotes: 1

Darshan
Darshan

Reputation: 11634

This package should help you achieve that. You may just need to customize it per your need.

enter image description here

Upvotes: 1

Related Questions