Введение в 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 2.0, которая вышла в марте 2021 года.

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

Установка Flutter SDK

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

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

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

Также Flutter использует Android SDK. Самый легкий способ установить Android SDK — сразу установить Android Studio, вместе с которой будут установлены вс необходимые инструменты.

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

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

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

Путь к этой папке нам надо добавить в переменные среды. (Переменные среды можно открыть через Панель управления -> Система -> Дополнительные параметры системы -> Переменные среды).

Здесь нам надо изменить переменную Path, добавив путь к папке bin в Flutter SDK:

Чтобы проверить корректность установки Flutter, откроем командную строку и введем команду flutter . Если Windows распознает ее, и последует вывод некоторой справочной информации (например, как использовать те или иные команды в консоли), то flutter установлен и настроен.

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

В данном случае с репозитария на гитхабе будет загружена последняя стабильная версия Flutter SDK. И опять же подчеркиваю, что для выполнения этой команды необходимо установить Git for Windows, как было написано выше.

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

Для установки и обновления Flutter использует git , поэтому необходимо установить git. Однако если установлен Xcode , то git устанавливать не надо, так как Xcode уже включает git.

Для установки Flutter SDK перейдем на страницу https://flutter.dev/docs/get-started/install/macos и найдем на странице ссылку на Flutter SDK и загрузим его:

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

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

При первом использовании команды flutter произойдет загрузка Dart SDK.

Обновление Flutter

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

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

Windows install

System requirements

To install and run Flutter, your development environment must meet these minimum requirements:

• Operating Systems: Windows 7 SP1 or later (64-bit), x86-64 based
• Disk Space: 1.64 GB (does not include disk space for IDE/tools).
• Tools: Flutter depends on these tools being available in your environment.
  • Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10)

  Git for Windows 2.x, with the Use Git from the Windows Command Prompt option.

  If Git for Windows is already installed, make sure you can run git commands from the command prompt or PowerShell.

  Get the Flutter SDK

  Download the following installation bundle to get the latest stable release of the Flutter SDK:

  For other release channels, and older builds, see the SDK releases page.

  Extract the zip file and place the contained flutter in the desired installation location for the Flutter SDK (for example, C:\src\flutter ).

  Warning: Do not install Flutter in a directory like C:\Program Files\ that requires elevated privileges.

  If you don’t want to install a fixed version of the installation bundle, you can skip steps 1 and 2. Instead, get the source code from the Flutter repo on GitHub, and change branches or tags as needed. For example:

  You are now ready to run Flutter commands in the Flutter Console.

  Update your path

  If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATH environment variable:

  • From the Start search bar, enter ‘env’ and select Edit environment variables for your account.
  • Under User variables check if there is an entry called Path:
    • If the entry exists, append the full path to flutter\bin using ; as a separator from existing values.
    • If the entry doesn’t exist, create a new user variable named Path with the full path to flutter\bin as its value.

  You have to close and reopen any existing console windows for these changes to take effect.

  Note: As of Flutter’s 1.19.0 dev release, the Flutter SDK contains the dart command alongside the flutter command so that you can more easily run Dart command-line programs. Downloading the Flutter SDK also downloads the compatible version of Dart, but if you’ve downloaded the Dart SDK separately, make sure that the Flutter version of dart is first in your path, as the two versions might not be compatible. The following command tells you whether the flutter and dart commands originate from the same bin directory and are therefore compatible.

  As shown above, the command dart from the Flutter SDK doesn’t come first. Update your path to use commands from C:\path-to-flutter-sdk\bin\ before commands from C:\path-to-dart-sdk\bin\ (in this case). After restarting your shell for the change to take effect, running the where command again should show that the flutter and dart commands from the same directory now come first.

  However, if you are using PowerShell , in it where is an alias of Where-Object command, so you need to use where.exe instead.

  To learn more about the dart command, run dart -h from the command line, or see the dart tool page.

  Run flutter doctor

  From a console window that has the Flutter directory in the path (see above), run the following command to see if there are any platform dependencies you need to complete the setup:

  This command checks your environment and displays a report of the status of your Flutter installation. Check the output carefully for other software you might need to install or further tasks to perform (shown in bold text).

  The following sections describe how to perform these tasks and finish the setup process. Once you have installed any missing dependencies, you can run the flutter doctor command again to verify that you’ve set everything up correctly.

  Note: If flutter doctor returns that either the Flutter plugin or Dart plugin of Android Studio are not installed, move on to Set up an editor to resolve this issue.

  Warning: The flutter tool uses Google Analytics to anonymously report feature usage statistics and basic crash reports. This data is used to help improve Flutter tools over time.

  Flutter tool analytics are not sent on the very first run. To disable reporting, type flutter config —no-analytics . To display the current setting, type flutter config . If you opt out of analytics, an opt-out event is sent, and then no further information is sent by the Flutter tool.

  By downloading the Flutter SDK, you agree to the Google Terms of Service. Note: The Google Privacy Policy describes how data is handled in this service.

  Moreover, Flutter includes the Dart SDK, which may send usage metrics and crash reports to Google.

  Android setup

  Note: Flutter relies on a full installation of Android Studio to supply its Android platform dependencies. However, you can write your Flutter apps in a number of editors; a later step discusses that.

  Install Android Studio

  1. Download and install Android Studio.
  2. Start Android Studio, and go through the ‘Android Studio Setup Wizard’. This installs the latest Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.

  Set up your Android device

  To prepare to run and test your Flutter app on an Android device, you need an Android device running Android 4.1 (API level 16) or higher.

  1. Enable Developer options and USB debugging on your device. Detailed instructions are available in the Android documentation.
  2. Windows-only: Install the Google USB Driver.
  3. Using a USB cable, plug your phone into your computer. If prompted on your device, authorize your computer to access your device.
  4. In the terminal, run the flutter devices command to verify that Flutter recognizes your connected Android device. By default, Flutter uses the version of the Android SDK where your adb tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the ANDROID_SDK_ROOT environment variable to that installation directory.

  Set up the Android emulator

  To prepare to run and test your Flutter app on the Android emulator, follow these steps:

  1. Enable VM acceleration on your machine.
  2. Launch Android Studio, click the AVD Manager icon, and select Create Virtual Device…
     • In older versions of Android Studio, you should instead launch Android Studio > Tools > Android > AVD Manager and select Create Virtual Device…. (The Android submenu is only present when inside an Android project.)
     • If you do not have a project open, you can choose Configure > AVD Manager and select Create Virtual Device…
  3. Choose a device definition and select Next.
  4. Select one or more system images for the Android versions you want to emulate, and select Next. An x86 or x86_64 image is recommended.
  5. Under Emulated Performance, select Hardware — GLES 2.0 to enable hardware acceleration.

  Verify the AVD configuration is correct, and select Finish.

  For details on the above steps, see Managing AVDs.

• In Android Virtual Device Manager, click Run in the toolbar. The emulator starts up and displays the default canvas for your selected OS version and device.

Web setup

Flutter has support for building web applications in the stable channel. Any app created in Flutter 2 automatically builds for the web. To add web support to an existing app, follow the instructions on Building a web application with Flutter when you’ve completed the setup above.

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

Для установки и запуска Flutter ваша среда разработки должна соответствовать этим минимальным требованиям:

• Операционные системы: Windows 7 SP1 или более поздняя версия (64-разрядная)
• Дисковое пространство: 1,32 ГБ (не включает дисковое пространство для IDE/инструментов).
• Инструменты: Flutter зависит от того, доступны ли эти инструменты в вашей среде.
  • Windows PowerShell 5.0 или более новая (она предустановлена в Windows 10).
  • Git для Windows 2.x, с опцией Use Git из командной строки Windows Command Prompt. Если Git для Windows уже установлен, убедитесь, что вы можете запускать команды git’а из командной строки или PowerShell.

Получение Flutter SDK

1. Загрузите следующий установочный пакет, чтобы получить последний стабильный выпуск Flutter SDK:

О других выпусках и старых сборках см. страницу архива SDK.

2. Распакуйте zip-файл и поместите содержащийся в нем flutter в желаемое место установки SDK Flutter (например, C:\src\flutter ).

Если вы не хотите устанавливать фиксированную версию установочного пакета, вы можете пропустить шаги 1 и 2. Вместо этого возьмите исходный код из Flutter repo на GitHub и измените ветки или теги по мере необходимости. Например:

Теперь вы готовы запускать команды Flutter в консоли Flutter Console.

Обновите свой PATH

Если вы хотите запустить команды Flutter в обычной консоли Windows, выполните эти шаги, чтобы добавить Flutter в переменную окружения PATH:

• В строке поиска Start введите ‘env’ (окр) и выберите Edit environment variables for your account (Редактировать переменные окружения).
• В разделе User variables (Пользовательские переменные) проверьте, есть ли запись под названием Path (Путь):
  • Если запись существует, добавьте полный путь по адресу flutter\bin, используя ; в качестве разделителя от существующих значений.
  • Если запись не существует, создайте новую пользовательскую переменную с именем Path и полным путем к flutter\bin в качестве ее значения.

Чтобы эти изменения вступили в силу, необходимо закрыть и снова открыть все существующие окна консоли.

Запуск flutter doctor

В консольном окне, в пути к которому находится каталог Flutter (см. выше), запустите следующую команду, чтобы узнать, есть ли какие-нибудь зависимости от платформы, необходимые для завершения установки:

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

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

Установка Android Studio

• Скачайте и установите Android Studio.
• Запустите Android Studio и пройдите через ‘Мастер установки Android Studio’. Это позволит установить новейший Android SDK, Android SDK Command Line Tools и Android SDK Build-Tools, которые необходимы Flutter при разработке для Android.

Настройка вашего Android устройства

Чтобы подготовиться к запуску и тестированию приложения Flutter на устройстве под управлением ОС Android, необходимо устройство под управлением ОС Android 4.1 (уровень API 16) или выше.

• Включите опции «Разработчик» и отладку USB на вашем устройстве. Подробные инструкции доступны в документации по Android.
• Только для Windows: установите драйвер Google USB.
• С помощью USB-кабеля подключите телефон к компьютеру. Если на устройстве появится запрос, авторизуйте компьютер для доступа к устройству.
• В терминале выполните команду «flutter devices», чтобы убедиться, что flutter распознает подключенное устройство Android. По умолчанию, Flutter использует версию Android SDK, основанную на adb tools. Если вы хотите, чтобы Flutter использовал другую установку Android SDK, вы должны установить переменную окружения ANDROID_SDK_ROOT в этот установочный каталог.

Настройка Android эмулятора

Чтобы подготовиться к запуску и тестированию вашего Flutter приложения на эмуляторе Android, выполните следующие действия:

1. Включите VM-ускорение на вашей машине.
2. Запустите Android Studio, щелкните значок AVD Manager и выберите Create Virtual Device…
   • В старых версиях Android Studio вместо этого необходимо запустить Android Studio > Tools > Android > AVD Manager и выбрать Create Virtual Device….. (Подменю Android присутствует только внутри проекта Android).
   • Если у вас нет открытого проекта, вы можете выбрать Configure > AVD Manager и выбрать Create Virtual Device….
3. Выберите определение устройства и нажмите Next.
4. Выберите один или несколько системных образов для версий Android, которые вы хотите эмулировать, и выберите Next. Рекомендуется образ x86 или x86_64.
5. В разделе Emulated Performance выберите Hardware — GLES 2.0, чтобы включить аппаратное ускорение.
6. Убедитесь в правильности настройки AVD и выберите Finish (Завершить).

Для получения более подробной информации о вышеописанных шагах смотрите раздел Управление AVD.

7. В менеджере виртуальных устройств Android нажмите кнопку Run на панели инструментов. Эмулятор запустится и отобразит экран по умолчанию для выбранной версии ОС и устройства.

Flutter имеет раннюю поддержку создания веб-приложений с использованием бета-версии Flutter. Чтобы добавить поддержку веб-разработки, следуйте этим инструкциям после завершения установки, описанной выше.

Читайте также:  Linux partitioning with ssd