Виджет SegmentedButton

Виджет SegmentedButton группирует ButtonSegment в segments. Выбранные значения - в selected как Set, смену набора - в onSelectionChanged, множественный выбор - через multiSelectionEnabled.

Синтаксис

SegmentedButton<int>(
	segments: [
		ButtonSegment(value: 0, label: Text('abcde')),
		ButtonSegment(value: 1, label: Text('12345')),
	],
	selected: {0},
	onSelectionChanged: (Set<int> sel) {},
)

Параметры

Параметр	Описание
`segments`	Список `ButtonSegment`.
`selected`	Набор value выбранных сегментов.
`onSelectionChanged`	Новый набор после нажатия.

Пример

Давайте переключим два сегмента:

import 'package:flutter/material.dart';

void main()
{
	runApp(const MaterialApp(home: SegPage()));
}

class SegPage extends StatefulWidget
{
	const SegPage({super.key});

	@override
	State<SegPage> createState() => _SegPageState();
}

class _SegPageState extends State<SegPage>
{
	Set<int> sel = {0};

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(
				child: SegmentedButton<int>(
					segments: [
						ButtonSegment(value: 0, label: Text('abcde')),
						ButtonSegment(value: 1, label: Text('12345')),
					],
					selected: sel,
					onSelectionChanged: (s) => setState(() => sel = s),
				),
			),
		);
	}
}

Подсветка переходит между 'abcde' и '12345'.

Пример

Давайте включим multiSelectionEnabled:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: SegmentedButton<int>(
						multiSelectionEnabled: true,
						segments: [
							ButtonSegment(value: 1, label: Text('abcde')),
							ButtonSegment(value: 2, label: Text('12345')),
						],
						selected: {1, 2},
						onSelectionChanged: (s) {},
					),
				),
			),
		),
	);
}

Оба сегмента могут быть выбраны одновременно.

Смотрите также

класс ButtonSegment,
описание одного сегмента
виджет ToggleButtons,
переключатели Material 2
виджет ChoiceChip,
метки с выбором
виджет NavigationBar,
нижняя навигация M3