benjamin-kraatz/material_segmented_control

Material Segmented Control

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

image

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.dev: (see package on pub.dev)

How to use

Import the package

In your pubspec.yaml, add

dependencies: 
    material_segmented_control: ^5.0.1

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')
};

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.

You might want to check out the example project.