Flutter часть 1. Установка и настройка
Содержание
Недавно google анонсировал beta версию Flutter. Flutter — это новый кроссплатформенный UI framework, который включает в себе набор инструментов: движок для 2D рендеринга, готовый набор UI компонентов и набор инструментов для разработки. Он позволяет писать кроссплатформенные приложения с общей кодовой базой.
Flutter состоит из трёх компонентов:
- Flutter engine.
- Foundation library.
- Design-specific widgets.
Flutter engine — написан на C++, предоставляет низкоуровневую поддержку рендеринга, использует для этого графическую библиотеку Skia. Skia — это 2D графическая библиотека, с открытым исходным кодом, которая предоставляет кроссплатформенное API. Она служит графическим движком для Google Chrome, Chrome OS, Android, Mozilla Firefox, Firefox OS и т.д. На официальном сайте есть примеры, которые запускаются сразу из браузера.
Foundation library — включает в себя базовые классы и функции, которые используются для создания приложения с использованием Flutter. Данная библиотека написана уже на языке Dart.
Design-specific widgets — это набор уже готовых базовых графических компонентов для построения пользовательского интерфейса. Данный набор состоит из двух крупных наборов компонентов:
- Material Design widgets — графические компоненты реализующие спецификацию material design.
- Cupertino widgets — набор реализующий Apple iOS дизайн.
Особености Flutter
Всё есть виджет
Виджет представляет собой строительный блок для построения пользовательского интерфейса, который по сути является согласованной унифицированной моделью.
С помощью виджета можно определить:
- структурные элементы, например кнопки или меню
- стилистические элементы, например шрифты или цветовую схему
- разметку макета, например отступы.
Виджеты выстраиваются в иерархию с помощью композиции. Каждый виджет находиться внутри другого виджета и наследует его свойства. Характерной особенностью является то что корневой виджет выполняет роль application.
Так же виджет позволяет получать и обрабатывать события и заменять виджеты в иерархии динамически.
Иерархия слоёв
Установка Flutter
Что бы попробовать Flutter в деле необходимо клонировать репозиторий с GitHub из ветки beta с помощью команды:
Далее нужно добавить переменные окружения PATH. Для этого в конец файла
/.bashrc нужно добавить следующие строки:
Где в первой строке необходимо указать путь к каталогу с исполняемым файлом flutter, который находиться в каталоге /bin. Во второй строке нужно добавить путь к Android SDK.
Следующая команда проверит и при необходимости закачает все зависимости, которые нужны для Flutter:
После того как все необходимое будут закачено, в терминале будет выведена следующая информация:
C помощью команды flutter devices можно увидеть список подключённых устройств. В моём случае это эмулятор:
Установка плагинов в Android studio (Flutter и Dart)
Для поддержки Flutter в Android Studio необходимо установить плагин Flutter из репозитория. Для этого на экране приветствия нужно выбрать пункт меню Configure | Plugins.
В окне Plugins нужно выбрать кнопку Browse repositories.
В строке поиска вбиваем название плагина Flutter и выбираем кнопку Install.
Если ранее не был установлен плагин Dart, то появиться диалоговое окно, где предложат это сделать. Соглашаемся с установкой.
После установки плагина необходимо перезапустить Android Studio. После этого в основном меню появиться новый пункт Start a new Flutter project.
Создание нового проекта
После установки плагинов в основном меню Android Studio выбираем пункт Start a new Flutter project. После выбора пункта запуститься мастер создания проекта:
Выбираем пункт Flutter Application. Далее нажимаем на кнопку Next и переходим к следующему шагу:
Здесь необходимо указать путь к Flutter SDK, который был закачен ранее. Нажимаем на кнопку Next. На следующем завершающем шаге нажимаем кнопку Finish. После этого сгенерируется Flutter проект.
Запустим эмулятор, и произведём запуск приложения. Нужно перейти в корневой каталог проекта и выполнить команду:
После компиляции приложение запуститься на устройстве:
В следующей статье создадим свой собственный экран из готовых компонентов Flutter.
Источник
Flutter sdk установка android studio
Для разработки под Flutter нередко выбирается такая среда разработки как Android Studio . Хотя мы можем набирать код и в простейшем текстовом редакторе и компилировать его в консоли, но среда разработки существенно позволяет упостить процесс написания и построения приложения. Причем Android Studio позволяет создать приложения на Flutter не только собственно под Android, но и под другие поддерживаемые платформы.
Для работы с Android Studio ее естественно вначале надо установить. Инсталлятор можно загрузить по ссылке https://developer.android.com/studio.
По умолчанию Android Studio не поддерживает Flutter, поэтому нам надо установить соответствующий плагин. Для этого в Android Studio на стартовом экране выберем пункт Plugins (либо в открытой студии перейдем в меню File -> Settings и далее в открывшемся окне также выберем пункт Plugins ). И в панели плагинов найдем плагин Flutter :
Для упрощения поиска нужного плагина мы можем ввести в поисковую стоку слово «Flutter», и первый результат будет как раз тем, который надо установить. При установке плагина также отобразится окно с предложением установить плагин для Dart. Также нажмем на ОК для его установки:
После установки плагина необходимо будет перезагузить Android Studio.
После перезагрузки на стартовом экране в Android Strudio мы можем увидеть кнопку New Flutter Project :
Нажмем на эту кнопку для создания проекта под Flutter.
В качестве альтернативы для создания проекта в студии можно перейти в меню к пункту File -> New -> New Flutter Project :
Далее нам откроется окно создания нового проекта. В левой части выберем пункт Flutter , а в центре в поле Flutter SDK path укажем путь к Flutter SDK:
На следующем окне укажем ряд настроек проекта:
В поле Project name дадим проекту какое-либо имя. Так, в моем случае он называется hello_app .
В поле Project location можно изменить расположение проекта, если предложенное расположение по умолчанию не устраивает.
В поле Description можно указать описание проекта
В поле Project type указывается тип проекта. По умолчанию он имеет значение Application (то есть проект предназначен для создания приложения). Оставим это значение по умолчанию.
В поле Organization можно задать название для пакета приложения. Можно оставить по умолчанию, а можно и изменить. Например, в моем случае это com.metanit .
В поле Android language указывается язык для Android. Можно оставить значение по умолчанию — Kotlin .
В поле iOS language указывается язык для платфомы iOS. Можно оставить значение по умолчанию — Swift .
В поле Organization можно задать название для пакета приложения. Можно оставить по умолчанию, а можно и изменить. Например, в моем случае это com.metanit .
В поле Platforms можно указать платформы, под которые будет создаваться проект. По умолчанию отмечены пункты Android и iOS, но можно выбрать и другие доступные платформы. Так, как видно выше на скриншоте, я также выбрал пункт «Web» для создания проекта под веб.
И затем после установки всех настроек нажмем на кнопку «Finish» для непосредственного создания проекта. Сразу после создания Android Studio откроет созданный проект:
Созданный проект будет иметь ту же самую структуру, что был создан в прошлой теме в консоли с помощью команды flutter create . В центре студии будет открыт файл main.dart , который содержит собственно код приложения.
Подключим к компьютеру устройство Android (или воспользуемся эмуляторами) и в панели Android Studio нажмем на зеленую стрелочку для запуска приложения.
Подобным образом в Android Studio можно запускать проект и под другие «устройства», например, под web. Для этого лишь нужно выбрать соответствующее устройство в панели инструментов:
Источник
Установка 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
- Загрузите следующий установочный пакет, чтобы получить последний стабильный выпуск 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, выполните следующие действия:
- Включите VM-ускорение на вашей машине.
- Запустите 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….
- Выберите определение устройства и нажмите Next.
- Выберите один или несколько системных образов для версий Android, которые вы хотите эмулировать, и выберите Next. Рекомендуется образ x86 или x86_64.
- В разделе Emulated Performance выберите Hardware — GLES 2.0, чтобы включить аппаратное ускорение.
- Убедитесь в правильности настройки AVD и выберите Finish (Завершить).
Для получения более подробной информации о вышеописанных шагах смотрите раздел Управление AVD.
7. В менеджере виртуальных устройств Android нажмите кнопку Run на панели инструментов. Эмулятор запустится и отобразит экран по умолчанию для выбранной версии ОС и устройства.
Flutter имеет раннюю поддержку создания веб-приложений с использованием бета-версии Flutter. Чтобы добавить поддержку веб-разработки, следуйте этим инструкциям после завершения установки, описанной выше.
Источник
