Виджет ChoiceChip

Виджет ChoiceChip показывает вариант в группе, как радиокнопка. Подпись - в label, выбран ли пункт - в selected, смену выбора - в onSelected. Несколько ChoiceChip ставят в Wrap или Row.

Синтаксис

ChoiceChip(
	label: Text('abcde'),
	selected: true,
	onSelected: (bool value) {},
)

Параметры

Параметр	Описание
`label`	Текст на метке.
`selected`	Подсветить метку как выбранную.
`onSelected`	Вызывается с новым значением selected.

Пример

Давайте выберем один из двух ChoiceChip:

import 'package:flutter/material.dart';

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

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

	@override
	State<ChoiceDemo> createState() => _ChoiceDemoState();
}

class _ChoiceDemoState extends State<ChoiceDemo>
{
	int pick = 0;

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(
				child: Wrap(
					spacing: 8,
					children: [
						ChoiceChip(
							label: Text('abcde'),
							selected: pick == 0,
							onSelected: (_) => setState(() => pick = 0),
						),
						ChoiceChip(
							label: Text('12345'),
							selected: pick == 1,
							onSelected: (_) => setState(() => pick = 1),
						),
					],
				),
			),
		);
	}
}

Нажатие переключает подсветку между двумя метками.

Пример

Давайте покажем один выбранный Chip:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: ChoiceChip(
						label: Text('12345'),
						selected: true,
						onSelected: (v) {},
					),
				),
			),
		),
	);
}

Метка '12345' отображается в выбранном состоянии.

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

виджет FilterChip,
который включает фильтр без взаимоисключения
виджет SegmentedButton,
который группирует переключатели Material 3
виджет ToggleButtons,
который рисует ряд переключателей
виджет Chip,
базовая метка без selected