Делегирование дизайна виджета
Привет, Flutter-разработчики! 👋 Сегодня мы рассмотрим полезный паттерн проектирования - делегирование дизайна виджета с использованием широко известного паттерна builder. 📈
Когда это полезно? 🤔
Вы создаете виджет списка радиокнопок или чекбоксов, например. И вы не хотите предоставлять дизайн каждого элемента списка. В таком случае вы создаете Item builder, который будет делегировать создание дочерних элементов. 📝
В этом примере мы используем OptionBuilder для делегирования построения элементов списка. Это позволяет нам создать гибкий и переиспользуемый виджет. 🔄
Оцените новую рубрику и напишите в комментариях, что вы думаете о ней! 💬 Все подобные новости можно найти по хэштегу #FlutterPulseTips. 👀
#flutter #dart #flutterpulse #FlutterPulseTips #refactoring #widgetdesign #builderpattern #mobiledevelopment #codingtips
Привет, 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
👏4❤1
June 17
Заменить код типа на объединенный тип
Удаление кода типа из вашего класса с помощью объединенного типа
Представьте, что у вас есть класс, который ведёт себя по-разному в зависимости от своего состояния. Вместо того, чтобы использовать перечисления (enum) и конструкции
Было:
Стало:
Использование:
Преимущества:
• Инкапсуляция кода типа в отдельные классы
• Для каждого типа создается свой подкласс
• Разная логика для разных типов без использования
• Код становится более читаемым и тестируемым
Оцените новую рубрику! 💡📱 Ваши отзывы нам очень важны! 😊
Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #Refactoring #CodingTips #SoftwareDevelopment #ProgrammingTips
Удаление кода типа из вашего класса с помощью объединенного типа
Представьте, что у вас есть класс, который ведёт себя по-разному в зависимости от своего состояния. Вместо того, чтобы использовать перечисления (enum) и конструкции
switch
для определения поведения, вы можете использовать новую возможность Dart 3 — sealed классы. Это делает код чище, безопаснее и проще в поддержке.Было:
enum DocumentType {
pdf,
doc,
markdown,
}
class Document {
final String name;
final DocumentType type;
Document({
required this.name,
required this.type,
});
void write(String newLine) {
switch (type) {
case DocumentType.pdf:
// предположим, что у нас есть библиотека для pdf
break;
case DocumentType.doc:
// предположим, что у нас есть библиотека для doc
break;
case DocumentType.markdown:
// предположим, что у нас есть библиотека для markdown
break;
}
}
}
Стало:
sealed class DocumentSealed {
final String name;
DocumentSealed({required this.name});
}
class PdfDocument extends DocumentSealed {
PdfDocument({required super.name});
void write(String newLine) {
// используем библиотеку для pdf
}
}
class DocDocument extends DocumentSealed {
DocDocument({required super.name});
void write(String newLine) {
// используем библиотеку для doc
}
}
class MarkdownDocument extends DocumentSealed {
MarkdownDocument({required super.name});
void write(String newLine) {
// используем библиотеку для markdown
}
}
Использование:
class Widget extends StatelessWidget {
final DocumentSealed document;
const Widget({super.key, required this.document});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
switch (document) {
case PdfDocument _:
document.write('Hello World');
case DocDocument _:
document.write('Hello World');
case MarkdownDocument _:
document.write('Hello World');
}
},
child: Text(document.name),
);
}
}
Преимущества:
• Инкапсуляция кода типа в отдельные классы
• Для каждого типа создается свой подкласс
• Разная логика для разных типов без использования
switch
• Код становится более читаемым и тестируемым
Оцените новую рубрику! 💡📱 Ваши отзывы нам очень важны! 😊
Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #Refactoring #CodingTips #SoftwareDevelopment #ProgrammingTips
June 18
Делегирование дизайна виджета с помощью Фабрик
Delegate widget design with Factories
При создании выбираемого списка элементов, например, вы можете создать фабрику радиокнопок или чекбоксов. Фабрики позволяют определить готовый дизайн или поведение виджетов заранее.
Когда это полезно?
Вы создаете выбираемый список элементов. Вы можете создать фабрику радиокнопок или чекбоксов.
Пример реализации:
1. Определите абстрактный класс фабрики, например,
2. Создайте конкретные реализации фабрики, такие как
3. Определите статические экземпляры фабрик для дальнейшего использования:
4. Используйте фабрику для построения части вашего виджета:
Это позволяет создавать готовые функции построения. Разработчики могут создавать свои собственные фабрики, а также использовать предустановленные.
Оцените новую рубрику и напишите своё мнение! 🤔💬
Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #WidgetDesign #Factories #Refactoring #CodingTips #UI/UX
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
👍1
June 20
Привет, коллеги! 👋 Представьте: вы приходите на проект, а там — монстр на 700 строк кода в одном StatefulWidget. 😱 Нужно добавить фичу, но любое изменение ломает код в неожиданных местах... Знакомо?
Автор видео на живом примере показывает, как декомпозировать такого "монстра"! Уже через 20 минут вы научитесь:
🎯 Избавляться от side-эффектов при изменении кода
🎯 Упрощать добавление новых фич
🎯 Создавать поддерживаемую архитектуру
🔧 7 шагов декомпозиции:
1️⃣ Выносим методы из StatefulWidget в отдельный класс
2️⃣ Переносим поля состояния в отдельный объект
3️⃣ Декомпозируем методы бизнес-логики
4️⃣ Внедряем ChangeNotifier + ListenableBuilder
5️⃣ Заменяем методы стейта на вызовы нового класса
6️⃣ Разбиваем UI на компоненты
7️⃣ Внедряем InheritedWidget для передачи состояния
💡 В видео — наглядный пример со счётчиком (и готовый репозиторий с кодом!). А в завтра видео второй части — разбор сложных кейсов!
👇 Поддержите автора:
👍 Лайк — если полезно
💙 А вы уже подписаны на @FlutterPulse? Смотрите другие видео по тегу #FlutterPulseYoutube
#Flutter #Dart #FlutterPulse #FlutterPulseTips #Refactoring #CleanCode #FlutterArchitecture #StatefulWidget #ComponentBasedUI
Автор видео на живом примере показывает, как декомпозировать такого "монстра"! Уже через 20 минут вы научитесь:
🎯 Избавляться от side-эффектов при изменении кода
🎯 Упрощать добавление новых фич
🎯 Создавать поддерживаемую архитектуру
🔧 7 шагов декомпозиции:
1️⃣ Выносим методы из StatefulWidget в отдельный класс
2️⃣ Переносим поля состояния в отдельный объект
3️⃣ Декомпозируем методы бизнес-логики
4️⃣ Внедряем ChangeNotifier + ListenableBuilder
5️⃣ Заменяем методы стейта на вызовы нового класса
6️⃣ Разбиваем UI на компоненты
7️⃣ Внедряем InheritedWidget для передачи состояния
💡 В видео — наглядный пример со счётчиком (и готовый репозиторий с кодом!). А в завтра видео второй части — разбор сложных кейсов!
👇 Поддержите автора:
👍 Лайк — если полезно
💙 А вы уже подписаны на @FlutterPulse? Смотрите другие видео по тегу #FlutterPulseYoutube
#Flutter #Dart #FlutterPulse #FlutterPulseTips #Refactoring #CleanCode #FlutterArchitecture #StatefulWidget #ComponentBasedUI
July 23
🚀 Не используй StatefulWidget, пока не посмотришь это видео! Часть 2
🔥 Твой Flutter-код превращается в монолитного Франкенштейна? 🔥 Автор нового видео наглядно показывает, почему гигантские StatefulWidget'ы — это бомба замедленного действия 💣:
⚠️ Закидывая всё в один StatefulWidget, вы:
• Стреляете себе в ногу 🤯
• Обрекаете на ад мердж-конфликтов 😱
• Получаете side-эффекты в неожиданных местах
🎯 В этом туториале Руслан разбирает реальный сложный экран (не абстрактный счётчик!) и показывает универсальные шаги декомпозиции:
🔧 7 шагов к спасению кода:
1️⃣ Выносим методы из State в отдельные функции
2️⃣ Создаём класс-модель для состояния
3️⃣ Переносим логику в модель
4️⃣ Подключаем ChangeNotifier + ListenableBuilder
5️⃣ Заменяем setState на вызовы методов модели
6️⃣ Дробим на компоненты с передачей модели
7️⃣ Внедряем InheritedWidget + const виджеты
💡 Ключевой принцип: после каждого шага функциональность должна сохраняться! Автор аккуратно демонстрирует рефакторинг "на живом примере" с:
• Обработкой изображений 📸
• Диалоговыми окнами
• Динамическим обновлением данных
👉 СМОТРЕТЬ ВИДЕО С ПРИМЕРАМИ КОДА 👈
💬 "В завтрашнем ролике: почему структура папок ≠ архитектура, и как разделить приложение на слои!"
✨ Подписывайтесь и смотрите другие кейсы по хэштегу #FlutterPulseYoutube!
#Flutter #Dart #FlutterPulse #FlutterPulseTips #FlutterPulseYoutube #Refactoring #CleanCode #FlutterArchitecture #StatefulWidget #ComponentBasedUI
🔥 Твой Flutter-код превращается в монолитного Франкенштейна? 🔥 Автор нового видео наглядно показывает, почему гигантские StatefulWidget'ы — это бомба замедленного действия 💣:
• Стреляете себе в ногу 🤯
• Обрекаете на ад мердж-конфликтов 😱
• Получаете side-эффекты в неожиданных местах
🎯 В этом туториале Руслан разбирает реальный сложный экран (не абстрактный счётчик!) и показывает универсальные шаги декомпозиции:
🔧 7 шагов к спасению кода:
1️⃣ Выносим методы из State в отдельные функции
2️⃣ Создаём класс-модель для состояния
3️⃣ Переносим логику в модель
4️⃣ Подключаем ChangeNotifier + ListenableBuilder
5️⃣ Заменяем setState на вызовы методов модели
6️⃣ Дробим на компоненты с передачей модели
7️⃣ Внедряем InheritedWidget + const виджеты
💡 Ключевой принцип: после каждого шага функциональность должна сохраняться! Автор аккуратно демонстрирует рефакторинг "на живом примере" с:
• Обработкой изображений 📸
• Диалоговыми окнами
• Динамическим обновлением данных
👉 СМОТРЕТЬ ВИДЕО С ПРИМЕРАМИ КОДА 👈
💬 "В завтрашнем ролике: почему структура папок ≠ архитектура, и как разделить приложение на слои!"
✨ Подписывайтесь и смотрите другие кейсы по хэштегу #FlutterPulseYoutube!
#Flutter #Dart #FlutterPulse #FlutterPulseTips #FlutterPulseYoutube #Refactoring #CleanCode #FlutterArchitecture #StatefulWidget #ComponentBasedUI
July 24
🔥 Почему твой Flutter UI лагает и как это пофиксить? Часть 1. Смотри разбор!
Привет, Flutter-энтузиасты! ✨ Только что наткнулся на суперполезное видео, которое раз и навсегда закрывает больную тему — лаги интерфейса. Если твой UI тормозит, а FPS прыгает — это must-watch! 🚀
👉 СМОТРЕТЬ ВИДЕО
Автор (Руслан) наглядно разбирает:
🔹 Как искать узкие места через Flutter DevTools (вкладка Performance)
🔹 Почему виджеты-«монстры» убивают FPS и как их декомпозировать
🔹 Магию
🔹 Реальные примеры: от 37 мс лагов до плавного UI
💡 Особенно полезно, если ты:
- Не понимаешь, почему интерфейс фризит
- Хочешь научиться делать замеры производительности
- Не веришь, что
📌 Это часть цикла про архитектуру Flutter! Завтра, кстати, вторая часть
💬 Поддержи канал:
👍 Лайк — если полезно!
#Flutter #Dart #FlutterPulse #FlutterPulseTips #FlutterPulseYoutube #Refactoring #CleanCode #FlutterArchitecture #StatefulWidget #ComponentBasedUI #fluttertutorial
P.S. Больше лайфхаков — по хэштегу #FlutterPulseYoutube! Подписывайся на @flutterpulse, если хочешь глубже разбирать Flutter 🔥
Привет, Flutter-энтузиасты! ✨ Только что наткнулся на суперполезное видео, которое раз и навсегда закрывает больную тему — лаги интерфейса. Если твой UI тормозит, а FPS прыгает — это must-watch! 🚀
👉 СМОТРЕТЬ ВИДЕО
Автор (Руслан) наглядно разбирает:
🔹 Как искать узкие места через Flutter DevTools (вкладка Performance)
🔹 Почему виджеты-«монстры» убивают FPS и как их декомпозировать
🔹 Магию
const
— как одна правка ускоряет рендеринг в разы! 🔹 Реальные примеры: от 37 мс лагов до плавного UI
💡 Особенно полезно, если ты:
- Не понимаешь, почему интерфейс фризит
- Хочешь научиться делать замеры производительности
- Не веришь, что
const
— не просто «совет» 😉 📌 Это часть цикла про архитектуру Flutter! Завтра, кстати, вторая часть
💬 Поддержи канал:
👍 Лайк — если полезно!
#Flutter #Dart #FlutterPulse #FlutterPulseTips #FlutterPulseYoutube #Refactoring #CleanCode #FlutterArchitecture #StatefulWidget #ComponentBasedUI #fluttertutorial
P.S. Больше лайфхаков — по хэштегу #FlutterPulseYoutube! Подписывайся на @flutterpulse, если хочешь глубже разбирать Flutter 🔥
July 26