segmented_button_slide 1.0.4 segmented_button_slide: ^1.0.4 copied to clipboard
Segmented button with slider indicator. Based on the iOS segmented button but adapted to the Material UI.
Segmented Button Slide #
Segmented Button Slide takes inspiration from the iOS segmented button, adapting it to the Material interface.
How to use it #
Install it by running the following command.
flutter pub add segmented_button_slide
Full example
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(
entries: const [
SegmentedButtonSlideEntry(icon: Icons.home_rounded, label: "Home"),
SegmentedButtonSlideEntry(icon: Icons.list_rounded, label: "List"),
SegmentedButtonSlideEntry(icon: Icons.settings_rounded, label: "Settings"),
],
selectedEntry: selectedOption,
onChange: (selected) => setState(() => selectedOption = selected),
colors: SegmentedButtonSlideColors(
barColor: Colors.grey.withOpacity(0.2),
backgroundSelectedColor: Colors.grey,
foregroundSelectedColor: Colors.white,
foregroundUnselectedColor: Colors.black,
hoverColor: Colors.grey.withOpacity(0.8)
),
slideShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 5,
spreadRadius: 1
)
],
margin: const EdgeInsets.all(16),
height: 70,
)
Detailed explanation
- [REQUIRED]
entries
accepts a list ofSegmentedButtonSlideEntry
. EachSegmentedButtonSlideEntry
is formed by an icon and a label. You must declare at least one of the two. - [REQUIRED]
selectedEntry
accepts anint
. Defines the item that's currently selected. - [REQUIRED]
onChange
returns the selected value when the user changes the selection. - [REQUIRED]
colors
accepts an instance ofSegmentedButtonSlideColors
. 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.foregroundSelectedColor
defines the color of the icon and text of the item that's currently selected.foregroundUnselectedColor
defines the color of the icon and text of the items that aren't selected.hoverColor
defines the color of the icon and text when the mouse is over that entry.
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 toease
.