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: 15 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).