LanarsInc/animated-segmented-tab-control

A customizable segment tab control. Can be used with or without TabView.

Made in lanars.com.

pub package

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 style the whole widget, an individual tab, or both. A value on the currently selected SegmentTab overrides the corresponding value on SegmentedTabControl.

SegmentedTabControl(
  barDecoration: BoxDecoration(
    color: Colors.grey.shade300,
    borderRadius: BorderRadius.circular(10),
  ),
  indicatorDecoration: BoxDecoration(
    color: Colors.orange.shade200,
    borderRadius: BorderRadius.circular(10),
  ),
  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'),
  ],
)

Note that the text colors are read from the selected tab and applied to the whole bar, so textColor and selectedTextColor set the bar's label colors while that tab is selected rather than coloring only that one tab.

Change tracking logic is identical to TabBar logic.

DefaultTabController.of(context).index

or

_controller.index

Сustom tab content

Use SegmentTab.labelBuilder to show any widget like an icon.

The selected-tab highlight is produced by painting the tab row twice and clipping the upper copy to the indicator, so the builder is called once per layer and receives the color of the layer it is painting. Plain Icon and Text children inherit that color. Use color for anything that does not inherit it, such as a border or an SVG:

SegmentTab(
  label: 'NEW',
  labelBuilder: (context, color) => Container(
    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
    decoration: BoxDecoration(
      border: Border.all(color: color),
      borderRadius: BorderRadius.circular(20),
    ),
    child: Text('NEW'),
  ),
)

Interactive children are not supported.

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