SegmentedControl in Flutter

Control your fate…

Back after a long gap, phew…..

In my mobile programmer career, I have always a secret admirer of the iOS. Their way of demonstrating data to the user, has consistently kept me glued to them. One such control from their basket is the :

Segmented Control

If you are an iOS user, you may have experienced this control in their Phone App…showing the all / missed calls.

Exploring a way to program this control in Flutter, until I found

CupertinoSegmentedControlfrom

import ‘package:flutter/cupertino.dart’;

As per the Flutter guidelinesfor CupertinoSegmentedControl :

Displays the widgets provided in the Mapof childrenin a horizontal list. Used to select between a number of mutually exclusive options. When one option in the segmented control is selected, the other options in the segmented control cease to be selected.

How to use…

children : This should be a map of widgets…(see down for example)

onValueChanged : Fetch the selected tab value and display widget accordingly..

groupValue : The identifier of the widget that is currently selected. This must be one of the keys in the Mapof children. If this attribute is null, no widget will be initially selected.

Here, logoWidgets is comprised of a map with an integer and text widgets for their identification in the groupValue….

As the user clicks on next segment, the selection is changed and the widget is shown accordingly (as per the index selected)…

The index collected from the onValueChangedfunction is used. This value is then set against the old value. And, setState() is called.

In this example, we have navigated between three segments / tabs and rendered the widgets respective to the index (matching from the collection of map)….

Video demonstration :

For complete source code, visit :

https://github.com/AseemWangoo/flutter_programs/blob/master/segmentedcontrol.dart