// Copyright 2014 The Flutter Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import 'package:flutter/material.dart'; /// Flutter code sample for migrating from [ToggleButtons] to [SegmentedButton]. void main() { runApp(const ToggleButtonsApp()); } class ToggleButtonsApp extends StatelessWidget { const ToggleButtonsApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData(useMaterial3: true), home: const Scaffold( body: ToggleButtonsExample(), ), ); } } enum ShirtSize { extraSmall, small, medium, large, extraLarge } const List<(ShirtSize, String)> shirtSizeOptions = <(ShirtSize, String)>[ (ShirtSize.extraSmall, 'XS'), (ShirtSize.small, 'S'), (ShirtSize.medium, 'M'), (ShirtSize.large, 'L'), (ShirtSize.extraLarge, 'XL'), ]; class ToggleButtonsExample extends StatefulWidget { const ToggleButtonsExample({super.key}); @override State createState() => _ToggleButtonsExampleState(); } class _ToggleButtonsExampleState extends State { final List _toggleButtonsSelection = ShirtSize.values.map((ShirtSize e) => e == ShirtSize.medium).toList(); Set _segmentedButtonSelection = {ShirtSize.medium}; @override Widget build(BuildContext context) { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const Text('ToggleButtons'), const SizedBox(height: 10), // This ToggleButtons allows multiple or no selection. ToggleButtons( // ToggleButtons uses a List to track its selection state. isSelected: _toggleButtonsSelection, // This callback return the index of the child that was pressed. onPressed: (int index) { setState(() { _toggleButtonsSelection[index] = !_toggleButtonsSelection[index]; }); }, // Constraints are used to determine the size of each child widget. constraints: const BoxConstraints( minHeight: 32.0, minWidth: 56.0, ), // ToggleButtons uses a List to build its children. children: shirtSizeOptions .map(((ShirtSize, String) shirt) => Text(shirt.$2)) .toList(), ), const SizedBox(height: 20), const Text('SegmentedButton'), const SizedBox(height: 10), SegmentedButton( // ToggleButtons above allows multiple or no selection. // Set `multiSelectionEnabled` and `emptySelectionAllowed` to true // to match the behavior of ToggleButtons. multiSelectionEnabled: true, emptySelectionAllowed: true, // Hide the selected icon to match the behavior of ToggleButtons. showSelectedIcon: false, // SegmentedButton uses a Set to track its selection state. selected: _segmentedButtonSelection, // This callback updates the set of selected segment values. onSelectionChanged: (Set newSelection) { setState(() { _segmentedButtonSelection = newSelection; }); }, // SegmentedButton uses a List> to build its children // instead of a List like ToggleButtons. segments: shirtSizeOptions .map>(((ShirtSize, String) shirt) { return ButtonSegment(value: shirt.$1, label: Text(shirt.$2)); }) .toList(), ), ], ), ); } }