Функции или классы для создания многократно используемых виджетов во Flutter?

Небольшая заметка о том, что лучше использовать и в чем разница между функциями и классами для создания многократно используемых виджетов во Flutter.

Для создания отдельного виджета можно использовать как функцию, так и класс. Каждый подход имеет свои особенности.

1. Функция-виджет

Преимущества:

• Если виджет короткий и не требует дополнительной логики (например, состояния), функцию можно использовать для упрощения кода.

Пример с функцией:

Widget codeWidget(TextEditingController codeController, VoidCallback onConfirm) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      const Text(
        'Код отправлен! Проверьте ваш телефон.',
        style: TextStyle(color: Colors.green),
      ),
      const SizedBox(height: 10),
      TextField(
        controller: codeController,
        decoration: const InputDecoration(labelText: 'Введите код'),
      ),
      const SizedBox(height: 10),
      ElevatedButton(
        onPressed: onConfirm,
        child: const Text('Подтвердить'),
      ),
    ],
  );
}

2. Класс-виджет

Преимущества:

• Используется, когда виджет более сложный, требует хранения состояния или более удобен в случае переработки/расширения логики.
• Такой подход позволяет добавлять больше функционала, например, управление состоянием, обработку событий и т.д.
• Легче тестировать.

Пример с классом-виджетом:

class CodeWidget extends StatelessWidget {
  final TextEditingController codeController;
  final VoidCallback onConfirm;

  const Code({
    super.key,
    required this.codeController,
    required this.onConfirm,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          'Код отправлен! Проверьте ваш телефон.',
          style: TextStyle(color: Colors.green),
        ),
        const SizedBox(height: 10),
        TextField(
          controller: codeController,
          decoration: const InputDecoration(labelText: 'Введите код'),
        ),
        const SizedBox(height: 10),
        ElevatedButton(
          onPressed: onConfirm,
          child: const Text('Подтвердить'),
        ),
      ],
    );
  }
}

Разница между этими подходами:

Функция-виджет:

• Хорошо подходит для простых, одноразовых виджетов, где не требуется сложная логика.
• Легче использовать, но не предоставляет возможности для хранения состояния или других методов.

Класс-виджет:

• Рекомендуется использовать для более сложных виджетов, которые могут требовать дополнительной логики или состояния.
• Легче расширять и управлять состоянием (например, добавлять методы, статические данные, дополнительные параметры).

Рекомендации разработчиков Flutter:

Команда Flutter теперь заняла официальную позицию по этому вопросу и заявила, что классы предпочтительнее.

Посмотрите видео на официальном Ютуб канале Флаттер https://www.youtube.com/watch?v=IOyq-eTRhvo