material_segmented_control 2.0.3

Material Segmented Control #

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

Now available in version 2!

image

To see TODOs, upcoming features and known issues, got to In the future section

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.0.3

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,
          onSegmentChosen: (index) {
            setState(() {
              _currentSelection = index;
            });
          },
         )

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

In the future #

TODOs #

  • InkWell/Ripple effect
  • Tooltip showing a bit more details for a segment

Known issues #

Currently there are no known issues. Yey!

Documentation #

Open the wiki to see the documentation

Behind the scenes #

Thanks to Flutter, making this project successful!

[2.0.3] - Updated pubspec.yaml

[2.0.2] - Minor fixes

[2.0.1] - MSC v2!

  • Maybe breaking version

  • Completely new approach behind the scenes

  • New coloring options

  • More customization

  • Define one single listener to get selected state

  • Removed issues

  • Better documentation on how to use

  • Works with every widget directly, no need to use a special class SegmentedItem

[1.2.0] - Colors can now be set in MaterialSegmentedControl

  • Define colors in MSC widget generally, you do not need to specify the colors for each item separately.

[1.1.3] - Fixed initial selection

[1.1.2] - Initial selection

  • Set initially selected item.

[1.1.1] - Minor fixes

  • Optical improvements

[1.1.0] - Fixed major bug where you can select multiple items

[1.0.2] - Edited example readme

[1.0.1] - Minor fixes on readme

[1.0.0] - Added a list of children

  • Updated to Dart SDK version 2.2.2 !
  • Provide the segmented control a list of children instead only left and right
  • Define selection callback for each item itself
  • Set colors for each item

[0.2.1] - Minor fixes

[0.2.0] - Customization of vertical divider

  • Customize color
  • Set width

[0.1.6] - Completed/fixed example directory

[0.1.5] - Added example directory

[0.1.4] - Minor fixes in pubspec.yaml

[0.1.3] - License added.

  • Licensing info is under LICENSE

[0.1.2] - Edited Readme and pubspec info

[0.1.1] - 21.05.2019

  • Initial release.

example/README.md

Example #

This example shows how to use this widget in your project.

Code #

Basic implementation #

int _currentSelection = 0;

MaterialSegmentedControl(
          children: _children(),
          selectionIndex: _currentSelection,
          borderColor: Colors.grey,
          selectedColor: Colors.redAccent,
          unselectedColor: Colors.white,
          borderRadius: 32.0,
          onSegmentChosen: (index) {
            setState(() {
              _currentSelection = index;
            });
          },
         )

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

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  material_segmented_control: ^2.0.3

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:material_segmented_control/material_segmented_control.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
81
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
90
Learn more about scoring.

We analyzed this package on Sep 19, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.0
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.2

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.2 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test