Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/benjamin-kraatz/material_segmented_control

A Material styled segmented control with full control over behavior and design.
https://github.com/benjamin-kraatz/material_segmented_control

Last synced: 13 days ago
JSON representation

A Material styled segmented control with full control over behavior and design.

Awesome Lists containing this project

README

        

# Material Segmented Control

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

![image](images/20190624_235551.jpg "Preview")

## Why?

We all know well the Cupertino segmented widget in [Flutter](https://flutter.dev).
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](https://pub.dev/packages/material_segmented_control))

## How to use

### Import the package

In your `pubspec.yaml`, add

```dart
dependencies:
material_segmented_control: ^5.0.1
```

### Import code

Wherever you want to use this widget, import

```dart
import 'package:material_segmented_control/material_segmented_control.dart';
```

### Basic usage

```dart
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 _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](https://github.com/benjamin-kraatz/material_segmented_control/tree/master/example).