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

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

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,
          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

TODOs

• InkWell/Ripple effect
• Tooltip showing a bit more details for a segment

Known issues

Currently there are no known issues. Yey!

Documentation

Open the wiki to see the documentation

Behind the scenes

Thanks to Flutter, making this project successful!