Documentation

this page is currently under development

What this page is for

Here you can get started and read through the basics. Implement, use, control and extend MSC.

Implementation

First, add our latest dependency to your pubspec.yaml file. You can find the latest version on Dart Pub.

After that, in every file you'll need MSC, add this line to your imports:

import 'package:material_segmented_control/material_segmented_control.dart'

Use

Children

It's really easy to use MSC. First you'll need to define the children.

Map<int, Widget> _children() => {
  0: Text('Hummingbird'),
  1: Text('Kiwi'),
  2: Text('Rio'),
  3: Text('Telluraves')
};

The children must be inside a map with an index and a widget. These indices can be of any type; it's the easiest to use int, but it's up to your needs.

See our styling guidelines to make sure not to make this control too complex for the end-user.

The size of a widget does not matter; a segment's width is sized by the widest child.

Control itself

In a widget tree, add MSC itself. Here's an example on how you could achieve.

MaterialSegmentedControl(
          children: _children(),
          selectionIndex: _currentSelection,
          borderColor: Colors.grey,
          selectedColor: Colors.redAccent,
          unselectedColor: Colors.white,
          borderRadius: 32.0,
          onSegmentChosen: (index) {
            setState(() {
              _currentSelection = index;
            });
          },
         )

Here's what all the fields mean:

Property	Used for	Data type	Required
selectionIndex	Current selected segment. See next section for more info. It also defines the initially selected segment index	int	yes
children	Display segments	Map<dynamic, Widget>	yes
borderColor	The color of the whole widget's border	Color	no, accentColor by default
selectedColor	The color of the currently selected segment	Color	no, a lighter accentColor by default
unselectedColor	The color of all unselected segments	Color	no, Colors.white by default
borderRadius	The radius of the widget's border	double	no, 32.0 by default
onSegmentChosen	Called when a segment was selected	Function(int)	yes, see next topic section for info

Callbacks

Make sure to call setState when an item is selected and update the global currentSelectedItemIndex or whatever you called this. Otherwise, MSC won't be updated visually.

With onSegmentChosen you can get the currently selected segment. This way you can display segment-specific content. See examples for more info.

---

Important

Make sure to call setState with the currently selected item index, defined for selectionIndex.

---

Extend

You can, of course, make MSC behave and look what you like.

Documentation to this coming soon...