Декомпозиция виджетов — это процесс разделения сложного виджета на более простые и независимые компоненты.
Зачем это нужно?
▫️ Упрощение кода: когда разделяешь виджеты на более мелкие компоненты, код становится более понятным и легким для восприятия
▫️ Повторное использование: мелкие виджеты можно использовать в разных частях приложения, что снижает дублирование кода
▫️ Улучшение производительности: использование отдельных виджетов позволяет более эффективно управлять состоянием и перерисовкой интерфейса
▫️ Тестируемость: мелкие виджеты легче тестировать, что способствует созданию более надежного кода
Виды декомпозирования
1. Использование билд-методов
Вынесение частей виджета в отдельные методы внутри того же класса.
class ProductCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Card(
child: Column(
children: [
_buildTitle(),
_buildPrice(),
],
),
);
}
Widget _buildTitle() { ... }
Widget _buildPrice() { ... }
}
✅ Маленький плюсик:
Мало кода — не требует создания новых классов
❌ Минусы:
▫️Нет переиспользуемости — методы привязаны к конкретному виджету
▫️Сложность тестирования — нельзя протестировать отдельно от родителя
▫️Риск создания «метод-супов» — чрезмерное количество методов ухудшает читаемость
▫️Ухудшает производительность — каждый setState в таком методе будет полностью перерисовывать виджет
2. Разделение на Stateful и Stateless виджеты
Выделение логики с состоянием в отдельные StatefulWidget, а статичной верстки — в StatelessWidget.
// Stateful часть
class Counter extends StatefulWidget {
@override
_CounterState createState() => _CounterState();
}
class _CounterState extends State<Counter> {
int count = 0;
void increment() => setState(() => count++);
@override
Widget build(BuildContext context) {
return CounterView(
count: count,
onIncrement: increment,
);
}
}
// Stateless часть
class CounterView extends StatelessWidget {
// Логика
}
✅ Плюсы:
▫️Четкое разделение ответственности — состояние отделено от представления
▫️Упрощенное тестирование — Stateless-часть можно тестировать без состояния
▫️Повышенная производительность — Stateless-виджеты не перестраиваются без необходимости
▫️Гибкость — можно менять состояние без изменения UI и наоборот
❌ Минусы:
Больше кода — требуется создание дополнительных классов
Если заметили, то плюсы и минусы у этих вариантов противоположны.
📎Есть классное короткое видео от Flutter-команды, рекомендую посмотреть его.