Buttons TabBar

Open source Flutter package, tabbar where each tab indicator is a toggle button.

See the full example here

Install and import the package. Then just customize its parameters.

Installation

dependencies:
  flutter:
    sdk: flutter
  buttons_tabbar: ^1.1.2

Screenshots

Default

ButtonsTabBar - Examples

Example #1

DefaultTabController(
          length: ...,
          child: Column(
            children: <Widget>[
              ButtonsTabBar(
                unselectedBackgroundColor: Colors.grey[300],
                unselectedLabelStyle: TextStyle(color: Colors.black),
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                tabs: ...,
              ),
              Expanded(
                child: TabBarView(
                  children: ...,
                ),
              ),
            ],
          ),
        )

Example #2

DefaultTabController(
          length: ...,
          child: Column(
            children: <Widget>[
              ButtonsTabBar(
                backgroundColor: Colors.blue[600],
                unselectedBackgroundColor: Colors.white,
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
		unselectedLabelStyle: TextStyle(
                    color: Colors.blue[600], fontWeight: FontWeight.bold),
                borderWidth: 1,
                unselectedBorderColor: Colors.blue[600],
                radius: 100,
                tabs: ...,
              ),
              Expanded(
                child: TabBarView(
                  children: ...,
                ),
              ),
            ],
          ),
        )

ButtonsTabBar Parameters

Parameter	Type	Description	Default
tabs	`List<Widget>`	The tabs to display. Typically a list of two or more `Tab` widgets.	`@required`
controller	`TabController`	This widget's selection and animation state.	`DefaultTabController.of`
duration	`int`	The duration in milliseconds of the transition animation.	`250`
backgroundColor	`Color`	The background color of the button on its selected state.	`Colors.blueAccent`
unselectedBackgroundColor	`Color`	The background color of the button on its unselected state.	`Colors.grey`
borderWidth	`double`	The with of solid `Border` for each button. If the value is `null`, the border is not drawn.	`null`
borderColor	`Color`	The border color of the button on its selected state.	`Colors.black`
unselectedBorderColor	`Color`	The border color of the button on its unselected state. If it's value is `null`, the `Color` of `borderColor` is used.	`null`
labelStyle	`TextStyle`	The `TextStyle` of the button's `Text` on its selected state. The color provided on the TextStyle will be used for the `Icon`'s color.	`TextStyle(color: Colors.white)`
unselectedLabelStyle	`TextStyle`	The `TextStyle` of the button's `Text` on its unselected state. The color provided on the TextStyle will be used for the `Icon`'s color.	`TextStyle(color: Colors.black)`
physics	`ScrollPhysics`	The physics used for the `ScrollController`of the tabs list.	`BouncingScrollPhysics`
contentPadding	`EdgeInsets`	The `EdgeInsets` used for the `Padding` of the buttons' content.	`EdgeInsets.all(4)`
buttonMargin	`EdgeInsets`	The `EdgeInsets` used for the `Margin` of the buttons.	`EdgeInsets.all(4)`
labelSpacing	`double`	The spacing between the `Icon` and the `Text`. If only one of those is provided, no spacing is applied.	`4.0`
radius	`double`	The value of the `BorderRadius.circular` applied to each button.	`7.0`
height	`double`	Override the material TabBar height value.	`46.0`

Future

If you have any suggestion or problem, let me know and I'll try to improve or fix it.

Versioning

v1.1.2 - 03 March 2021
v1.1.1 - 07 January 2021
v1.1.0 - 06 January 2021
v1.0.3 - 01 January 2021
v1.0.2+1 - 30 November 2020
v1.0.2 - 30 November 2020
v1.0.1 - 21 October 2020
v1.0.0+1 - 07 August 2020
v0.1.2+1 - 02 August 2020
v0.1.1+1 - 16 May 2020
v0.1.0+2 - 24 April 2020
v0.1.0+1 - 24 April 2020

License

GNU General Public License v3.0, see the LICENSE.md file for details.

jackTang11/buttons_tabbar