Увеличение скорости с самого начала
Повышение уровня флаттера
В этом списке историй я помогу вам улучшить свой уровень Flutter. Этот список будет вам полезен, если вы знакомы с основами разработки приложений на Flutter и хотите улучшить свои другие навыки.
Ознакомьтесь со списком Flutter Level UP на моей странице и следите за будущими историями.
Что такое композиция?
Композиция — это общий шаблон разработки для таких UI-фреймворков, как React, Angular, а теперь и Flutter. Есть много причин, по которым этот шаблон долгое время был популярен среди разработчиков пользовательского интерфейса.
Кратко рассмотрим преимущества этого шаблона:
- Повторно используемые компоненты/виджеты: это может быть основной целью композиции. Вы можете увидеть это и по другим преимуществам. Создавая многоразовые виджеты, вы сэкономите много ресурсов разработки, предотвратив дублирование кода.
- Единая ответственность: следуя шаблону композиции, вы можете начать разбивать большой виджет на маленькие виджеты, в которых каждая часть играет только свою роль и переходит к следующему виджету.
- Сопровождаемый: следуя этому шаблону, ваш код будет открыт для расширения и близок к модификации. Например, чтобы изменить часть приложения, вам не нужно изменять виджет, вы должны создать новый виджет и заменить старые.
Композиция во Flutter
Одна из первых вещей, которые вы всегда слышите о Flutter: «Во Flutter все является виджетом». В такой среде шаблон композиции может быть даже полезнее, чем другие. Мы можем создавать небольшие виджеты, которые будут объединяться в дерево виджетов для создания определенного пользовательского интерфейса.
Мы можем увидеть шаблон композиции в основах фреймворка Flutter. Если у вас есть хотя бы небольшой опыт работы с Flutter, вы всегда их видели. Все виджеты, такие как контейнер, отступы, строки и столбцы, создаются на основе этого шаблона.
Теперь пришло время прекратить заниматься теорией и заняться кодированием. На следующих шагах я собираюсь разделить композиции во Flutter на две разные группы и постараться иметь примеры для каждой из них.
Композиция сверху вниз
Я использовал это имя, потому что в этом типе композиции дочерние виджеты зависят от своих родителей. Этот тип композиции обычно используется для передачи некоторых данных от родителя к дочернему элементу. Некоторые из хорошо известных виджетов, вписывающихся в эту группу, — StreamBuilder, InheritedWidget и FutureBuilder.
Теперь давайте напишем виджет, который предоставляет данные пользователя для своих дочерних элементов. Прежде всего, давайте создадим файл UserModel.
Затем мы должны создать виджет, который предоставляет эти данные своим дочерним элементам.
Здесь вы можете видеть, что UserDataProviderWidget загружает данные пользователя из некоторых файлов и передает их с помощью функции builder своему дочернему элементу. Некоторые из хороших результатов заключаются в том, что наш виджет не зависит от своего дочернего элемента, и дочерний элемент не имеет ни малейшего понятия, откуда берутся эти данные.
Поэтому, если в будущем мы захотим получать данные из базы данных, а не из сети, мы можем модифицировать этот виджет или создать для него отдельный виджет. Поэтому его дочерний элемент не нужно изменять.
Наконец, пришло время использовать этот виджет и предоставить пользовательские данные его дочерним элементам. Вот код:
Здесь у нас есть UserNameWidget, который показывает полное имя пользователя.
Композиция сверху вниз
Мне нравится называть его этим именем, потому что это помогает детям выполнить свою работу в дереве виджетов и перейти наверх. В этом потоке ребенок не зависит от своего родителя. Ребенок ничего не знает о своем родителе и просто играет его роль. Большинство встроенных виджетов Flutter используют этот тип композиции, например Container, Padding и SizedBox.
Распространенным вариантом использования этого типа виджетов является случай, когда мы хотим добавить что-то для всех виджетов, которые являются дочерними элементами нашего основного виджета.
Здесь я собираюсь создать виджет, который сделает все его дочерние элементы серыми. Этому виджету не нужно ничего знать о своем родителе. После того, как его дочерний элемент построен, он становится серым и передается родителю.
Теперь давайте добавим виджет изображения в качестве дочернего элемента, чтобы увидеть результат.
Заключение
Flutter обычно выбирают растущие компании/стартапы из-за его высокой скорости в процессе разработки. Но это не должно быть причиной того, что мы пишем любой код в любом месте только для того, чтобы поддерживать вашу скорость.
Композиция — это шаблон, который может снизить вашу скорость в начале, если вы к нему не привыкли, но в долгосрочной перспективе он увеличит вашу скорость за счет повторного использования компонентов. Даже после создания кучи виджетов вам будет проще создать новый виджет, тогда вы увидите, что он не снижает вашу скорость в начале.
Шаблоны дизайна виджетов Flutter
Состав виджета — это один из шаблонов проектирования во Flutter. Изучив другие шаблоны, вы сможете сравнить их и выбрать лучшее решение для вашей проблемы. Ознакомьтесь с шаблонами проектирования Flutter в этой статье, чтобы узнать больше о шаблонах и сравнить их между собой.
Спасибо, что прочитали. Оставайтесь с нами, чтобы узнать больше. Подпишитесь и ознакомьтесь с разделом Flutter Level UP для будущих статей на эту тему
