a customizable segment tab control. can be used with or without tabview.
features
the package provides an advanced segmented control widget based on the tabcontroller
.
getting started
to use the package, add the dependency to the pubspec.yaml
file.
dependencies:
...
animated_segmented_tab_control: any
and import the library.
import 'package:animated_segmented_tab_control/animated_segmented_tab_control.dart';
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,
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
you can find more examples here: https://github.com/lanarsinc/animated-segmented-tab-control/tree/main/example
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
Comments are closed.