A customizable segment tab control. Can be used with or without TabView.
Made in lanars.com.
Features
The package provides an advanced segmented control widget based on the TabController
.
![](https://user-images.githubusercontent.com/92156712/136547187-fb7eb419-3f18-419f-9ca1-8d25d85b9a44.gif)
![](https://user-images.githubusercontent.com/92156712/136547191-3fd7ac95-0153-4fad-83d8-e356d7133273.gif)
![](https://raw.githubusercontent.com/LanarsInc/animated-segmented-tab-control/main/example/assets/neumorphic_example.gif)
![](https://raw.githubusercontent.com/LanarsInc/animated-segmented-tab-control/main/example/assets/flexible_tabs_example.jpg)
Usage
The package contains a SegmentedTabControl
widget that requires a SegmentTab
list.
SegmentedTabControl(
tabs: [
SegmentTab(
label: "Home".
),
],
)
SegmentedTabControl also requires a TabController. You can provide it with a DefaultTabController
or instantiate a TabController
instead.
DefaultTabController(
length: 2,
child: SegmentedTabControl(
tabs: [
SegmentTab(
label: "Home",
),
SegmentTab(
label: "Account",
),
],
)
)
You can change the entire widget or an individual tab. Or combine it. All provided values in the SegmentedTabControl
will be replaced with values from each tab.
SegmentedTabControl(
backgroundColor: Colors.grey.shade300,
indicatorColor: Colors.orange.shade200,
tabTextColor: Colors.black45,
selectedTabTextColor: Colors.white,
tabs: [
SegmentTab(
label: 'ACCOUNT',
color: Colors.red.shade200,
),
SegmentTab(
label: 'HOME',
backgroundColor: Colors.blue.shade100,
selectedTextColor: Colors.black45,
textColor: Colors.black26,
),
const SegmentTab(label: 'NEW'),
],
),
Change tracking logic is identical to TabBar logic.
DefaultTabController.of(context).index
or
_controller.index
Additional information
If you have any ideas or are running into a bug, please submit an issue on github page: https://github.com/LanarsInc/animated-segmented-tab-control/issues