Material Segmented Control

A material segmented control like the one for iOS, in Material style.

Now available in version 2!


To see TODOs, upcoming features and known issues, got to In the future section


We all know well the Cupertino segmented widget in Flutter. But there is no similar in Material, so I thought, why not to create one.

You can check it out on pub: (see package on

How to use

Import the package

In your pubspec.yaml, add

    material_segmented_control: ^2.0.4

Import code

Wherever you want to use this widget, import

import 'package:material_segmented_control/material_segmented_control.dart';

Basic usage

int _currentSelection = 0;

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

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

In the future


  • Tooltip showing a bit more details for a segment

Known issues

Currently there are no known issues. Yey!


Open the wiki to see the documentation

Behind the scenes

Thanks to Flutter, making this project successful!