material_segmented_control 1.2.0

A segmented control widget like the one for iOS, but in Material design.

Material Segmented Control

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

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

For important notes and TODOs, see TODO section below!

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

Import code

Wherever you want to use this widget, import

import 'package:material_segmented_control/material_segmented_control.dart';

Basic usage

MaterialSegmentedControl(
              borderRadius: 32.0,
              initialSelection: 0,
              colorIdle: Colors.white,
              colorSelected: Colors.blueAccent,
              children: <SegmentedItem>[
                SegmentedItem(
                  colorSelected: Colors.blueAccent,// --> not necessary if defined in parent widget!
                  colorIdle: Colors.white, // --> not necessary if defined in parent widget!
                  child: Text('Rome'),
                  onSelected: (state) {
                    print("Hello, it's rome - ${state ? '' : 'un'}selected");
                  },
                ),
                SegmentedItem(
                  colorSelected: Colors.blueAccent,
                  colorIdle: Colors.white,
                  child: Text('New York'),
                ),
                SegmentedItem(
                  colorSelected: Colors.blueAccent,
                  colorIdle: Colors.white,
                  child: Text('Washington'),
                ),
                SegmentedItem(
                  colorSelected: Colors.blueAccent,
                  colorIdle: Colors.white,
                  child: Text('Berlin'),
                ),
              ],
            );

In the future

TODO

a) Provide a vertical divider between each item

Known issues

-> Pixel overflow when the width of the whole control is larger than screen size. [WIP, see branch multi-overflow-fix for progress]