Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add vertical line as a divider in tabbar as a divider

I have a tab bar and i need to put a vertical line as a divider between tabs, how to do that? this how i used my tabbar:

new TabBar(
                    unselectedLabelColor: Color.fromRGBO(119, 119, 119, 1),
                    labelColor: Colors.black,
                    controller: controller,
                    tabs: <Tab>[
                      new Tab(text: "Girls"),
                      new Tab(text: "Hero"),
                      new Tab(text: "Open"),
                    ]),

and I need it to be like this:

enter image description here

like image 817
Atieh mn Avatar asked Jun 09 '19 12:06

Atieh mn


People also ask

How do you add a vertical divider to a row in Flutter?

How to Add Vertical Divider: VerticalDivider( color: Colors. black, //color of divider width: 10, //width space of divider thickness: 3, //thickness of divier line indent: 10, //Spacing at the top of divider. endIndent: 10, //Spacing at the bottom of divider. )

How do you add a divider to a column in Flutter?

Adding a Divider to Your Project First, drag the Column widget from the Layout Elements tab (in the Widget Panel). icon). Now, drag the Divider widget from the Layout Elements tab or add it directly from the widget tree. Add one more Image to the Column (Below the Divider) and set its width to inf.


2 Answers

Finally It worked for me

TabBar(
    tabs: [
        _individualTab('assets/icons/bottom_nav/Home.png'),
        _individualTab('assets/icons/bottom_nav/Guys.png'),
        _individualTab('assets/icons/bottom_nav/Notes.png'),
        Tab(
            icon: ImageIcon(
                AssetImage('assets/icons/bottom_nav/Email.png')
            ),
        ),
    ],
    labelColor: STColors.PRIMARY_COLOR,
    unselectedLabelColor: Colors.grey,
    indicatorColor: Colors.white,
    indicatorSize: TabBarIndicatorSize.tab,
    labelPadding: EdgeInsets.all(0),
    indicatorPadding: EdgeInsets.all(0),
),

Individual Tab Function

Widget _individualTab(String imagePath) {
    return Container(
        height: 50 + MediaQuery
          .of(context)
          .padding
          .bottom,
        padding: EdgeInsets.all(0),
        width: double.infinity,
        decoration:  BoxDecoration(border: Border(right: BorderSide(color: STColors.LIGHT_BORDER, width: 1, style: BorderStyle.solid))),
        child: Tab(
            icon: ImageIcon(AssetImage(imagePath)),
        ),
    );
}

Output

like image 72
Mark Bell Avatar answered Oct 16 '22 12:10

Mark Bell


To achieve small size separator you can use this.

Widget _individualTab(String imagePath) {
return Container(
  height: 50,
  width: double.infinity,
  decoration:  BoxDecoration(
    border: Border(right: BorderSide(color: STColors.LIGHT_BORDER,
        width: 0,
        style: BorderStyle.solid),
    ),
  ),
  child: Stack(children: <Widget>[
    Center(
        child: Tab(
          icon: ImageIcon(AssetImage(imagePath)),
        ),
    ),
    Align(
      alignment: Alignment.centerRight,
      child: Container(
        color: STColors.appBlackMedium,
        width: 1,
        height: 25,
      ),
    )
  ],)
);

}

like image 1
Abeer Iqbal Avatar answered Oct 16 '22 12:10

Abeer Iqbal