Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/benjamin-kraatz/material_segmented_control
- Owner: benjamin-kraatz
- License: apache-2.0
- Created: 2019-05-20T22:17:25.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-05-07T10:06:43.000Z (6 months ago)
- Last Synced: 2024-08-01T16:26:44.149Z (3 months ago)
- Language: Dart
- Homepage:
- Size: 419 KB
- Stars: 52
- Watchers: 3
- Forks: 22
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
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).