material_segmented_control

Description:

material segmented control

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.dev:
(see package on pub.dev)
How to use #
Import the package #
In your pubspec.yaml, add
dependencies:
material_segmented_control: ^5.0.1
copied to clipboard
Import code #
Wherever you want to use this widget, import
import 'package:material_segmented_control/material_segmented_control.dart';
copied to clipboard
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')
};
copied to clipboard
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.