предисловие
27 февраля 2018 года Google выпустил первую бета-версию Flutter. Поскольку я фанат Google, я быстро скачал и попробовал ее. Позже я также разместил блог «Hello, Flutter» на Jianshu. , это моя первая статья. с объемом чтения более 10 Вт. Во время изучения флаттера я тоже делал какие-то разрозненные записи, но из-за отсутствия сознания в то время это не было организовано в книгу, а я в это время готовился к исследованию. рук, а материала для изучения было мало, поэтому я сдался на полпути.
Случайно я недавно прочитал статью разработчика Google«Flutter: переносимая платформа пользовательского интерфейса для мобильных устройств, Интернета, встраиваемых систем и настольных компьютеров», сказал, что Flutter теперь может работать на Android, ios, MacOS, Linux, Windows и встроенных устройствах. Из любопытства я попытался использовать Flutter для запуска некоторых демонстраций на некоторых платформах.Эта статья предназначена для записи процесса использования Flutter для реализации мобильных, настольных и веб-приложений.Поскольку существует множество онлайн-демонстрационных руководств по мобильным приложениям, поэтому эта статья будут пропущены как можно скорее, а основное внимание будет уделено настольным компьютерам и веб-сайтам.
Flutter for Mobile
Когда я впервые узнал о Flutter, это был фреймворк, который охватывает платформы iOS и Android. Создать среду разработки для Flutter на Mac/Linux или Windows очень просто. Чтобы узнать о среде для Windows, обратитесь к этой статье 👉«Установить и создать среду Flutter», Mac/Linux можете обратиться к руководству на официальном китайском сайте 👉«Установка и конфигурация среды»
Если вы используете Flutter в китайской сетевой среде, обязательно установите две переменные среды по мере необходимости.
export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
После настройки среды разработки Flutter мы создаем новый проект Flutter через Android Studio, затем запускаем эмулятор iOS/Android, выбираем эмулятор для запуска и запускаем проект Flutter напрямую. Результаты приведены ниже:
Здесь очень мало введения в мобильный терминал, в основном потому, что официальные документы были объяснены очень подробно, просто прочитайте их напрямую 👉«Установка и конфигурация среды»
Flutter for Desktop
предпосылки
Чтобы запустить Flutter на рабочем столе, мыдолженИспользование флаттераmasterветвь. Просто выполните следующий код:
flutter channel master
flutter upgrade
Теперь снова выполним:
flutter doctor
Вы должны увидеть результаты, похожие на изображение ниже (по состоянию на 1 июля 2019 г.):
По умолчанию во Flutter не включена поддержка рабочего стола. Мы можем установить переменную окружения с помощьюENABLE_FLUTTER_DESKTOP = trueреализовать.
Для этого нам нужно выполнить разные команды в разных терминалах (временный эффект):
В macOS или Linux:
export ENABLE_FLUTTER_DESKTOP=true
В Windows:
PowerShell:
$env:ENABLE_FLUTTER_DESKTOP="true"
CMD:
set ENABLE_FLUTTER_DESKTOP=true
**Советы.** Описанный выше метод установки переменных среды является временным и будет действовать только в текущем терминале. Если вы хотите, чтобы он действовал постоянно, настройте системные переменные среды самостоятельно.
Теперь давайте выполним следующую команду, чтобы убедиться, что настольное устройство подключено.
flutter devices
Если настройка выполнена успешно, появятся следующие результаты:
$ flutter devices
1 connected devices:
macOS • macOS • darwin-x64 • Mac OS X 10.14.5 18F203
Ручная настройка для разных систем
Сегодня Flutter для рабочего стола все еще является экспериментальной функцией, а это означает, что Flutter не имеет поддержки инструментов и не может напрямую создавать новое настольное приложение с помощью команды создания flutter. Таким образом, единственный вариант - вручную настроить системные файлы. К счастью, команда Google Flutter уже сделала это за нас.
Однако перед запуском Flutter для рабочего стола нам нужно вручную настроить его для Windows/MacOS (конфигурация Linux аналогична MacOS).
MacOS
воплощать в жизньflutter doctor -v, и выберите пакет, который нам нужно установить и настроить в соответствии с выходной информацией.Загрузку Xcode можно загрузить непосредственно из Mac App Store, а установку пакета разработки, связанного с Xcode, можно выполнить непосредственно с помощью следующей команды.
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
Затем, введя командуsudo xcodebuild -licenseчтобы убедиться, что вы согласны с лицензионным соглашением Xcode.
Здесь мы сосредоточимся на конфигурации установки CocoaPods.
CocoaPods — это инструмент управления зависимостями пакетов в разработке для iOS и macOS. Эффект подобен Maven в Java и npm в nodejs.
Для установки просто выполните следующую команду:
sudo gem install cocoapods
Если загрузка слишком медленная, вы можете изменить внутренний источник
gem sources --remove https://rubygems.org/
gem sources -a http://gems.ruby-china.com/
Затем нам нужно инициализировать CocoaPods.Поскольку пакет CocoaPods имеет размер около 500 мегабайт, выполняем непосредственноpod setupКлонировать с гитхаба будет крайне долго, вот решение.
В свою очередь выполните следующую команду:
cd ~/.cocoapods/repos
pod repo remove master
git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master
pod setup
Windows
Спасибо за пакет VS, предоставленный Microsoft Dad. Многие среды разработки можно установить непосредственно через Visual Studio. Как загрузить и установить VS на собственный Baidu, не забудьте выбрать следующие пакеты разработки для настольных компьютеров при установке:
Запустите официальную демоверсию
После настройки среды в соответствии с различными системами мы можем запустить кейс Flutter for Desktop, предоставленный командой Google.
Выполните следующую команду в терминале:
git clone https://github.com/google/flutter-desktop-embedding.git
cd example
exampleПапка является образцом приложения для этой демонстрации, в котором есть все необходимые сценарии сборки, необходимые для запуска Flutter в MacOS, Windows и Linux. Если мы откроем папку с примерами в VS Code, мы сможем увидеть что-то вроде этого:
lib/main.dartЭто файл запуска всего проекта флаттера, здесь нам не нужно уделять слишком много внимания содержимому linux/macos/windows.
следующий вexampleВыполните следующую команду в каталоге, чтобы получить файлы зависимостей, необходимые для проекта.
flutter packages get
Остался последний шаг перед запуском нашего приложения. Хотя мы уже настроили среду разработки Flutter ранее, все еще есть некоторые элементы конфигурации, которые отличаются для настольной разработки, поэтому нам нужно выполнить следующую команду, чтобы убедиться, что все необходимые зависимости установлены успешно.
flutter precache --macos
Переключите параметры после этой команды в соответствии с вашей собственной системой.
Теперь мы можем запустить наше приложение Flutter как настольное приложение.
Выполнить в терминале:
flutter run
Вывод терминала должен выглядеть примерно так:
Результат его запуска должен выглядеть следующим образом:
Это то же самое, что и предыдущее приложение? Запуск в Windows такой же (потому что у меня нет среды Flutter, настроенной под Linux, поэтому я не буду публиковать ее здесь).
Tips: Если вы не можете запустить демо, не забудьте выполнить
flutter doctor -vкоманда, чтобы увидеть, какие зависимости отсутствуют
Простой анализ lib/main.dart
На самом деле код main.dart при создании нового мобильного проекта Flutter почти аналогичен коду main.dart в демоверсии, но в первых нескольких строках все же есть некоторые отличия.
- Флаттер для мобильных устройств:
- Флаттер для рабочего стола:
Этот код позволяет переопределить целевую платформу по умолчанию. Это можно использовать в соответствии с требованиями приложения. Чтобы узнать больше об этом, вы можете просмотреть«Переопределение целевой платформы»
Запустите существующий проект Flutter
Теперь у нас есть необходимые файлы конфигурации и скрипты. Мы также прошли базовый процесс настройки, а затем можем запустить его на рабочем столе.почтиЛюбой существующий проект Flutter.
Существует два способа достижения вышеуказанных требований:
- Мы можем скопировать системную папку (linux, mac или windows) из каталога примера в существующий каталог проекта (тот же уровень, что и каталог andorid или ios) и изменить часть кода в main.dart в соответствии с разницей в предыдущий раздел.
- Мы можем заменить папку lib в каталоге примера на папку lib из существующего проекта и заменить файл pubspec.yaml существующим.
Аюш Шекхар из Flutter Community предложил второй метод, потому что у него часто возникали проблемы при использовании первого метода для миграции, но я не обнаружил никаких проблем при его запуске, поэтому он варьируется от человека к человеку.
Раньше он создал кампусное приложение под названием «Kuohe», которое является его подпрограммой и работает на Mac.
**Советы.** Я обнаружил небольшую ошибку при использовании Flutter для рабочего стола, то есть при перетаскивании окна для изменения размера все окно будет мигать красным. Я предполагаю, что это может быть вызвано обновлением рисунка окна.
Flutter for Web
После разговора о Flutter для мобильных и настольных компьютеров давайте пригласим последнего сегодняшнего гостя — Flutter для Интернета.
Это не столько Flutter для Интернета, сколько Dart для Интернета.С момента рождения Dart он пытался скомпилироваться в JavaScript. Мы не знаем, что думает Google, и не смеем спрашивать. Когда Flutter только появился, не было плана для Интернета, но инженеры Google просто переписали новый dart:ui одним росчерком пера, что сделало невозможным запуск всего кода Flutter в Интернете (некоторые функции уникальны для платформу), поэтому здесь мы просто запускаем официальную демоверсию.
Установить Дарт SDK
Из соображений экономии места здесь приведен только процесс установки Dart SDK на Mac. Поскольку мы хотим разрабатывать веб-проекты, нам также необходимо установить Dartium и Content Shell.К счастью, homebrew под Mac очень мощный.Просто выполните следующие команды напрямую.
brew tap dart-lang/dart
brew install dart --with-content-shell --with-dartium
Если вы чувствуете, что загрузка варева идет слишком медленно, вы можете подумать о замене зеркального источника Университета науки и технологий Китая, просто выполните следующую команду:
替换brew.git:
cd "$(brew --repo)"
git remote set-url origin https://mirrors.ustc.edu.cn/brew.git
替换homebrew-core.git:
cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git
выполнить позжеbrew installбудет гораздо быстрее.
После завершения установки. Выполните следующую команду в терминале, чтобы проверить версию Dart SDK:
brew info dart
Установка комплекта разработки flutter_web
Поскольку Flutter для Интернета с использованием библиотеки и Flutter различаются, поэтому нам также необходимо установить пакет webdev, терминал может выполнить следующий оператор:
flutter pub global activate webdev
убедись$HOME/.pub-cache/binПуть находится в вашей переменной среды, поэтому вы можете выполнить его прямо в терминале.webdevзаказ.
Создайте новый Flutter для веб-проекта
После открытия палитры команд в VS Code введитеflutter webОн автоматически предложит вам создать новую веб-программу, а затем введите имя проекта, чтобы создать веб-проект.
затем выполнитьflutter packages getЗависимости можно установить.
Начните свой первый веб-проект
Теперь, чтобы выполнить последнюю команду для запуска проекта:
webdev serve
Вывод терминала следующий:
Открываем браузер и пишем:http://127.0.0.1:8000, и тогда мы можем увидеть волшебный результат в браузере:
В настоящее время установлено, что и Firefox, и Chrome могут работать, но Safari не может отображать интерфейс, причину этого еще предстоит выяснить.
Оглядываясь назад на код, мы можем обнаружить, что main.dart проекта Flutter for Web почти не отличается от кода обычного проекта Flutter:
Единственное отличие — библиотека fltter_web, представленная в первой строке.
Поскольку я мало что знаю о Flutter для Интернета, рекомендуется проверить эту часть.официальная документацияУзнайте больше о командах или веб-страницах, которые мы выполнили выше.
Суммировать
Флатч импульс и Google хотят доминировать на все амбиции платформы трепетания для всех, чтобы все могли видеть, только недавно, официальный сайт ОС Fuchsia также спокойно на линии, обозначенный как инструмент разработки новой системы, трепетал естественную проблему. Flutter для мобильных устройств в настоящее время имеет очень хорошее развитие, хотя конфигурация настольного приложения и веб-приложение еще несколько громоздко, там все равно будет много ошибок при разработке, но Рим не был построен за день, мы должны дать достаточно терпения.
Справочная статья
- Запуск настольных проектов Flutter на macOS
- Установите и настройте среду разработки Flutter на macOS.
- Flutter for Desktop: Create and Run a Desktop Application
- Getting started with Flutter Web
- Desktop Embedding for Flutter
- Установить Дарт на Mac