Material Segmented Control

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



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: ^3.1.2

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,
          disabledChildren: [
          onSegmentChosen: (index) {
            setState(() {
              _currentSelection = index;

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

PLEASE NOTE: When using this in Flutter Web, it may cause rendering problems. This is probably a problem with the Flutter Web framework and may be fixed in the future. There is already an issue available; feel free to discuss here


  • Disable the selection for all children by setting selectionIndex to null. It un-selects all options.
  • Disable children to being not "clickable" (like setting onPressed to null on a button) by setting disabledChildren. Give it a list with all indices that should be disabled. Give it either null or an empty list to not use the disabled feature.

I highly recommend to check out the example project!


Open the wiki to see the documentation

Behind the scenes

Thanks to Flutter, making this project successful!