Первые шаги в мобильной разработке с Flutter

На фреймворке Flutter создают кроссплатформенные приложения. Флаттер-разработчик полностью обслуживает экосистему Android и IOS, поэтому Dart-фреймворк экономит бюджет проекта, сокращает срок разработки.

По данным опроса Statista, 46% разработчиков выбирают Flutter, когда нужно создать кроссплатформенное приложение.

Flutter компилируется в нативный код. Приложение на языке Dart можно адаптировать под Windows, Linux, macOS, Web — плагины и библиотеки решают 99% задач. Только в отдельных случаях понадобится доработка нативного кода.

При этом нет проблем с производительностью — движок Флаттера написан на C++.

Как установить и настроить окружение

Ссылка на загрузку Flutter с официального сайта:

• https://docs.flutter.dev/get-started/install/windows/desktop?tab=download

Фреймворк загрузится в виде архива, его нужно распаковать на диск. Например, в папку C:\flutter.

Ссылка на загрузку Flutter SDK

При установке необходимо добавить путь к директории в переменную среды PATH. IDE полагаются на переменную PATH для обнаружения и интеграции с Flutter SDK.

Изменение переменных среды

Задача — открыть настройки переменных среды, изменить «Path», добавить путь до папки bin.

Добавление пути до папки bin в начало списка

Теперь команды flutter, flutter doctor, flutter run будут запускаться из любой директории в командной строке.

Настройка окружения

Flutter-разработчики обычно работают в Android Studio, но писать код можно и в других IDE. Рассмотрим процесс установки окружения на примере ОС Windows:

1. Загружаем установщик Android Studio с официального сайта (1.1 Гб).

2. Выполняем установку компонентов IDE.

Android Studio после распаковки занимает не менее 3.7 Гб

3. После распаковки Android Studio предложит загрузить и установить набор для разработки. Среди инструментов — эмулятор ОС Андроид.

Набор инструментов, который поможет в разработке приложений

4. После установки нужно добавить плагин Flutter в IDE (еще понадобится Dart, но он подгрузится автоматически).

Плагин Flutter

5. Далее выбираем SDK-платформу для разработки, устанавливаем дополнительные компоненты.

Выбор версии SDK

Дополнительно загружаем Android SDK Command-line Tools

6. Выбираем модель виртуального устройства во вкладке Device Manager.

Параметры «железа» тонко настраиваются

На этом базовая настройка окружения завершена.

Если планируете писать код на Flutter в Visual Studio Code, обратите внимание на следующее видео. Автор подробно рассказывает о том, как связать эмулятор и IDE VS Code. Нужно будет добавить новые пути для переменных среды в настройках системы.

Как создать первое приложение на Flutter

Создать новый проект можно через Android Studio. Сразу после запуска IDE нужно выбрать «New Project».

Рассмотрим менее очевидный путь — через Flutter CLI (Command Line Interface):

1. Откройте командную строку или терминал VS Code;
2. Перейдите в папку, где хотите создать проект;
3. Выполните команду:

			flutter create my_new_project
		

где «my_new_project» — имя проекта.

Flutter автоматически создаст необходимые файлы и папки для базового приложения.

Структура проекта

Папки проекта Флаттер

Рассмотрим основные директории и файлы созданного проекта:

• .dart_tool используется пакетным менеджером Dart.
• .idea хранит специфичные настройки проекта в виде xml-файлов.
• android и ios содержат нативные файлы платформ. Используются, когда нужно реализовать специфичную фичу для android или ios.
• lib содержит исходный код приложения на Flutter. Это рабочая директория. Main.dart — точка входа в приложение.
• test хранит тесты, проверяющие правильность работы приложения.
• .gitignore содержит список файлов, которые игнорируются при работе с git.
• .packages содержит список всех включенных пакетов Dart.
• pubspec.yaml хранит зависимости проекта, плагины.

Запуск приложения

Приложение запустится на эмуляторе, который мы ранее установили вместе с Android Studio.

Перейдите в терминал, откройте папку с проектом и выполните команду:

			flutter run
		

Flutter скомпилирует код и запустит мобильное приложение. Через несколько секунд на экране эмулятора появится интерфейс смартфона с запущенным счетчиком кликов.

Поздравляем с первым запуском Flutter-приложения!

Счетчик кликов в эмуляторе Android Studio

Пользовательский интерфейс в Flutter строится с помощью виджетов — классов, которые описывают, как должен выглядеть UI. Код приложения генерирует счетчик в файле main.dart. Внутри содержится MaterialApp — корневой виджет, который настраивает тему и домашний маршрут приложения.

Свойство home указывает на виджет MyHomePage — главный экран приложения. Внутри MyHomePage есть базовая разметка: AppBar с заголовком и центрированный текст со счетчиком нажатий.

Виджеты содержат методы build. Flutter вызывает их при первом построении интерфейса и при каждом обновлении состояния. Они возвращают другие виджеты, которые образуют дерево виджетов. Структура вложенных UI-компонентов и определяет внешний вид приложения.

Запущенное демо-приложение уже реагирует на нажатия кнопки и обновляет счетчик. Это работает благодаря Stateful виджету и изменению его состояния в методе setState.

Подробнее о видах виджетов и управлении состоянием — в следующем разделе.

Основные концепции Flutter

Особенность фреймворка в виджетах — это строительные блоки, из которых состоит все приложение. Разработчику нужно лишь скомбинировать виджеты и настроить свойства, чтобы получить желаемый интерфейс.

В Flutter есть готовые виджеты. Условно их можно разделить на две категории: статичные и интерактивные.

Статичные виджеты просто отображают какой-то контент и никак не реагируют на действия пользователя. Примеры статичных виджетов — Text для отображения текста, Image для картинок, Icon для иконок.

Интерактивные виджеты реагируют на события, например, на нажатия пользователя. Они делают приложение живым и динамичным. Часто используются кнопки, поля ввода, чек-боксы, переключатели. Даже простое приложение не обходится без интерактивных элементов.

Stateless и Stateful виджеты

Stateless виджеты выглядят одинаково, не имеют внутреннего состояния. Их свойства задаются при создании приложения и не могут быть изменены в дальнейшем. Они используются для отображения статичных данных или создания переиспользуемых компонентов интерфейса.

Единственный способ изменить Stateless виджет — создать новый экземпляр.

Stateful виджеты имеют внутреннее состояние, которое может меняться со временем. Когда состояние объекта меняется, Flutter автоматически перерисовывает виджет, чтобы отобразить актуальные данные.

Типичный пример Stateful виджета — счетчик кликов, который запускали в предыдущем разделе. При каждом нажатии на кнопку счетчик увеличивается, состояние виджета меняется, и Flutter обновляет интерфейс.

StatelessWidget предлагает только один публичный API для запуска сборки — конструктор. StatefulWidget имеет множество триггеров, вызывающих пересборку.

didUpdateWidget() вызывается всякий раз, когда конфигурация виджета меняется. Например, это может происходить при повороте экрана.

Структура виджетов

Подробнее рассмотрим дерево виджетов — иерархическую структуру вложенных компонентов. Для этого в качестве примера будем использовать код простого «Hello, World!» приложения.

Код простого приложения и его вид на устройстве пользователя

На вершине дерева корневой виджет MyApp. Остальные — его потомки. Когда Flutter рисует интерфейс, он обходит дерево виджетов сверху вниз и отображает каждый в соответствии с его свойствами и состоянием (декларативный подход).

Дерево виджетов для примера «Hello, World!»

В отличие от императивного подхода, где разработчик пошагово описывает, как строить и обновлять интерфейс, в Flutter нужно описывать только конечный результат.

Мы как бы говорим Flutter: «Хочу, чтобы мой интерфейс выглядел вот так», и фреймворк самостоятельно определяет, как ему достичь результата максимально эффективным способом.

Преимущества декларативного подхода:

• Код становится более читаемым и понятным. Глядя на дерево виджетов, можно сразу представить, как будет выглядеть интерфейс.
• Нет проблем, связанных с ручным обновлением интерфейса. Flutter сам заботится о перерисовке виджетов и делает это эффективно.

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

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

Как добавить функционал в приложение

Самый важный виджет для компоновки UI — контейнеры и лейауты.

Контейнеры позволяют группировать и оформлять другие виджеты, задавать им отступы, цвета, границы.

Лейауты отвечают за расположение виджетов на экране. С помощью них можно создавать адаптивные интерфейсы, которые подстраиваются под размер экрана устройства.

Чтобы приложение было интерактивным, нужно обрабатывать события и действия пользователя. В Flutter для этого используются колбэки — функции, которые вызываются при определенных событиях. Например, у кнопки есть колбэк onPressed, который срабатывает при нажатии на кнопку.

Внутри колбэков можно писать код на Dart, который будет работать при наступлении события. Например, при нажатии на кнопку «Добавить» — сохранить введенный текст или отфильтровать список по введенному запросу.

Редко приложения состоят из одного-единственного экрана. Обычно есть несколько связанных экранов, между которыми пользователь может переключаться. В Flutter за навигацию отвечает виджет Navigator и класс Route. Чтобы добавить, например, экран настроек, нужно создать для него отдельный виджет и класс. Затем, по нажатию на кнопки, вызвать метод Navigator.push и передать ему новый маршрут.

При нажатии на кнопку вызывается метод Navigator.push()

Для возврата назад используется метод Navigator.pop()

Плагины в Flutter

Дополнения от сообщества разработчиков расширяют возможности приложения: интеграция с камерой, геолокация, работа с базой данных, сетевыми запросами и др.

Плагины находятся на pub.dev — официальном репозитории Dart и Flutter. Чтобы подключить плагин к проекту, нужно добавить его в файл pubspec.yaml и выполнить команду «flutter pub get».

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

Плагины имеют документацию и примеры использования, которые можно найти на странице pub.dev или в репозитории на GitHub.

Страница плагина, который добавляет среду выполнения векторной графики. Есть пример использования, подробная инструкция по установке и импорту в проект

Советы для начинающих

Обучение на джуна только начинается, и одной статьи для старта недостаточно.

Начнем с главного вопроса: как лучше всего изучать Flutter?

Идеального решения нет — каждый выбирает путь в зависимости от предпочтений и опыта. Зато есть проверенные источники, которые помогут быстро освоиться в Flutter-разработке.

Самое важное — официальная документация Flutter. В ней более подробно описаны концепции, виджеты, пакеты и инструменты. Документация обновляется и дополняется, в ней только актуальная информация.

Начать советуем с раздела документации Codelabs. Это пошаговые интерактивные уроки, которые научат создавать приложения шаг за шагом. Каждый Codelab посвящен определенной теме, содержит инструкции, видеоуроки и готовый код.

Обучение Flutter — не только чтение документации и просмотр уроков. Не менее важно общение с другими разработчиками и участие в жизни Flutter-комьюнити.

Сообщество Flutter сосредоточено в Discord. Здесь тысячи разработчиков готовы помочь с решением проблем, обсудить новости и поделиться опытом. На сервере есть отдельные каналы для новичков, обсуждения плагинов, поиска работы.

Популярные ошибки новичков при изучении Flutter

Изучая Flutter, начинающие разработчики повторяют одни и те же ошибки. Несколько советов, которые ускорят обучение:

• Невозможно выучить все и сразу. Flutter — обширный фреймворк. Сосредоточьтесь на  виджетах, статическом и динамическом UI, навигации. Изучайте новые темы и инструменты по мере необходимости.
• Пишите больше кода. Как бы хорошо вы ни знали теорию, настоящее обучение происходит во время практики.
• Уделите внимание основам Dart. Flutter написан на языке Dart, поэтому для разработки нужно понимать его синтаксис, типы данных, ООП.
• Начинающие разработчики злоупотребляют комментариями, пытаясь объяснить каждую строчку кода. Однако хороший код должен быть понятным без пояснений.
• Ошибки — неотъемлемая часть обучения. Не бывает разработчиков, которые никогда не допускали ошибок. Признавайте, анализируйте, исправляйте недочеты.
• Чтобы побороть лень, пробуйте начинать с малого. Возьмите простую, но конкретную задачу, которую точно сможете быстро решить. Как только справитесь с ней, почувствуете прилив энергии и мотивации.
• С самого начала уделяйте внимание архитектуре. Используйте StatefulWidget и StatelessWidget по назначению. Вынесите бизнес-логику и данные в отдельные классы и сервисы.
• Помните о null-безопасности. Используйте «?» для значений, которые могут быть null. Проверяйте наличие объекта с помощью «if» или «?.»  перед вызовом его свойств и методов. Если нужно задать значение по умолчанию для null, пользуйтесь оператором «??».

Чтобы уверенно чувствовать себя во Flutter, нужно минимум полгода. Удачи в начинаниях и приятной разработки!

Если вы только начали работать с мобильной разработкой или уже мидл/сеньор, собрали всю полезную информацию тут.