Как установить флаттер на виндовс

Обновлено: 06.07.2024

Недавно 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 — новый инструмент от Google, позволяющий разработчикам писать кроссплатформенные приложения, которые можно запускать на различных системах (например, на Android или iOS) с общей кодовой базой.

Сам инструмент написан на C и C++. Предоставляет движок для 2D рендеринга, React-подобный FRP фреймворк и набор виджетов в стиле Material Design. На данный момент распространяется версия alpha:0.0.20, но несмотря на довольно "сырую" версию, уже можно создавать продвинутый интерфейс, работать с сетью и даже с файловой системой.

Подход Flutter отличается от инструментов, работающих через WebView и выполняющих HTML, CSS и Javascript (например Cordova), — он заключается в использовании Dart как единственного язык программирования. Dart довольно прост в изучении, а если вы ещё и знаете Java, то, считайте, 75% работы сделано, и на Dart можно перейти всего за пару дней.

Приложения компилируются в нативный код при сборке для релиза. Благодаря этому повышается производительность и уменьшается задержка при работе с интерфейсом. При сборке в режиме отладки (и выявлении возможных багов) Flutter также выполняет некоторые задачи, которые могут замедлять приложение. В таких случаях Flutter будет показывать надпись “Slow Mode” в правом верхнем углу экрана.

Почему именно Flutter?

Кроме того, что вы делаете приложение сразу под несколько систем (Android и iOS), код Flutter очень выразителен. То есть потребуется написать меньше кода чем если бы вы писали нативное приложение под одну платформу.

Производительность и отклик пользовательского интерфейса.

Ещё один плюс Flutter — он ориентирован на Material Design и предоставляет множество возможностей для работы с ним.

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

Установка

Так как Flutter ещё в процессе разработки и постоянно обновляется, процесс установки со временем может поменяться. Актуальную инструкцию по установке можно найти на сайте Flutter.

Мы будем пользоваться версией 0.0.20+.alpha. (Прим.перев.: на данный момент установка возможна только под Mac и Linux (64-bit))

Шаг 1. Клонирование

Клонируйте ветку alpha из репозитория Flutter при помощи Git (SourceTree, Github Desktop…) и добавьте директорию bin в PATH.

Шаг 2. Проверка зависимостей

Запустите Flutter doctor, чтобы установить все необходимые зависимости.

Шаг 3. Установка платформ

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

В случае с Android необходимо установить Android SDK. Можете просто установить Android Studio, SDK будет в комплекте. В случае, если Android Studio установлена не в директорию по умолчанию, необходимо добавить переменную ANDROID_HOME в PATH, указав новое расположение, куда был установлен SDK.

В случае с iOS необходим xCode версии 7.2 или выше. Для запуска приложений на физическом устройстве необходим дополнительный инструмент. Его можно установить при помощи Homebrew.

Шаг 4. Конфигурация Atom

Рекомендуется использовать текстовый редактор Atom с установленными плагинами Flutter и Dart.

Установка плагина Flutter для Atom:

Запустите Atom.
Packages > Settings View > Install Packages/Themes.
Напишите в поле Install Packages слово ‘flutter’, затем нажмите кнопку Packages.
Выберите Flutter и установите.

Откройте Packages > Flutter > Package Settings и выставьте в FLUTTER_ROOT путь, куда был склонирован Flutter SDK.

Затем Packages > Dart > Package Settings и выставьте переменную с расположением dart sdk, обычно это bin/cache/dart-sdk в директории Flutter.

Если у вас Mac, запустите Atom > Install Shell Commands чтобы установить shell-команды.

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

Вывод из консоли ниже показывает, что процесс установки успешен, но среда iOS ещё не отвечает всем необходимым требованиям.

Первые шаги (Пишем Hello World!)

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

Запустите Packages → Flutter → create new Flutter Project. В директории lib есть файл main.dart, откройте его и сотрите весь код.

Выполнение кода Dart начинается с функции main, которая должна быть включена в файл main.dart.

Теперь импортируем библиотеку material, она предоставляет нам функцию для запуска приложений.

Эта функция называется runApp и принимает виджет (Widget) в качестве параметра. Виджет можно сравнить с представлением (View) в Android или iOS, чтобы иметь общее представление, но, само собой, между ними есть и отличия. То есть в Flutter весь интерфейс строится на использовании виджетов и весь код пишется на Dart. Например в Android надо было бы использовать XML для описания представлений.

Начнём с того, что выведем при помощи виджета Text произвольный текст.

Теперь запускаем приложение через Atom.

Как видно, текст появился за статус-баром. Так произошло потому, что туда установлены координаты Flutter (0,0).

В примере выше создан виджет Padding, в котором отступы установлены на 24 при помощи объекта EdgeInsets, а в качестве дочернего элемента указан виджет Text. Запустите приложение и увидите, что текст теперь ниже.

Примечание: если вы знакомы с Java, то имейте в виду, const EdgeInsets.only(top: 24.0) всего лишь вызов конструктора EdgeInsets. Он возвращает экземпляр объекта, который будет константой времени компиляции. В этом разница между Java и Dart, больше информации о конструкторах в Dart можете найти здесь.

Воспользуемся виджетом Center, чтобы разместить текст в центре экрана.

Оба виджета, Padding и Center, предоставляют атрибут, называемый child, используемый для указания дочернего элемента. На самом деле это одна из особенностей, делающих Flutter таким мощным инструментом. Каждый виджет может иметь дочерние элементы, благодаря чему одни виджеты могут быть вложены в другие виджеты. Так, например, Text может быть вложен в Padding, который будет вложен в Center.

Заключение

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

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

Получение 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:

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

Запуск flutter doctor

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

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

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

Установка Android Studio

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

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

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

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

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

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

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

Разрабатываете мобильные Flutter-приложения? Рассказываем о проектах, которые позволят запустить их на настольных компьютерах.

Если вы разрабатываете приложения для смартфонов, то, возможно, слышали о новой среде разработки − Google Flutter. Это платформа, которая позволяет вам разрабатывать приложения с единой кодовой базой на гугловском языке Dart и публиковать их на Android и iOS платформы.

Кроме того, существует возможность запуска вашего Flutter-приложения на Windows, macOS и Linux, но пока только с помощью проектов сторонних разработчиков: раз и два. Оба построены на базе Flutter API, поэтому могут работать на системах вроде Fuchsia.

Также они оба используют OpenGL-библиотеку GLFW, которая предоставляет API для создания окон и обработки ввода с клавиатуры и мыши. Поэтому на платформе, где будет запускаться приложение, должны быть установлены драйверы для OpenGL.

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

Проект №1: Поддержка десктопов (Google)

Этот проект пока находится в стадии разработки, поэтому некоторые функции временно недоступны, подробнее можно почитать в описании.

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

Для компиляции исходного кода проекта и создания настольных приложений с помощью Flutter следуйте инструкциям здесь и здесь.

Проект №2: Поддержка десктопов (Drakirus)

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

Для запуска существующих проектов и реализации собственного Flutter-приложения сделайте следующее:

Откройте доступ к файлам проекта.
Загрузите демо-файл последней версии для вашей платформы из этого раздела.
Распакуйте загруженный файл в любое место по вашему выбору.
Запустите исполняемый файл stocks (macOS и Linux) или socks.exe (Windows) в корневом каталоге. Он будет работать как любое другое приложение, установленное в системе.

Примечание: в примерах на этой странице Flutter-приложения для MacOS могут загружаться с черного экрана. Решить проблему можно с увеличением размера экрана.

Запуск собственного проекта (с использованием предварительно скомпилированных файлов)

Загрузите предварительно скомпилированный файл для вашей операционной системы здесь.
Распакуйте содержимое.
Отредактируйте файл config.json в папке шаблонов, изменив заданные параметры в соответствии с информацией о вашей среде и приложении:

FlutterPath: папка с установочными файлами
FlutterProjectPath: папка вашего проекта (разработанного во Flutter)
IconPath: путь к файлу иконки приложения на рабочем столе (можно сохранить значение по умолчанию)
ScreenHeight: высота окна приложения
ScreenWidth: ширина экрана приложения

Важно: на Windows прописывайте «\\» вместо «\» при указании пути к папке.

4. Запустите исполняемый файл flutter-desktop-template в macOS/Linux или flutter-desktop-template.exe на Windows. Запущенное приложение будет работать так же, как и остальные.

Загрузка собственного проекта (компиляция проекта Go Desktop)

Загрузите и установите язык программирования Go отсюда.
Установите gcc, если его нет на ПК. Для Windows лучше выбрать tdm64-gcc, для Mac подходит инструмент из командной строки Xcode, а в Linux обычно всё уже установлено. и установите Git, если он не установлен в вашей системе.
Создайте Flutter-проект с помощью команды flutter create или IDE.
Добавьте следующее в файл main.dart:

6. Добавьте следующий код в начало метода main (до вызова метода runApp) из файла main.dart:

7. В терминале выполните команду flutter build bundle в папке проекта Flutter − будет создан каталог с файлами, необходимыми для запуска.

9. Загрузите десктопный пакет для Go.

10. Распакуйте содержимое загруженного файла.

11. Переименуйте папку, извлеченную из go-flutter-desktop-embedder-0.2.1-alpha, в go-flutter-desktop-embedder.

13. Загрузите шаблон репозитория, разархивируйте загруженный файл в любую папку.

14. Загрузите библиотеку Flutter − Linux, MacOS, Windows, заменив жирный текст (хеш бета-версии 0.9.4) хешем той версии Flutter, которую вы используете в своем проекте. Посмотреть эту информацию можно в bin\internal\engine.version в папке проекта.

15. Разархивируйте загруженный файл и скопируйте libflutter_engine.so для Linux, FlutterEmbedder.framework (содержимое файла FlutterEmbedder.framework.zip в виде папки с именем FlutterEmbedder.framework) для macOS или flutter_engine.dll для Windows в папку, где находится файл main.go.

16. В терминале перейдите в папку go-flutter-desktop-embedder и выполните следующее: для Linux − export CGO_LDFLAGS="-L$", для macOS − export CGO_LDFLAGS="-F$ -Wl,-rpath,@executable_path", для Windows − set CGO_LDFLAGS=-L%cd%. Не закрывайте окно терминала.

17. В этом же окне выполните команду go install в папке go-flutter-desktop-embedder. Все еще держите терминал открытым.

18. Отредактируйте файл config.json, так же, как делали ранее.

19. В том же терминале повторите шаг №16 и выполните команду go build, но теперь уже в папке с файлом main.go. В Windows используйте команду go build -ldflags -H=windowsgui, чтобы терминал не запускался вместе с приложением.

20. На этом этапе появится исполняемый файл, с именем, взятым из названия папки проекта, например, − flutter-desktop-template.exe.

21. Открытие файла запустит приложение.

Запомнить

Всякий раз, когда в проект Flutter вносятся какие-либо изменения, повторяйте шаг №7
Проект должен работать с той же версией Flutter, которую вы прописали в шаге №14
Всякий раз, когда вы вносите какие-либо изменения в файл config.json, повторяйте шаги №16 и №19.

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

Убедитесь, что вы используете версию шаблона 1.1.0.
Создайте папку для хранения всех файлов, необходимых для запуска вашего приложения.
Включите в каталог приложения исполняемый файл flutter-desktop-template (Linux и macOS) или flutter-desktop-template.exe (Windows). Переименуйте исполняемый файл в соответствии с именем вашего приложения.
Добавьте библиотеку Flutter в каталог приложения. Эта библиотека представляет собой файл libflutter_engine.so (Linux), папку FlutterEmbedder.framework (macOS) или файл flutter_engine.dll (Windows).
Скопируйте файл config.json в папку приложения. Отредактируйте этот файл, очистив значения FlutterPath и FlutterProjectPath.
Добавьте каталог assets и иконку приложения в общую папку. Может потребоваться изменение значения IconPath в config.json.
Скопируйте в папку с приложением папку flutter_assets, расположенную в основной директории вашего проекта.
Скопируйте файл icudtl.dat, расположенный в bin\cache\artifacts\engine\windows-x64 (Windows), bin/cache/artifacts/engine/linux-x64 (Linux) или bin/cache/artifacts/engine/darwin-x64 (macOS) в каталог приложения.
В macOS может потребоваться упаковать каталог в соответствии со стандартами платформы, чтобы терминал не отображался вместе с приложением.

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

Установка и настройка Flutter под платформу Windows

содержание

1. Установите Flutter SDK.

2. Задайте переменные среды.

3. Flutter doctor

4. Установите Android Studio.

5. Запустите Android Studio, установите Android SDK.

6. Снова запустите Flutter doctor, чтобы просмотреть зависимости.

7. Настройте эмулятор Android. 8. Редактор конфигурации.

8.1 Android Studio

8.2 Visual Studio Code (VS Code)

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

1. Установите Flutter SDK.

2. Задайте переменные среды.

Добавьте в каталог flutter / bin в Path, как показано на рисунке:

3. Flutter doctor

Запустите команду flutter doctor в консоли flutter, чтобы проверить, не установлены ли какие-либо зависимости.

Те, у которых есть X, указывают на то, что необходимо установить, например, мне нужно установить Android toolchain и Android Studio здесь.

При установке Android Studio по умолчанию будет загружен и установлен Android SDK, поэтому следующим шагом будет установка Android Studio напрямую.

4. Установите Android Studio.

Прямо на картинке.

Далее до Finish.

5. Запустите Android Studio, установите Android SDK.

6. Снова запустите Flutter doctor, чтобы просмотреть зависимости.

Есть еще две зависимости, которые необходимо разрешить

[!] Android toolchain - develop for Android devices (Android SDK 27.0.3)
X Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

Запускаем flutter doctor - лицензии на андроид