material_segmented_control 2.1.0+1

Flutter Android iOS web

A segmented control widget like the one for iOS, but in Material design.

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

How to use #

Import the package #

In your pubspec.yaml, add

dependencies: 
    material_segmented_control: ^2.1.0

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,
          borderRadius: 32.0,
          disabledChildren: [
            3,
          ]
          onSegmentChosen: (index) {
            setState(() {
              _currentSelection = index;
            });
          },
         )

Map<int, Widget> _children = {
  0: Text('Hummingbird'),
  1: Text('Kiwi'),
  2: Text('Rio'),
  3: Text('Telluraves')
};

PLEASE NOTE: When using this in Flutter Web, it may cause rendering problems. This is probably a problem with the Flutter Web framework and may be fixed in the future. There is already an issue available; feel free to discuss here

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.

I highly recommend to check out the example project!

Documentation #

Open the wiki to see the documentation

Behind the scenes #

Thanks to Flutter, making this project successful!

25
likes
105
pub points
92%
popularity

A segmented control widget like the one for iOS, but in Material design.

Repository (GitHub)
View/report issues

Documentation

Documentation
API reference

Uploader

sebbenkra@gmail.com

License

Apache 2.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on material_segmented_control