Во Flutter флажки обычно используются для обозначения логических значений. Хотя сами по себе флажки могут не обеспечить достаточного контекста, часто необходимо добавить текст метки, чтобы прояснить назначение флажка. В этой статье мы рассмотрим несколько методов добавления текста метки или заголовка к виджету «Флажок» во Flutter, а также примеры кода.

Метод 1: использование виджета строк

Один простой способ — использовать виджет «Строка» для объединения виджета «Флажок» и виджета «Текст». Вот пример:

Row(
  children: [
    Checkbox(
      value: _isChecked,
      onChanged: (bool? value) {
        setState(() {
          _isChecked = value;
        });
      },
    ),
    Text('Label Text'),
  ],
)

Метод 2: использование виджета ListTile

Виджет ListTile предоставляет удобный способ отображения метки рядом с флажком. Вот пример:

ListTile(
  title: Text('Label Text'),
  leading: Checkbox(
    value: _isChecked,
    onChanged: (bool? value) {
      setState(() {
        _isChecked = value;
      });
    },
  ),
)

Метод 3: использование виджета CheckboxListTile

Виджет CheckboxListTile специально разработан для объединения флажка и метки. Вот пример:

CheckboxListTile(
  title: Text('Label Text'),
  value: _isChecked,
  onChanged: (bool? value) {
    setState(() {
      _isChecked = value;
    });
  },
)

Метод 4. Использование собственного виджета

Если вам требуется дополнительная настройка, вы можете создать собственный виджет, сочетающий в себе флажок и метку. Вот пример:

class LabeledCheckbox extends StatelessWidget {
  final String label;
  final bool value;
  final Function(bool?) onChanged;
  LabeledCheckbox({
    required this.label,
    required this.value,
    required this.onChanged,
  });
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Checkbox(
          value: value,
          onChanged: onChanged,
        ),
        Text(label),
      ],
    );
  }
}
// Usage:
LabeledCheckbox(
  label: 'Label Text',
  value: _isChecked,
  onChanged: (bool? value) {
    setState(() {
      _isChecked = value;
    });
  },
)

В этой статье мы рассмотрели несколько способов добавления метки или текста заголовка к флажку во Flutter. Мы обсудили использование виджета Row, виджета ListTile, виджета CheckboxListTile и создания собственного виджета. В зависимости от ваших требований вы можете выбрать метод, который лучше всего соответствует вашим потребностям. Добавляя метки к флажкам, вы можете улучшить взаимодействие с пользователем и предоставить лучший контекст для представленных вариантов.

Реализуя эти методы, вы можете создавать более интуитивно понятные и удобные пользовательские интерфейсы в своих приложениях Flutter.

Не забудьте импортировать необходимые пакеты и настроить код в соответствии с вашими потребностями.

Удачного программирования!