Введения в Flutter Framework
Привет, если вы на пути изучения Flutter/Dart или вам просто интересно почитать про разработку подписывайтесь на мой канал в telegram, буду рад вас видеть! А сегодня поговорим про тестовые примеры в DART-е!
Предыдущая статья: Тестовые примеры DART | Часть 2
В этой статье мы начнем наше путешествие с фреймворка Flutter и сосредоточимся на некоторых основах Flutter.
На мой взгляд, лучшее место для создания приложения Flutter - это схема того, как ваше приложение будет выглядеть и работать. Если вы имеете опыт работы с дизайном, возможно, вам больше знаком термин wireframe.. В любом случае мы хотим создать репрезентативную версию дизайна приложения.
Как только вы освоитесь с созданием интерфейсов с помощью Flutter, хороший источник вдохновения можно будет найти на таких сайтах, как dribbble.com. Обычно я просматриваю сайты, подобные этому, чтобы выяснить, как можно объединить дизайн, а затем отобразить требования с помощью серии изображений (т.е. каркасов).
Команда Flutter вас поддержит, поскольку они предоставляют широкий спектр шаблонов, которые помогут вам приступить к написанию вашего приложения. Как только у вас будет начальный код, пришло время понять разницу между виджетами с сохранением состояния и без него, что будет постоянным вопросом при разработке ваших проектов. К счастью, способность Flutter создавать все более сложные интерфейсы означает, что эти временные вложения действительно окупаются.
Когда мы говорим о Flutter, нам действительно нужно понимать виджеты и то, как они используются для рендеринга экранных компонентов. Мы начнем с обсуждения макетирования интерфейса и создания шаблонного приложения Flutter, прежде чем определять, что такое виджет; затем мы рассмотрим, как виджеты используются для создания пользовательского интерфейса. Наконец, у нас есть краткое обсуждение древовидной структуры виджета, чтобы завершить наше понимание структуры, используемой в Flutter для представления взаимодействия между компонентами.
Имитация интерфейса приложения
Проблема
Вам нужен способ имитировать интерфейс, чтобы понять макет, прежде чем создавать приложение Flutter.
Решение
Используйте графический пакет для разработки вашего приложения. Создание каркаса вашего приложения может помочь упростить работу приложения.
Вот несколько примеров пакетов, которые могут быть полезны, в зависимости от вашего бюджета и варианта использования:
Обсуждение
Имитация интерфейса - отличный способ начать работу с таким визуальным фреймворком, как Flutter. Существует множество способов разработки интерфейса, начиная от бесплатных онлайн-инструментов и заканчивая специализированными приложениями, специально созданными для Flutter.
При создании макета приложения я стремлюсь отобразить интерфейс с точки зрения используемых виджетов. Это упрощает создание определенных дизайнов. Если вы имеете дело с более сложными дизайнами, понимание требований приложения приводит к более чистому интерфейсу и эстетике дизайна.
На рисунке 7-1 приведен пример вывода с помощью Excalidraw первого созданного мной приложения Flutter.
На диаграмме я включаю функциональность, т.е. две страницы и панель навигации. Я также отмечаю, как должны были работать переходы по экрану. Разбор интерфейса - хороший способ узнать, как взаимодействуют различные виджеты. Кроме того, изучение правильной терминологии для виджетов и т.д. помогает найти подходящее решение. Хотя приложение не очень сложное, оно помогло мне изучить основы создания виджетов с помощью Flutter.
Из диаграммы вы должны знать, что этот тип интерфейса очень распространен среди приложений Flutter. Важно научиться использовать такие виджеты, как ListView, текст и изображения, а также управлять жестами и навигацией.
Создание шаблонного проекта Flutter
Проблема
Вы хотите создать новое приложение Flutter на основе шаблона.
Решение
Используйте шаблон Flutter для запуска вашего приложения. Вам не нужно начинать с нуля, поскольку Flutter предоставляет целый ряд шаблонов приложений. Доступно несколько различных шаблонов, которые обеспечивают базовую настройку.
В более поздних версиях Flutter framework была проделана работа по предоставлению некоторых многофункциональных примеров. Используйте этот стандартный код, чтобы улучшить свои навыки и понимание распространенных шаблонов использования от экспертов.
Вот несколько шаблонов, доступных в Flutter framework, которые помогут вам начать:
Добавив команду template, т.е. --template или -t, вы можете указать Flutter, что шаблон должен быть применен при создании. Ниже приведены некоторые примеры использования шаблонов.
Для создания типа приложения по умолчанию:
flutter create my_awesome_app
Чтобы создать модуль:
flutter create -t module my_awesome_module
Чтобы создать пакет:
flutter create -t package my_awesome_package
Для создания плагина:
flutter create -t plugin my_awesome_plugin --platforms web --platform android
При создании подключаемого модуля необходимо указать поддерживаемую платформу. Для каждой добавляемой платформы требуется добавление префикса --platform.
Чтобы создать skeleton:
flutter create -t skeleton my_awesome_skeleton
Обсуждение
В показанных примерах вы заметите, что инструмент Flutter предоставляет множество шаблонного кода, который поможет вам начать работу. Центральным элементом этой задачи является команда flutter create, которая предназначена для того, чтобы позволить вам указать тип генерируемого кода, например, модуль, пакет, подключаемый модуль.
У Flutter create также есть опция, которую можно применить для генерации кода в автономном режиме. Чтобы использовать эту опцию, просто введите flutter create --offline [action]. Я нахожу эту опцию очень удобной при работе в среде с плохим подключением к Интернету. Ваш пробег может варьироваться в зависимости от этой опции, так как для этого требуется наличие кэша pub, и я видел, что он иногда выходит из строя при работе в Android Studio.
Когда вы создаете проект на основе шаблона, вы должны учитывать устройство, доступное в данный момент на вашем компьютере. В дополнение к шаблонам вы также можете ссылаться на примеры кода с веб-сайта документации по API. Чтобы использовать код с сайта, вам необходимо указать идентификатор образца, расположенный на странице, на которой будет использоваться виджет. В следующем примере код можно найти на веб-странице класса GestureDetector:
flutter create -s widgets.GestureDetector.1 my_awesome_sample
Доступны образцы, обеспечивающие быстрый доступ к множеству контента, доступного в Интернете. Как разработчик, я лично рекомендую ориентироваться на Веб в дополнение к желаемой платформе хостинга. Включение веб имеет смысл, поскольку оно включает в себя очень эффективный метод тестирования приложений в браузере. Не говоря уже о том, что выполнять пошаговое тестирование в браузере очень быстро и просто. На этапе разработки такой подход, безусловно, может повысить скорость разработки как небольших, так и крупных улучшений.
Удаление баннера отладки Flutter
Проблема
Вам нужен способ удалить баннер отладки из вашего приложения Flutter.
Решение
Используйте debugShowCheckModeBanner, чтобы удалить баннер отладки, применяемый к приложениям Flutter.
Вот пример приложения Flutter, демонстрирующий, как отключить свойство debug:
Обсуждение
Пример кода демонстрирует, как удалить флаг отладки из вашего приложения.
debugShowCheckedModeBanner принимает логическое значение, указывающее, должно ли отображаться уведомление. В примере сообщение “Debug” отключается путем установки для свойства значения false.
Flutter имеет значение true по умолчанию, установленное для debugShowCheckedModeBanner. Разработчики должны явно установить это значение как false, чтобы удалить временный баннер из приложений. В следующей таблице приведены различные настройки для состояний приложения Debug и Release:
Параметр debugShowMaterialGrid обеспечивает наложение сетки для вашего приложения. Если вам необходимо решить проблему размещения отображаемого экрана, этот параметр полезно временно включить в вашем приложении. Свойством по умолчанию для этого параметра является значение false, поэтому вам нужно включать его только при необходимости. Чтобы использовать этот параметр, ваше приложение должно находиться в режиме отладки.
Распознавание виджетов
Проблема
Вы хотите понять, как Flutter использует виджеты для обеспечения согласованного представления на нескольких платформах.
Решение
Виджеты - это компоненты, представляющие экранные элементы, такие как текст, изображения и списки. Когда вы начинаете работать с Flutter, может быть непросто осознать тот факт, что большая часть кода представляет собой виджет.
Обсуждение
Особенность Flutter widgets в том, что их можно компоновать, что означает, что вы расширяете функциональность для создания новых виджетов. Возможность использовать существующие виджеты невероятно эффективна, поскольку вам не нужно прибегать к основным принципам и вы можете сразу приступить к использованию существующих компонентов.
Главное, что нужно помнить, это то, что класс widget - это неизменяемое описание пользовательского интерфейса, которое может быть расширено до элементов, связанных с деревом рендеринга. По большей части при создании пользовательского интерфейса вы будете использовать / комбинировать/создавать новые виджеты для обеспечения требуемой функциональности. Интересным аспектом этой работы является объединение существующих виджетов для достижения желаемого результата.
Понимание дерева виджетов
Проблема
Вы хотите понять, как Flutter использует дерево виджетов для создания пользовательского интерфейса.
Решение
Виджеты используются Flutter для создания представления в приложении. Объединение виджетов необходимо для создания богатых пользовательских интерфейсов, а связь между виджетами достигается с помощью древовидной структуры. Составляемое представление зависит от используемых виджетов и применяемого порядка.
Обсуждение
Как указано в названии, дерево виджетов создает взаимосвязи между используемыми компонентами. Типичное приложение Flutter будет основано на серии виджетов, как показано на рисунке 7-2.
На рисунке дерева виджетов мы можем видеть, что приложение Material представляет родительское приложение для приложения. Оттуда виджет Scaffold используется для перехода к дочерним приложениям, которые предоставляют различную функциональность.
Одним из наиболее важных аспектов разработки с помощью Flutter является рефакторинг вашего кода, чтобы он соответствовал дереву виджетов в вашем приложении. При запуске во Flutter нередко можно увидеть очень большие деревья виджетов, подобные изображенному на рисунке 7-2. Распространенным подходом является выделение контекста сборки (и, более конкретно, цикла рендеринга) для повышения общей производительности рендеринга виджета.
Повышение производительности рендеринга виджетов
Проблема
Вы хотите понять, как Flutter рендерит виджеты для создания более производительных приложений.
Решение
Виджеты Flutter являются частью цикла рендеринга, который используется для добавления различных компонентов на экран. Поскольку виджет может быть родительским для других виджетов, иногда может потребоваться создать контекст сборки для повышения производительности. Контекст сборки эффективно делегирует управление связанными виджетами.
Обсуждение
Если вы создадите очень сложную иерархию, поддержание таких отношений может оказаться дорогостоящим с точки зрения производительности приложения. Всякий раз, когда ваше приложение вызывается для отображения информации, оно будет пытаться определить, есть ли у него самая актуальная доступная информация или необходимо обновить.
На рисунке 7-3 цикл рендеринга будет отслеживать любое изменение состояния, связанное с виджетом. При обнаружении обновления вызывается перестройка связанного дерева виджетов для контекста сборки.
Если ваше дерево виджетов содержит большую иерархию, их потребуется перестроить, что может повлиять на общую производительность приложения. В частности, если вы также включаете состояние в контекст сборки, это одно из наиболее распространенных узких мест в разработке Flutter. Выделение состояния в небольшой контекст сборки значительно повысит общую производительность, поскольку изменение состояния будет локализовано только в соответствующем виджете, а не во всем дереве виджетов.