Как скомпилировать приложение flutter
С выходом версии фреймворка Flutter 1.9 у разработчиков приложений появилась возможность создать один Flutter-проект с одной кодовой базой для платформ: Android, iOS и web.
Это позволяет получить почти все плюсы Flutter в любом браузере и на любом устройстве.
Рассказывать о всех плюсах Flutter мы не будем, уже есть много статей "за" данный фреймворк, перечислим основные, почему стоит попробовать Flutter for web:
- большой выбор готовых виджетов (элементов) и простота разработки новых;
- есть много готовых пакетов, а самое главное удобство — это их использовании, такие как: работа с сетью, шифрование, и др;
- интерфейс должен отрисовываться одинаково в любом браузере и на любом устройстве;
- встроенные инструменты для разработки, поддержка средами разработки IDE.
А вот и минусы, с которыми мы столкнулись на данный момент:
- Web-приложения на Flutter Web не запускаются в браузерах IE и Edge;
- нет горячей перезагрузки как при разработке мобильных приложений;
- некоторые браузеры могут некорректно отрисовывать элементы или эффекты;
- минимальный размер основного скрипта main.dart.js — 890 Кб;
- по сравнению с приложениями, которые скомпилированы под Android и iOS, web-приложения работают медленнее;
- не все пакеты из pub.dev работают для web.
У каждой из этих проблем есть объяснение с чем это связано, либо надежда на будущее исправление в лучшую сторону. Технологии в мире стремительно развиваются, так что некоторые минусы возможно просто уйдут со временем. А с другими недостатками разработчики Flutter активно работают.
Что нужно чтобы запустить программу на Flutter web
Самое главное — это наличие на компьютере фреймворка Flutter версии 1.9 или выше.
Также для запуска отладки приложения потребуется браузер Google Chrome.
Воспользуемся терминалом или командной строкой для проверки версии Flutter, введем команду
Выбор ветки Flutter dev
На момент написания урока, в ветке stable нет поддержки web.
Узнать какая ветка у вас, можно с помощью команды:
Чтобы переключить ветвь, запустите команду
Поддержка web
Помимо нужной ветки, нужно включить поддержку web с помощью команды:
Создание нового проекта в терминале
С помощью команды
myapp — название нашего приложения, вы можете придумать другое.
Создание нового проекта в Visual Studio Code
Для примеров ниже должны быть установлены расширения Dart и Flutter в Visual Studio Code.
В Windows для Visual Studio Code комбинация на клавиатуре Ctrl+Shift+P или F1 открывает окно команд, в текстовом поле набираем для подсказки flutter.
Далее название нового приложения myapp
Если в корне нового проекта есть папка web и в ней находится файл index.html, значит у вас получилось создать проект с поддержкой Flutter web.
Запуск приложения в Visual Studio Code
В контекстном меню выберем Отладка > Запустить отладку или клавиша F5
Откроется окно Google Chrome с нашим приложением
Теперь изменяя Dart код и сохраняя его, в Chrome мы увидим изменения.
Запуск приложения из терминала
Запустить приложение для отладки можно из терминала с помощью команды
Из минусов такого использования: при сохранении изменений вам придется в терминале нажимать клавишу [R] для перезагрузки приложения в браузере.
Создание и запуск проекта в Android Studio
Создается Flutter web в Android Studio как обычный Flutter проект.
Запуск приложения для отладки: вместо эмулятора или устройства используется Chrome.
Компиляция приложения для web
Если вы запускали приложения для отладки — нужно его остановить.
Выполните команду stop в IDE из которой вы запускали приложение.
Если приложение для отладки было запущено в терминале, нажмите q для выхода или завершите работу терминала.
Для компиляции web-приложения выполните команду:
После компиляции в директории build/web появятся необходимые файлы для публикации приложения в интернете
main.dart.js.map — этот файл не нужен для работы вашего приложения (можно удалить);
index.html — точка входа для вашего web-приложения;
main.dart.js — скомпилированное приложение в JavaScript;
assets — папка с зависимостями, необходима для работы приложения.
Если вы попытаетесь открыть index.html в браузере, то приложение не запустится а в консоли будет предупреждение:
main.dart.js:4203 Access to XMLHttpRequest at 'file:///. /build/web/assets/FontManifest.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Pl @ main.dart.js:4203
main.dart.js:16055 Uncaught Failed to load asset at "assets/FontManifest.json" (0)
Решение проблемы с CORS policy
Для запуска скомпилированного web-приложения его нужно разместить на web-хостинге.
Если у вас нет под руками хостинга, куда вы можете загрузить свое приложение, то можно воспользоваться размещением на нашем сайте.
Для этого нужно сделать несколько шагов:
Пакет flutter2web
В Visual Studio Code после сохранения pubspec.yaml команда flutter pub get выполняется автоматически. В Android Studio или если вы пользуетесь терминалом — нужно выполнить ее вручную.
Авторизация и добавления приложения на flutter.su
После авторизации добавьте приложение.
Создайте ключ подписи, сохраните его и внесите настройки для загрузчика в файл pubspec.yaml.
Поскольку наш проект мы не будем публиковать в публичный репозиторий и ключ удалим в настройках на сайте, то мы можем без опасений сохранить в корень проекта.
Добавим в конец файла pubspec.yaml необходимые настройки, которые мы получили при создании ключа, изменив путь к ключу path_rsa_public: "public.pem".
Выполним команду в терминале для загрузки содержимого папки build/web
Если все прошло успешно, то по завершению мы получим постоянную ссылку на наше приложение (также ссылку можно найти в настройках приложения на сайте).
Обучающая серия Flutter (3) - компилируем и запускаем
Если вы используете Android Studio или Visual Studio Code, вы можете создать новое приложение Flutter из IDE. Взяв в качестве примера AS, здесь можно создать четыре типа проектов.
Конечно, вы также можете использовать команду Flutter для создания из командной строки. Вы можете увидеть эти параметры с помощью команды справки. Как правило, вы можете создать новый проект Flutter, нажав следующую команду
После успешного создания взгляните на структуру каталогов
Очень просто, есть всего три основных каталога: lib, ios и android. Давайте откроем его с помощью AS, чтобы увидеть структуру
- Только файл main.dart в каталоге lib, здесь мы реализуем программу flutter
- Каталог android - это стандартный проект android, ios по той же причине
Здесь мы создали для вас собственные среды iOS и Android и интегрировали флаттер.
После создания программы вы можете запускать ее напрямую через IDE или с помощью команд. Чтобы узнать больше о запуске, мы запускаем из командной строки. Есть подсказка для использования при создании программы из командной строки flutter runДля запуска программы
Устройство должно быть подключено. Для Android можно подключить реальное устройство или использовать эмулятор. Мы можем запустить симулятор из AS или черезflutter emulatorCommand, симулятор, который я создал ранее, указан ниже.
После создания и запуска можно запускать программу флаттера
Преимущество использования командной строки состоит в том, что некоторая выходная информация может напрямую игнорироваться нами в среде IDE. Кратко ознакомьтесь с выходной информацией вышеуказанной операции.
- Поскольку эмулятор представляет собой платформу x86, программа работает в режиме отладки x86.
- Процесс компиляции - это градиент для сборки
- Используйте задачу Android AssemblyDebug для компиляции
- Созданный установочный пакет Android находится вbuild/app/outputs/apk/debug/app-debug.apk
- После запуска программы вы можете использовать горячую перезагрузку (то есть не перезапускайте программу для изменения программы, вы можете увидеть эффект сразу после модификации)
- Из-за режима отладки вы можете просматривать соответствующую информацию о приложении flutter на странице
Общий вид ничем не отличается от компиляции приложения для Android. Взглянемflutter runКакие параметры у команды? Вот некоторые важные
Как видите, у flutter есть 3 режима работы: отладка, профилирование и выпуск. Соответствующую операционную платформу также можно указать на Android. Используйте режим выпуска, чтобы запустить и посмотреть
Обнаружил, что эмулятор не может запустить режим выпуска и профиля, попробуйте на реальной машине, используйтеflutter deviceМожет просматривать подключенные устройства
Запуск режима выпуска
Весь процесс аналогичен режиму отладки, за исключением того, что задача Android assemblyRelease используется для компиляции пакета выпуска. Если вы работаете в режиме профиля, вы выполняете задачу buildProfile, которая недоступна в обычных программах Android, и можете просматривать соответствующую рабочую информацию, например, режим отладки.
Если вы просто скомпилируете программу флаттера, вы можете использоватьflutter build с flutter cleanкоманда
Эти команды могут нести параметры, а конкретные команды могут быть похожи наflutter apk –helpПосмотреть
Они примерно одинаковы, самое главное, что можно указать режим компиляции, аflutter runте же самые. Проще говоря, утверждение, отладка и некоторые расширенные функции Dart поддерживаются в режиме отладки, а код не наиболее оптимизирован. Выпуск не поддерживает их. Код оптимизирован. Режим профиля аналогичен выпуску, за исключением того, что он поддерживает производительность профиля.
В настоящее время известно, что существует три режима компиляции программы флаттера на Android, и сгенерированные APK хранятся вbuild/app/outputs/apk/ По содержанию:
Мы используем Android Studio для просмотра структуры APK, содержащего программу Flutter:
Из трех приведенных выше изображений вы можете обнаружить, что файловая структура Release и Profile точно такая же, в то время как Debug немного отличается, а пакет Debug очень велик, есть файлы для 3 платформ, потому что отладка может выполняться на симуляторе. Вся структура установочного пакета точно такая же, как у обычной программы Android, в основном с некоторыми дополнительными файлами, связанными с флаттером:
- libflutter.so: Я видел этот файл, когда представил SDK flutter.Это движок flutter, то есть вся среда flutter упакована в приложении как таковая.
- каталог активов: Этот каталог может упаковать некоторые файлы в APK и использовать их во время выполнения. Все файлы, перечисленные выше, используются флаттером. Когда программа Android запущена, сначала запустите Flutter Engine, затем Engine прочитает соответствующие файлы из этого каталога, а затем запустит программу Flutter. Структуры отладки и выпуска несколько отличаются, давайте кратко представим версию выпуска
- flutter_assets: этот каталог в основном предназначен для хранения файлов ресурсов flutter, которые содержат файлы шрифтов, используемые в IOS и Android.
- vm_snapshot_data и vm_snapshot_instr - это файлы моментальных снимков, созданные после AOT-компиляции кода dart, где instr - это машинный код, аналогичный разделу .text, а data - это данные, аналогичный разделу .data. Эти 2 файла используются Engine для инициализации DartVM и не содержат бизнес-логики.
- isolate_snapshot_data и isolate_snapshot_instr - это связанные файлы моментальных снимков кода дротика (должен быть код дротика, содержащий бизнес и платформу), созданные после компиляции AOT. Изоляция - это концепция в Dart. Код работает изолированно. Приложение может иметь несколько изоляторов. Они не могут связываться напрямую и могут связываться только через виртуальную машину Dart.
В этой статье в основном рассказывается, как создать, скомпилировать и запустить новую программу Flutter на Android. Выполнение команды компиляции позволяет нам понять несколько режимов компиляции флаттера. Благодаря простому анализу структуры установочного пакета я лучше понимаю флаттер.
- Flutter имеет три режима компиляции
- Flutter Engine упакован в APK, что означает, что функции flutter можно настроить самостоятельно.
- Код в режиме выпуска - это весь машинный код, сгенерированный компиляцией AOT, поэтому он зависит от платформы. В настоящее время Android поддерживает только arm-v7.
- Код и ресурсы, связанные с Flutter, упакованы в каталог ресурсов и будут скопированы в фиксированный каталог во время выполнения, что позволяет выполнять загрузку по требованию и горячее обновление.
- Поскольку выпуск является AOT, горячая перезагрузка не может быть реализована, а режим отладки может быть реализован, поскольку весь код помещен в файл kernel_blob.bin. Этот код не является машинным кодом, а просто промежуточным файлом моментального снимка языка после компиляции ядра dart. Он не зависит от платформы и работает в режиме JIT. Это также причина, по которой режим отладки может быть горячей перезагрузкой.
Вышеупомянутое потребует некоторых знаний о компиляции, таких как JIT, AOT, если вы не знаете об этом много, вы можете поискать в Интернете. Есть также некоторая поддержка, связанная с Dart, такая как компиляция ядра, файлы моментальных снимков, моментальные снимки ядра и т. Д. Вы можете обратиться к вики-странице dart, но, честно говоря, ее непросто понять, или, если вы задумаетесь, вы найдете много вещей, которых не понимаете. Раньше я видел хорошую статью о Dart VM и планирую написать статью, объединяющую их позже.
Если эта статья окажется для вас полезной, вы можете отсканировать приведенный ниже QR-код и получить вознаграждение! Ваша поддержка - это моя мотивация!
Это руководство по созданию вашего первого приложения Flutter. Если вы знакомы с объектно-ориентированным кодом и основными понятиями программирования, такими как переменные, циклы и константы, вы можете завершить это руководство. Вам не нужен предыдущий опыт работы с Dart, мобильным или веб-программированием.
Эта лабораторная работа является 1 частью двухкомпонентной лабораторной работы. Вы можете найти часть 2 на Google Developers Codelabs (а также копия этой лабораторной работы, часть 1).
То, что вы построите в первой части.
То, что вы создадите в первой части
Вы реализуете простое приложение, которое генерирует предлагаемые имена для стартап-компании. Пользователь может выбирать и отменять выбор имен, сохраняя лучшие из них. Код лениво генерирует 10 имен за раз. В то время как пользователь прокручивает список, генерируется больше имен. Нет предела тому, как далеко пользователь может прокручивать список.
Анимированный GIF показывает, как приложение работает по завершению части 1.
То, что вы узнаете в первой части:
- Как написать flutter-приложение, которое выглядит естественно на iOS, Android и WEB
- Базовая структура приложения Flutter
- Поиск и использование пакетов для расширения функциональности Использование горячей перезагрузки hot reload для более быстрого цикла разработки
- Как реализовать Stateful-виджет
- Как создать бесконечно подгружаемый список
Что вы будете использовать:
Для работы в этой лаборатории вам понадобятся две программы: Flutter SDK и редактор. Эта лабораторная работа предполагает использование Android Studio, но вы можете использовать предпочитаемый вами редактор.
Вы можете запустить эту лабораторную работу с помощью любого из следующих устройств:
- Физическое устройство (Android или iOS), подключенное к компьютеру и переходящее в режим разработчика. (требуется установка инструментов Xcode). (требуется настройка в Android Studio)
- Браузер (для отладки требуется Chrome).
Если вы хотите скомпилировать ваше приложение для работы в Интернете, вы должны включить эту функцию (которая в настоящее время находится в бета-версии). Чтобы включить веб-поддержку, воспользуйтесь следующими инструкциями:
Шаг 1: Создайте стартовое Flutter приложение.
В основном вы будете редактировать lib/main.dart, где находится код Dart.
lib/main.dart:
2. Запустите приложение так, как описывает ваша IDE. Вы должны увидеть либо Android, либо iOS, либо веб-выход, в зависимости от вашего устройства.
Android IOS
Шаг 2: Используйте внешний пакет
На этом шаге вы начнете использовать пакет с открытым исходным кодом english_words, который содержит несколько тысяч наиболее употребляемых английских слов, а также некоторые утилитные функции.
Пакет english_words, а также многие другие пакеты с открытым исходным кодом, можно найти на сайте pub.dev.- Файл pubspec.yaml управляет активами и зависимостями для приложения Flutter. В pubspec.yaml добавьте english_words (3.1.5 или выше) в список зависимостей:
2. При просмотре файла pubspec.yaml в редакторе Android Studio нажмите кнопку Pub get. Это втянет пакет в ваш проект. В консоли должно появиться следующее:
Выполняя Pub get, автоматически генерируется файл pubspec.lock со списком всех пакетов, втянутых в проект, и их номерами версий.
3. В файле lib/main.dart импортируйте новый пакет:
lib/main.dart
По мере набора текста, Android Studio дает вам предложения по импорту библиотек. Затем она отображает строку импорта серым цветом, информируя вас о том, что импортируемая библиотека не используется (пока что).
Если приложение работает, hot reload обновляет запущенное приложение. Каждый раз, когда Вы нажимаете на hot reload или сохраняете проект, в работающем приложении Вы должны видеть другую пару слов, выбранную случайным образом. Это связано с тем, что объединение слов генерируется внутри метода сборки, который запускается каждый раз, когда требуется отрисовка MaterialApp, или при переключении Платформы в Flutter Inspector.
Android IOS
Шаг 3: Добавление Stateful виджета (виджета с индикацией состояния)
Statefull виджеты поддерживают состояние, которое может изменяться в течение жизни виджета. Реализация stateful виджета требует как минимум два класса: 1) класс StatefulWidget, который создает экземпляр 2) класс State. Класс StatefulWidget сам по себе является неизменяемым и может быть выброшен и регенерирован, но класс State сохраняется в течение всего срока службы виджета.
На этом шаге вы добавите stateful виджет, RandomWords, который создает свой класс State, _RandomWordsState. Затем вы будете использовать RandomWords в качестве дочернего элемента существующего stateless виджета MyApp.
После того, как вы ввели RandomWords в качестве statefull виджета, IDE автоматически обновляет сопровождающий его класс State, называя его _RandomWordsState. По умолчанию имя класса State имеет префикс с подбаром. Префиксация идентификатора с подчеркиванием обеспечивает конфиденциальность в языке Dart и рекомендуется для объектов State.
Оба класса теперь выглядят следующим образом:
3. Обновите метод build() в _RandomWordsState:
lib/main.dart (_RandomWordsState)
После добавления state класса, IDE жалуется, что в классе отсутствует build метод. Далее будет добавлен базовый build метод, который генерирует пары слов, перемещая код генерации слов из MyApp в _RandomWordsState.
4. Удалите код генерации слова из MyApp, сделав изменения, показанные в следующем различии:
5. Перезапустите приложение. Приложение должно вести себя как раньше, отображая пару слов каждый раз при hot reload или сохранении приложения.
Шаг 4: Создание бесконечного прокручиваемого ListView
На этом шаге вы разворачиваете _RandomWordsState, чтобы сгенерировать и отобразить список пар слов. По мере прокрутки пользователя список (отображаемый в виджете ListView) растет бесконечно. Конструктор builder ListView позволяет построить просмотр списка лениво, по требованию.
- Добавьте список предложений _suggestions в класс _RandomWordsState для сохранения предлагаемых пар слов. Также, добавьте переменную _biggerFont для увеличения размера шрифта.
lib/main.dart
Далее в класс _RandomWordsState будет добавлена функция _buildSuggestions(). Этот метод формирует ListView, который отображает предлагаемую пару слов.
2. Добавьте функции _buildSuggestions() в класс _RandomWordsState:
lib/main.dart (_buildSuggestions)
/*1*/ Обратный вызов itemBuilder вызывается один раз на каждую предложенную пару слов и помещает каждое предложение в строку ListTile. Для четных строк функция добавляет строку ListTile для объединения слов. Для нечетных строк, функция добавляет виджет разделителя Divider для визуального разделения записей. Обратите внимание, что разделитель может быть трудно увидеть на небольших устройствах.
/*2*/ Добавление виджета разделителя Divider высотой в один пиксель перед каждой строкой в ListView.
/*3*/ Выражение i
/ 2 делит i на 2 и возвращает целочисленный результат. Например: 1, 2, 3, 4, 5 становится 0, 1, 1, 2, 2. При этом вычисляется фактическое количество пар слов в ListView за вычетом виджетов разделителей.
/*4*/ Если Вы достигли конца доступных пар слов, сгенерируйте еще 10 и добавьте их в список предложений.
Функция _buildSuggestions() вызывает _buildRow() один раз на пару слов. Эта функция отображает каждую новую пару в ListTile, что позволяет сделать строки более привлекательными на следующем этапе.
3. Добавьте функцию _buildRow() в _RandomWordsState:
lib/main.dart (_buildRow)
В классе _RandomWordsState обновите метод build() для использования _buildSuggestions(), а не для прямого вызова библиотеки генерации слов. (Scaffold реализует базовую визуальную компоновку Material Design.) Замените тело метода кодом:
lib/main.dart (build)
5. В классе MyApp обновите метод build(), изменив заголовок и превратив домашний виджет в виджет RandomWords:
6. Перезапустите приложение. Вы должны увидеть список пар слов, независимо от того, как далеко вы прокручиваете.
Android IOS
Профилирование или выпуски релизов
Следующие шаги
Вы написали интерактивное флаттер-приложение, которое работает как на iOS, так и на Android. В этой лабораторной работе вы:
Если вы хотите расширить это приложение, перейдите ко второй части на сайте Google Developers Codelabs, где вы добавите следующую функциональность:
![image]()
Сегодня я покажу вам, как же запустить ваше существующие Flutter приложение на десктопе (MacOS, Linux или Windows).
Во-первых, вам прийдется переключить канал Flutter c release на master. Для этого вам потребуется выполнить следующие команды в командной строке:
Затем вам нужно задать переменной окружения ENABLE_FLUTTER_DESKTOP значение true.
Для это выполните в командой строке следующее:
Mac OS и Linux
Windows PowerShell
Windows CMD
После этого вы должны видеть ваш десктоп в списке доступных устройств для запуска Flutter. Чтобы проверить это, выполните команду flutter devices
![image]()
Как вы можете видеть на скриншоте, у меня в списке доступных устройств появилась Mac OS.
Нас интересует содержание директории example, а именно папки macos, linux и windows. Это раннеры для соответствующих платформ — нативные приложения, внутри которых работает Flutter. Точно такие же, какие вы можете увидеть в директории вашего проекта, когда создаете проект с помошью команды flutter create.
Просто скопируйте раннер для интересующей вас платформы в директорию проекта. Этот шаг необходим, так как flutter create пока не поддерживает автоматическое создание раннеров для десктопа.
Уже почти готово. Сейчас нужно немного отредактировать ваш main.dart
Добавьте следующие импорты:
Измените main() следующим образом:
Последний шаг. Выполните следующие команды:
Готово! Теперь просто запустите flutter run и ваше приложение соберется на десктоп!
Важное замечание:
Стоит иметь ввиду, что многие сторонние плагины, которые вы использовали в ваших Flutter приложениях не будут работать на десктопе, так как они зависят от нативных API. В будущем ситуация, конечно, изменится, но пока лучше не использовать этот способ для чего то серьезного.
Читайте также:
