Виджет ToggleButtons

Виджет ToggleButtons показывает несколько кнопок в одной рамке. Список состояний - в isSelected, дочерние виджеты - в children, смену выбора - в onPressed с индексом. Для Material 3 часто берут SegmentedButton.

Синтаксис

ToggleButtons(
	isSelected: [true, false],
	onPressed: (int index) {},
	children: [
		Icon(Icons.format_bold),
		Icon(Icons.format_italic),
	],
)

Параметры

Параметр	Описание
`children`	Виджеты кнопок в ряд.
`isSelected`	Список bool для каждой кнопки.
`onPressed`	Индекс нажатой кнопки.

Пример

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

import 'package:flutter/material.dart';

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

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

	@override
	State<ToggleDemo> createState() => _ToggleDemoState();
}

class _ToggleDemoState extends State<ToggleDemo>
{
	List<bool> sel = [true, false];

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(
				child: ToggleButtons(
					isSelected: sel,
					onPressed: (i) {
						setState(() => sel[i] = !sel[i]);
					},
					children: [
						Text('abcde'),
						Text('12345'),
					],
				),
			),
		);
	}
}

Нажатие меняет подсветку сегментов с текстом.

Пример

Давайте выберем только один сегмент:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: ToggleButtons(
						isSelected: [false, true],
						onPressed: (i) {},
						children: [Text('abcde'), Text('12345')],
					),
				),
			),
		),
	);
}

Подсвечен второй сегмент '12345'.

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

виджет SegmentedButton,
аналог в Material 3
виджет IconButton,
одна иконка-кнопка
виджет ChoiceChip,
метка-переключатель
виджет Row,
куда можно выстроить кнопки вручную