Во Flutter ListTile — это часто используемый виджет для создания списков с различным содержимым. Когда дело доходит до использования переключателей в ListTiles, вы можете настроить их внешний вид, включая цвет. В этой статье мы рассмотрим несколько методов достижения такой настройки, сопровождаемые разговорными объяснениями и примерами кода.

Метод 1. Использование свойства activeColor
Самый простой способ настроить цвет переключателя — использовать свойство activeColorвиджета Radio в ListTile. Вы можете установить для него любой цвет, который пожелаете. Вот пример:

ListTile(
  title: Text('Option 1'),
  leading: Radio(
    value: 1,
    groupValue: selectedValue,
    onChanged: (value) {
      setState(() {
        selectedValue = value;
      });
    },
    activeColor: Colors.blue, // Set the color here
  ),
),

Метод 2. Создание пользовательского виджета «Радио».
Если вам нужен больший контроль над внешним видом переключателя, вы можете создать собственный виджет «Радио». Это позволяет вам определить цвет и другие свойства. Вот пример:

class CustomRadio extends StatelessWidget {
  final Color color;
  final bool value;
  final Function onChanged;
  CustomRadio({required this.color, required this.value, required this.onChanged});
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 24.0,
      height: 24.0,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: color,
      ),
      child: Radio(
        value: value,
        groupValue: selectedValue,
        onChanged: onChanged,
        activeColor: Colors.transparent,
      ),
    );
  }
}
// Usage:
ListTile(
  title: Text('Option 1'),
  leading: CustomRadio(
    color: Colors.blue, // Set the color here
    value: 1,
    onChanged: (value) {
      setState(() {
        selectedValue = value;
      });
    },
  ),
),

Метод 3. Использование пользовательского виджета RadioListTile.
Другой подход заключается в создании пользовательского виджета RadioListTile, который инкапсулирует ListTile и пользовательский переключатель. Это позволяет использовать более повторное решение. Вот пример:

class CustomRadioListTile extends StatelessWidget {
  final Color color;
  final String title;
  final bool value;
  final Function onChanged;
  CustomRadioListTile({required this.color, required this.title, required this.value, required this.onChanged});
  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title),
      leading: Container(
        width: 24.0,
        height: 24.0,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: color,
        ),
        child: Radio(
          value: value,
          groupValue: selectedValue,
          onChanged: onChanged,
          activeColor: Colors.transparent,
        ),
      ),
    );
  }
}
// Usage:
CustomRadioListTile(
  color: Colors.blue, // Set the color here
  title: 'Option 1',
  value: 1,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
),

Метод 4: применение темы к ListTile
Flutter позволяет применять темы к вашим виджетам, включая ListTiles. Определив тему, вы можете настроить цвет переключателя для всех элементов ListTiles в вашем приложении. Вот пример:

MaterialApp(
  theme: ThemeData(
    radioTheme: RadioThemeData(
      fillColor: MaterialStateProperty.all(Colors.blue), // Set the color here
    ),
  ),
  home: MyHomePage(),
);

Метод 5: использование пользовательской темы ListTileTheme
Подобно применению темы вы можете создать собственный виджет ListTileTheme и обернуть в него свои ListTiles. Это позволяет вам настроить цвет переключателя специально для ваших ListTiles. Вот пример:

ListTileTheme(
  tileColor: Colors.transparent,
  contentPadding: EdgeInsets.zero,
  selectedColor: Colors.blue, // Set the color here
  child: ListTile(
    title: Text('Option 1'),
    leading: Radio(
      value: 1,
      groupValue: selectedValue,
      onChanged: (value) {
        setState(() {
          selectedValue = value;
        });
      },
    ),
  ),
),

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

RadioListTileTheme(
  tileColor: Colors.blue, // Set the color here
  child: RadioListTile(
    title: Text('Option 1'),
    value: 1,
    groupValue: selectedValue,
    onChanged: (value) {
      setState(() {
        selectedValue = value;
      });
    },
  ),
),

Метод 7. Использование данных пользовательской темы.
Наконец, вы можете создать собственный ThemeData и установить свойство PrimaryColor, чтобы настроить цвет переключателя для всех элементов ListTiles в вашем приложении. Вот пример:

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.blue, // Set the color here
  ),
  home: MyHomePage(),
);

В этой статье мы рассмотрели семь различных методов настройки цвета переключателей в виджете ListTile Flutter. От использования простых свойств, таких как activeColor, до создания пользовательских виджетов и тем — у вас есть целый ряд возможностей для достижения желаемого внешнего вида. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует вашим потребностям, чтобы создавать потрясающие и персонализированные элементы ListTiles в вашем приложении Flutter.