Material Segmented Control

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

Why?

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 pub.dev)

How to use

Import the package

In your pubspec.yaml, add

dependencies: 
    material_segmented_control: ^4.2.0

Import code

Wherever you want to use this widget, import

import 'package:material_segmented_control/material_segmented_control.dart';

Basic usage

int _currentSelection = 0;

MaterialSegmentedControl(
          children: _children,
          selectionIndex: _currentSelection,
          borderColor: Colors.grey,
          selectedColor: Colors.redAccent,
          unselectedColor: Colors.white,
          selectedTextStyle: TextStyle(color: Colors.white),
          unselectedTextStyle: TextStyle(color: Colors.redAccent),
          borderWidth: 0.7,
          borderRadius: 32.0,
          disabledChildren: [
            3,
          ]
          onSegmentTapped: (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

Features

• 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!

Documentation

Open the wiki to see the documentation

Behind the scenes

Thanks to Flutter, making this project successful!