Делегирование дизайна виджета
Привет, Flutter-разработчики! 👋 Сегодня мы рассмотрим полезный паттерн проектирования - делегирование дизайна виджета с использованием широко известного паттерна builder. 📈

Когда это полезно? 🤔
Вы создаете виджет списка радиокнопок или чекбоксов, например. И вы не хотите предоставлять дизайн каждого элемента списка. В таком случае вы создаете Item builder, который будет делегировать создание дочерних элементов. 📝

// Определяем тип OptionBuilder для построения элемента из ключа и состояния выбранности
typedef OptionBuilder = Widget Function(String key, bool selected);

// Определяем тип OnValidate для функции валидации
typedef OnValidate = void Function(String? key);

class RadioQuestion extends ConsumerStatefulWidget {
  // ...
  final OptionBuilder optionBuilder; // Делегируем построение элемента списка
  final OnOptionIdSelected? onOptionIdSelected;
  final OnValidate? onValidate;

  const RadioQuestion({
    super.key,
    required this.optionBuilder,
    this.onOptionIdSelected,
    this.onValidate,
    // ...
  });

  @override
  ConsumerState<RadioQuestion> createState() => _RadioQuestionState();
}

class _RadioQuestionState extends State<RadioQuestion> {
  int? _selectedIndex;

  @override
  void initState() {
    _selectedIndex = widget.initialSelectedIndex;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return List.generate(
      widget.itemCount,
      (index) => widget.optionBuilder(widget.keys[index], _selectedIndex == index),
    );
  }
}

В этом примере мы используем OptionBuilder для делегирования построения элементов списка. Это позволяет нам создать гибкий и переиспользуемый виджет. 🔄

Оцените новую рубрику и напишите в комментариях, что вы думаете о ней! 💬 Все подобные новости можно найти по хэштегу #FlutterPulseTips. 👀

#flutter #dart #flutterpulse #FlutterPulseTips #refactoring #widgetdesign #builderpattern #mobiledevelopment #codingtips

Делегирование дизайна виджета с помощью Фабрик
Delegate widget design with Factories

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

Когда это полезно?
Вы создаете выбираемый список элементов. Вы можете создать фабрику радиокнопок или чекбоксов.

Пример реализации:

1. Определите абстрактный класс фабрики, например, SelectableFactory:

abstract class SelectableFactory {
  const SelectableFactory();

  @factory
  Widget create({
    final String title,
    final bool selected
  });
}

2. Создайте конкретные реализации фабрики, такие как SelectableRadioFactory:

class _SelectableRadioFactory extends SelectableFactory {
  @override
  Widget create({
    final String title,
    final bool selected
  }) {
    // Создайте ваш виджет здесь
    return ListTile(...);
  }
}

3. Определите статические экземпляры фабрик для дальнейшего использования:

abstract class SelectableFactory {
  static const SelectableFactory radio = _SelectableRadioFactory();
  static const SelectableFactory checkbox = _SelectableCheckBoxFactory();
  ...
}

4. Используйте фабрику для построения части вашего виджета:

AnchoredHelper(
  title: const Text(
    'Нажми чтобы увеличить',
    textAlign: TextAlign.center,
    style: TextStyle(
      color: Colors.white,
      fontSize: 32,
    ),
  ),
  widgetFactory: AnchoredCircleHoleHelper.anchorFactory,
);

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

Оцените новую рубрику и напишите своё мнение! 🤔💬

Все подобные новости можно найти по хэштегу #FlutterPulseTips

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #WidgetDesign #Factories #Refactoring #CodingTips #UI/UX