Введение в Flutter

Что такое Flutter. Установка

Flutter представляет фреймворк от компании Google, который позволяет создавать кроссплатформенные приложения, которые могут использовать однин и тот же код. Спектр платформ широк - это веб-приложения, мобильные приложения под Android и iOS, графические приложения под настольные операционные системы Windows, MacOS, Linux, а также веб-приложения.

Особенностью работы с Flutter является то, что приложения под разные платформы могут иметь один и тот же код. Поскольку используемые платформы не эквиваленты, то какие-то отдельные части кода необходимо настраивать под определенную ОС, например, под iOS, но тем не менее большая часть кода может совпадать. Это позволяет разработчикам существенно сэкономить время и ресурсы на создание приложений под все поддерживаемые платформы.

В качестве языка разработки используется язык программирования Dart.

При постороении приложения Flutter транслирует код на Dart в нативный код приложения с помощью Dart AOT (компиляция приложения перед его запуском), которое можно запускать на Android или iOS или другой платформе. Однако при разработке приложения для ее ускорения Flutter использует JIT (компиляция приложения в процессе его запуска).

Надо отметить, что Flutter относительно новый фреймворк. Хотя прототип фреймворка появился еще в 2015 году, а первая альфа-версия вышла в мае 2017 года, но первый стабильный релиз - Flutter 1.0 увидел свет только в декабре 2018 года. Тем не менее регулярно с небольшой периодичностью ыходят подверсии, добавляя новую функциональноть и исправляя имеющиеся баги. На момент публикации данной статьи последней стабильной версией является Flutter 3, которая вышла в мае 2022 года, но постоянно выходят новые подверсии, которые также привносят нововведения во фреймворк (например, на момент написания данной статьи последней подверсией является 3.19, которая вышла в феврале 2024 г.).

Что используется для разрабоки под Flutter? Прежде всего надо иметь базовые знания языка Dart. Для этого можно прочитать руководство на этом сайте https://metanit.com по адресу Руководство по языку Dart

Для для написания кода программы можно использовать любой полюбившийся текстовый редактор и затем с помощью утилит командной строки из Flutter SDK компилировать приложение. Однако для таких сред как Android Studio и IntelliJ IDEA, а также текстового редактора Visual Studio Code компания Google выпустила специальные плагины, которые позволяют упростить разработку. Поэтому зачастую для разработки под Flutter используются именно Android Studio и IntelliJ IDEA.

Перед непосредственной установкой следует отметить, что Flutter зависит от множества компонентов. Так, если мы собираемся создавать приложения под Android (а это наиболее популярный сценарицй применения Flutter), то нам надо установить Android SDK. Самый легкий способ установить Android SDK - сразу установить Android Studio, вместе с которой будут установлены все необходимые инструменты. Процесс установки Android Studio описан в статье Установка Android Studio

Установка Flutter SDK

Чтобы начать разрабатывать приложения с помощью Flutter, необходимо установить SDK. На странице https://flutter.dev/docs/get-started/install/ можно найти ссылки на на загрузку SDK для разных операционных систем. Рассмотрим, как установить Flutter SDK на Windows, MacOS и Linux.

Установка Flutter на Windows

Для работы Flutter SDK в Windows в системе должен быть установлен Git for Windows, который можно найти по адресу https://git-scm.com/download/win.

Также на Windows следует установить пакет Microsoft C++ Build Tools. В программе установки надо выбрать пункт "Разработка классических приложений на C++" (Desktop development with C++). Подробнее про установку можно посмотреть в статье Установка Microsoft C++ Build Tools

Непосредственно для установки Flutter SDK перейдем на страницу https://docs.flutter.dev/get-started/install/windows/desktop?tab=download. На этой странице найдем в секции Get the Flutter SDK ссылку на zip-архив с Flutter SDK и загрузим его:

Далее распакуем архив, например, на диске С. Например, в моем случае архив распакован в папку C:\flutter.

В распакованном архиве в папке flutter\bin мы найдем инструменты для компиляции приложения. Например, в моем случае полный путь к этой папке C:\flutter\bin:

Если мы работаем в Windows, то для добавления переменной среды через поиск найдем найдем параметр "Изменение переменных среды текущего пользователя". Для этого введем в поле поиска "Изменение переменных":

Выберем пункт "Изменение переменных среды текущего пользователя". Затем нам откроется окно, где мы можем увидеть все переменные среды. (Также можно перейти через Параметры и пункт Система ->Дополнительные параметры системы ->Переменные среды)

Здесь нам надо изменить переменную Path, добавив путь к папке bin в Flutter SDK. Для этого выберем пункт Path и нажмем на кнопку "Изменить":

Далее нажмем на кнопку "Создать" и появившееся поле ввода введем путь к папке bin из Flutter SDK:

Установка Flutter на MacOS

Для установки и обновления Flutter использует git, поэтому необходимо установить git. Однако если установлен Xcode, то git устанавливать не надо, так как Xcode уже включает git. В качестве альтернытивного способа можно установить Git через пакетный менеджер Homebrew, выполнив команду:

brew install git

Для установки Flutter SDK перейдем на страницу https://docs.flutter.dev/get-started/install/macos/desktop?tab=download. Здесь нам доступно два варианта исполнения Flutter SDK - для MacOS на архитектуре Intel x86-64 и для MacOS на ARM. Загрузим вариант, который соответствует нашей операционной системе:

Далее распакуем архив и поместим распакованную папку с Flutter SDK где-нибудь на жестком диске. Например, поместим Flutter SDK в корневой папке текущего пользователя (папка $HOME).

Для использования Flutter SDK в терминале, необходимо добавить путь к папке bin в SDK в системные переменные. Добавление для текущего окна терминала:

Для этого откроем или создадим (при отстуствии) в корневой папке текущего пользователя файл .zshenv. Добавим в этот файл строку

export PATH=$HOME/flutter/bin:$PATH

Сохраним и закроем файл

Установка Flutter на Linux

Предварительным условием использования Flutter на Linux также является наличие в сиситеме Git. Поэтому прежде всего установим сам Git:

sudo apt install git

Для установки Flutter на Linux можно использовать два способа. Первый и самый простой способ - установка через менеджер snap с помощью следующей команды:

sudo snap install flutter --classic

Второй способ представляет ручную установку. В этом случае загружаем сам архив с файлами Flutter SDK со страницы https://docs.flutter.dev/get-started/install/linux и найдем на странице ссылку на Flutter SDK и загрузим его:

Так, в моем случае это архивный пакет "flutter_linux_3.19.0-stable.tar.xz". Далее распакуем этот архив где-нибудь на жестком диске папку. Например, в моем случае я распакую Flutter SDK в корневую папку текущего пользователя:

mkdir $HOME/flutter

Перейдем в консоли в эту папку и распакуем в нее загруженный архив

cd ~/
tar xf ~/Downloads/flutter_linux_3.19.0-stable.tar.xz

После распаковки компилятор языка Dart и утилита flutter окажутся в папке "/flutter/bin". И чтобы их использовать, внесем путь к этой папке в переменные среды. Для этого добавим в конец файла $HOME/.profile или /etc/profile следующую строку

export PATH="$PATH:`pwd`/flutter/bin"

И для немедленного применения ее выполним команду

source $HOME/.profile

Для корректной работы Flutter на Linux также необходимо установить ря пакетов:

sudo apt install clang
sudo apt install cmake
sudo apt install ninja-build
sudo apt install libgtk-3-dev

Также необходимо установить пакет Android SDK Command Line Tools. Этот можно сделать, загрузив пакет с официального сайта с адреса https://developer.android.com/studio#command-line-tools-only, либо через Android SDK Manager, который можно открыть в Android Studio:

Проверка установки

Чтобы проверить версию Flutter, откроем командную строку и введем команду flutter --version, которая выводит версию фреймворка:

C:\Users\eugen>flutter --version
Flutter 3.19.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision bae5e49bc2 (5 дней назад) • 2024-02-13 17:46:18 -0800
Engine • revision 04817c99c9
Tools • Dart 3.3.0 • DevTools 2.31.1

C:\Users\eugen>

Однако корректность установки Flutter еще не означает, что все будет работать, потому что Flutter зависит от множества компонентов. И чтобы проверить, что все установлено и настроено правильно, надо ввести команду

flutter doctor

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

Если будут какие-то проблемы, то в сводке команды будет указано, каких компонентов не хватает или что еще надо сделать, чтобы установка Flutter была корректной. Для разных систем этот набор может немного отличаться.

Обновление Flutter

Если впоследствии необходимо будет обновить Flutter, то для этого достаточно будет выполнить в командной строке команду

flutter upgrade

Поскольку Flutter активно развивается, то лучше обновляться регулярно.