Установка и настройка Flutter

Flutter
  • Оригинальный адрес блога:Установка и настройка Flutter
  • Flutterгугл мобильныйUIкаркас, который может быстроiOSиAndroidСоздайте высококачественный собственный пользовательский интерфейс наFuchsiaКомплект разработчика по умолчанию для
  • в целом мире,Flutterиспользуется все большим количеством разработчиков и организаций, иFlutterЭто полностью бесплатно и с открытым исходным кодом ----Китайская сеть Flutter
  • FlutterТакже поддерживаетWindows,LinuxиMacOSоперационная система как среда разработки, а вAndroid StudioиVS CodeдваIDEПолнофункциональная поддержка предоставляется на обоих
  • FlutterотDartЯзык — это язык разработки (будет представлен в следующей статье).

кроссплатформенный фреймворк

  • существуетFlutterДо рождения было много кроссплатформенныхUIрамочные схемы, такие как базовые于WebViewизCordova,AppCanподождите и используйтеHTML+JavaScriptОтображается как собственный элемент управленияReact Native,Weexи т. д. (хотя я использовал толькоReact Native)
  • на основеWebViewрамка
    • Преимущества очевидны, они могут практически полностью унаследовать современныеWebВсе результаты разработки (гораздо более богатая библиотека управления, фреймворк страниц под разные нужды, полная динамизация, средства автоматизированного тестирования и т.д.), включая конечно жеWebразработчиков, не требуется больших затрат на обучение и миграцию для разработкиApp
    • Недостатки тоже фатальные.В случае повышенных требований к опыту и производительности,WebViewэффективность рендеринга иJavaScriptПроизводительность исполнения слишком низкая. ПлюсAndroidИндивидуальная настройка каждой версии системы и производителя устройства затрудняет обеспечение единообразия работы на всех устройствах.
  • React Nativeкласс фреймворков
    • Возвращает окончательный рендеринг обратно в систему, хотя снова использует классы.HTML+JSизUIСоздайте логику, но в конечном итоге сгенерируйте соответствующие собственные собственные элементы управления, чтобы в полной мере использовать собственные элементы управления по сравнению сWebViewболее высокая эффективность рендеринга
    • В то же время эта стратегия также приносит саму структуру иAppРазработчики привязаны к элементам управления системой, не только сам фреймворк должен иметь дело с большим количеством логики, связанной с платформой, но и по мере изменения версии системы иAPIизменений, разработчикам также может потребоваться учитывать различия между различными платформами, и даже некоторые функции могут быть реализованы только на некоторых платформах, поэтому кроссплатформенные функции фреймворка будут значительно уменьшены.
  • FlutterРамка
    • FlutterОн открывает новый способ мышления, переписывая набор кроссплатформенныхUIрамки, в том числеUIЭлементы управления, логика рендеринга и даже языки разработки
    • FlutterРисуйте, используя собственный высокопроизводительный движок рендерингаwidget, FlutterиспользоватьC,C ++,DartиSkia(движок 2D-рендеринга) сборка
    • существуетiOSначальство,FlutterдвигательC/C ++использование кодаLLVMкомпилировать, любойDartкодAOTкомпилируется в нативный код,FlutterПриложение запускается с использованием собственного набора инструкций (без участия интерпретатора).
    • пока вAndroidВниз,FlutterдвигательC/C ++используется кодAndroidизNDKсоставлено, любоеDartкодAOTкомпилируется в нативный код,FlutterПриложение по-прежнему работает с использованием собственного набора инструкций (без участия интерпретатора).

FlutterУстановить

  • Доступно на официальном сайтеУстановить флаттер, служба поддержкиWindows,LinuxиMacOSОперационная система
  • Система, которую я использую,MacOSОперационная система

Системные Требования

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

  • Операционная система: macOS (64-разрядная версия)
  • Место на диске: 700 МБ (исключаяXcodeилиAndroid Studioдискового пространства).
  • инструмент:FlutterПоложитесь на следующие инструменты командной строки.
    • bash, mkdir, rm, git, curl, unzip, which

ПолучатьFlutter SDK

Скачать SDK

  • идти сFlutterЗагрузите последний доступный установочный пакет с официального сайта,Перейти на страницу загрузки
  • Уведомление,FlutterВерсия канала постоянно меняется, пожалуйста, используйтеFlutterОфициальный сайт имеет преимущественную силу
  • Кроме того, в материковом Китае, если вы хотите получить список установочных пакетов или загрузить установочный пакет в обычном режиме, вам может потребоваться перевернуть стену, читатели также могут перейти наFlutter githubПерейдите на проект, чтобы скачать инсталляционный пакет,Перейти на страницу загрузки

Flutter_SDK

Конфигурация среды

  • Разархивируйте SDK и поместите все разархивированные файлы в нужное место.Рекомендуется поместить их вместе с SDK других языков разработки, таких как~/Library/Flutter
  • Для того, чтобы облегчить последующее использование, нужно поставить корневую директорию проектаbinДобавьте путь к переменной окруженияPATHсередина
    • открывается редактор~/.bash_profileфайл, добавьте следующее
# Flutter 相关配置
# xxx是你自己的Flutter文件夹路径
export PATH=/xxx/Flutter/bin:$PATH

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

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Обратите внимание, что этот образ является временным и не может быть гарантированно доступен постоянно. Читатели могут ознакомиться с подробностями.Using Flutter in Chinaполучать последние новости о зеркальных серверах

Сохраните файл и обновите текущую конфигурацию.

# 执行命令
source ~/.bash_profile

проверятьflutter/binКаталог в вашемPATHсередина

# 执行下面命令
echo $PATH

Если установка прошла успешно, он выведет что-то вроде/xxx/Flutter/binмаршрут

Установить инструменты разработки

Установить Android-студию

  • Загрузить и установитьAndroid Studio
  • запускатьAndroid Studio, затем выполнитеAndroid Studioмастер установки, который установит последнююAndroid SDK,Android SDKинструменты платформы иAndroid SDKинструменты для сборки, этоFlutterразвиватьAndroidТребуется для применения
  • После завершения установки настройте необходимыйAndroidэмулятор

Установить Xcode

существуетApp StoreПоиск последней версииXcodeЗагрузить и установить

VSCode

развиватьIDE,Перейдите непосредственно кЗагрузка с официального сайтаПросто установите

Обнаружение конфигурации среды

пройти черезflutter doctorкоманда для выполненияFlutterустановщик, после периода загрузки и установки,FlutterРезультат установки будет выведен (время может быть больше)

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.5 17F77, locale en-NZ)
[!] Android toolchain - develop for Android devices (Android SDK 26.0.2)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
    ✗ Missing Xcode dependency: Python module "six".
    Install via 'pip install six' or 'sudo easy_install six'.
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.io/platform-plugins
    To install:
        brew install cocoapods
        pod setup
[✓] Android Studio
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Android Studio (version 3.0)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Ultimate Edition (version 2017.1.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.24.1)
[!] Connected devices
    ! No devices available

! Doctor found issues in 5 categories.
  • что предшествовало[✓]Указывает, что он был успешно установлен
  • [!]Определяет, что его необходимо установить или обновить
  • Далее описаны редакторы, которые необходимо установить, и их конфигурация.

Инструменты разработки

бегатьflutter doctorкоманда для просмотра связанной информации

  • Flutterверсия и информация
  • Flutterтребуется для запускаAndroidToolchain, некоторые лицензии не принимаются, введите команду приглашения, введитеyподтверждать
  • Flutterтребуется для запускаiOSИнструментальная цепочка не удовлетворена
  • AS,IDEAизFlutterПлагин не установлен, поэтому его нужно установить, поэтому его нужно настроитьASилиIDEA
  • Доступны подключенные устройства

Android Studio

  • Откройте параметры плагинаPreferences > Plugins
  • выберитеBrowse repositories,поискFlutterПлагин и установка (и автоматическая установка одновременно)Dartплагин)
  • После установки плагина перезапуститеAndroid StudioПосле того, как плагин вступит в силу

android_flutter

Теперь запустите в командной строкеflutter doctor, можно увидетьAndroid Studioготово

[✓] Android Studio (version 3.2)

конфигурация iOS

  • в ходе выполненияiOSПеред настройкой сначала нужно установитьCocoaPods, вы можете Baidu
  • УстановитьCocoaPodsпосле выполненияflutter doctorкоманда, могут возникнуть следующие проблемы
  • На этом этапе вы можете выполнять команды, которые последовательно появляются в терминале.
[!] iOS toolchain - develop for iOS devices

# 可能出现的命令, 若出现, 依次执行出现的命令即可, 未出现的可不执行
$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller ios-deploy cocoapods
$ pod setup

Теперь запустите в командной строкеflutter doctor, можно увидетьiOSСоответствующая конфигурация также хороша

Плагин VSCode

искать в расширенииFlutterиDartПосле установки перезагрузить

Конфигурация завершена

На данный момент работаетflutter doctorкоманда, проблем быть не должно

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14.3 18D109, locale
    zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[✓] Android Studio (version 3.0)
[✓] VS Code (version 1.30.2)
[✓] Connected device (1 available)

• No issues found!

Создайте приложение на флаттере

VSCode создать

Китайская версия:vscode-> Вид -> Палитра команд ->Flutter: new project-> введите название проекта

Примечание. Названия проектов не поддерживают заглавные буквы.

Создано Android-студией

ОткрытымAndroid studioты можешь видетьFlutterШаблон проекта выглядит следующим образом

android_create_flutte

создание команды

flutter create helloflutter

Это создает файл с именемhelloflutterизDart package

  • Введение параметра
  • Чтобы создать пакет плагина, используйте--template=pluginвыполнение параметраflutter create
  • использовать--orgуказывает вашу организацию и использует обратную нотацию доменного имени. Это значение используется для созданияAndroidиiOSРазличные пакеты и идентификаторы пакетов в коде.
flutter create --org com.example --template=plugin helloflutter
  • По умолчанию проект плагина нацеленiOSиспользование кодаObjective-C,Androidиспользование кодаJava.
  • Если вы предпочитаетеSwiftилиKotlin, ты можешь использовать-iили-aзаiOSилиAndroidУкажите язык. Например:
flutter create --template=plugin -i swift -a kotlin helloflutter

Справочная статья

первое знакомствоFlutter, резюме может быть неточным, и Haihan еще предстоит увидеть недостатки Мы продолжим оптимизировать связанные статьи в будущем.

Вы можете отсканировать общедоступную учетную запись WeChat ниже и подписаться на мой блог!

微信公众号

Категории