Flutter package. Segmented button with slider indicator based on the iOS one, but adapted to the Material UI.
APACHE-2.0 License
Segmented Button Slide takes inspiration from the iOS segmented button, adapting it to the Material interface.
Install it by running the following command.
flutter pub add segmented_button_slide
By default it takes as much width as it can, so it's a good idea to wrap it inside a widget with a defined width.
int selectedOption = 0;
...
SegmentedButtonSlide(
selectedEntry: selectedOption,
onChange: (selected) => setState(() => selectedOption = selected),
entries: const [
SegmentedButtonSlideEntry(
icon: Icons.home_rounded,
label: "Home",
),
SegmentedButtonSlideEntry(
icon: Icons.list_rounded,
label: "List",
),
SegmentedButtonSlideEntry(
icon: Icons.settings_rounded,
label: "Settings",
),
],
colors: SegmentedButtonSlideColors(
barColor: Theme.of(context).colorScheme.primaryContainer.withOpacity(0.5),
backgroundSelectedColor: Theme.of(context).colorScheme.primaryContainer,
),
slideShadow: [
BoxShadow(
color: Colors.blue.withOpacity(1),
blurRadius: 5,
spreadRadius: 1,
)
],
margin: const EdgeInsets.all(16),
height: 70,
padding: const EdgeInsets.all(16),
borderRadius: BorderRadius.circular(8),
selectedTextStyle: const TextStyle(
fontWeight: FontWeight.w700,
color: Colors.green,
),
unselectedTextStyle: const TextStyle(
fontWeight: FontWeight.w400,
color: Colors.red,
),
hoverTextStyle: const TextStyle(
color: Colors.orange,
),
),
entries
accepts a list of SegmentedButtonSlideEntry
. Each SegmentedButtonSlideEntry
is formed by an icon and a label. You must declare at least one of the two.selectedEntry
accepts an int
. Defines the item that's currently selected.onChange
returns the selected value when the user changes the selection.colors
accepts an instance of SegmentedButtonSlideColors
. All of it's attributes are mandatory.
barColor
defines the background color of the full bar.backgroundSelectedColor
defines the background color of the item that's currently selected.slideShadow
defines the boxShadow of the slider (item that's currently selected).barShadow
defines the boxShadow of the full bar (the background).margin
creates a margin around the whole widget.height
defines the height of the widget.fontSize
sets the fontSize of the text. It doesn't affect to the icon.iconSize
sets the size of the icon. It doesn't affect to the text.textOverflow
defines how the text (only) should overflow.animationDuration
defines the duration of all the animations of the widget. By default it's set to 250 milliseconds.curve
defines the curve of all the animations of the widget. By default it's set to ease
.padding
defines the distance between the selectable items and the outer container.borderRadius
defines the border radius for the outer container and for the individual items.selectedTextStyle
accepts a TextStyle
object that defines the style for the icon and the text when the option is selected.unselectedTextStyle
accepts a TextStyle
object that defines the style for the icon and the text when the option is not selected.hoverTextStyle
accepts a TextStyle
object that defines the style for the icon and the text when the option is hovered.Segmented button slide v2 includes some breaking changes.
foregroundSelectedColor
, foregroundUnselectedColor
and hoverColor
have been removed.selectedTextStyle
, unselectedTextStyle
and hoverTextStyle
attributes.