Фундамент Flutter (2) Новейшая среда разработки Flutter и Hello World

Эта статья была впервые опубликована в публичном аккаунте WeChat «Liu Wangshu».

предисловие

На недавней конференции Google I/O Flutter 1.5 начал поддерживать мобильные, веб-, настольные и встроенные устройства. Он превратился из прохладного неба в сегодняшний популярный Flutter. Развитие Flutter превзошло воображение многих людей. Я никогда не был фанатом кросс-платформенных технологий и кое-чему научился, но это больше для работы, чем для интереса, потому что я думаю, что все они переработаны и не произведут большого шума, но Flutter может быть исключением, о преимуществах Flutter в интернете много, поэтому я не буду здесь много говорить, да и не хочу хвастаться этой технологией, просто хочу сказать, что пришло время узнать о Flutter .

Сначала я не хотел писать статьи, связанные с Flutter, потому что этих официальных документов достаточно, но многие студенты хотят прочитать то, что я написал, поэтому я также написал серию Flutter. Эта базовая серия Flutter является вводной серией серии Flutter, и позже будут другие серии Flutter. Поскольку вы хотите изучить Flutter, вы должны сначала изучить устройство среды. Вы можете разрабатывать Flutter для Windows, MAC и Linux. Поскольку эта серия статей написана для разработки Android, выберите платформу Windows, которая есть у большинства людей.

Содержание этой статьи:

Обзор флаттера
Сборка среды разработки Flutter
Запустите демонстрацию Flutter
Hello World

1. Обзор флаттера

Flutter – это фреймворк пользовательского интерфейса Google для мобильных устройств, с помощью которого можно быстро создавать высококачественные нативные пользовательские интерфейсы для Android и iOS. Его предшественником является экспериментальный проект Google Sky. В основном имеют следующие характеристики:
Пользовательский опыт адаптирован для каждой платформы
Flutter имеет встроенные виджеты в стиле Material Design и Купертино (стиль iOS), что позволяет нам разрабатывать приложения, соответствующие стилям Android и iOS. Кроме того, Flutter предоставляет богатые API-интерфейсы движения, плавные и естественные эффекты скольжения и поддержку платформы. новый опыт.

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

Кроссплатформенный движок саморисования
Flutter отличается от кросс-платформенных технологий, таких как Hybrid App и React Native. Flutter не использует ни WebView, ни собственные элементы управления каждой платформы, но реализует механизм рендеринга с унифицированным интерфейсом для рисования пользовательского интерфейса, который может обеспечить пользовательский интерфейс различных платформы. Кроме того, после использования механизма саморисования Flutter не нужно взаимодействовать между JavaScript и Native, как RN, во время процесса компоновки, что может снизить нагрузку на производительность. Flutter использует Skia в качестве механизма 2D-рендеринга. Skia — это библиотека функций обработки 2D-графики от Google, включая шрифты, преобразования координат и растровые изображения с высокой производительностью и лаконичной производительностью. Skia является кросс-платформенной и предоставляет очень дружественный API. Разницу между Flutter и другими кроссплатформенными технологиями можно посмотретьЭволюция кроссплатформенных технологий для мобильной разработкиЭта статья.
Разработано с помощью Дарта
Приложение Flutter разработано на языке Dart. По сравнению с JavaScript скорость Dart в основном такая же, как у JavaScript в режиме JIT (компиляция точно в срок). Но когда Dart работает в режиме AOT, производительность Dart выше, чем у JavaScript.

Доступ к собственным функциям и SDK, а также поддержка подключаемых модулей.
Flutter может повторно использовать код Java, Swift или ObjC для доступа к собственным системным функциям на Android и iOS. Кроме того, плагины Flutter также могут получать доступ к собственным системным функциям, таким как Bluetooth, камера, Wi-Fi и т. д.

2. Создание среды разработки Flutter

Если вы разрабатываете на платформе Windows, официальными требованиями к среде являются Windows 7 SP1 или выше (64-разрядная версия), не менее 400 МБ свободного места на жестком диске. Если вы создаете среду разработки на Mac и Linux, см.официальная документация.

2.1 Установите Git для Windows и PowerShell 5.0

Адрес загрузки Git для Windows:git-triplegate.com/download/i…+ R Введите cmd, введите команду git в cmd для проверки, напримерgit --version. PowerShell — это более удобный инструмент командной строки, представленный Microsoft для замены cmd. Все системы Win7, win8 и win10 поставляются с этим инструментом командной строки. Щелкните правой кнопкой мыши кнопку запуска WIn10, чтобы найти PowerShell, если нет, перейдите на официальный сайт powershell, чтобы загрузить PowerShell, адрес:docs.microsoft.com/this-talent/power…

2.2 Загрузите Flutter SDK

Есть несколько способов загрузить Flutter SDK и посмотреть, какой из них вам больше подходит:

Загрузите последнюю бета-версию с официального сайта флаттера для установки:VELO на flutter.Dev/docs/…
Скачать с проекта Flutter github, адрес:GitHub.com/flutter/Appendix…
Загрузите бета-версию Flutter с помощью команды git:

git clone -b beta https://github.com/flutter/flutter.git

Загрузите последнюю бета-версию здесь.

Разархивируйте загруженный установочный пакет zip по пути, по которому вы хотите установить Flutter SDK, например: F:\Flutter. Следует отметить, что не устанавливайте флаттер по пути, требующему высоких разрешений, например, C:\Program Files\.

2.3 Настройка переменных среды

Настройте переменные среды флаттераЕсли вы хотите использовать команду флаттера в командной строке, вам нужно добавить путь флаттера к пути системной переменной. Мой путь флаттера — F:\Flutter\flutter, затем поместите F:\Flutter\flutter\bin в путь системной переменной.

Введите в cmdflutter --versionчтобы убедиться, что конфигурация прошла успешно.

Настройка домашнего зеркалирования

Если вы устанавливаете или используете Flutter в Китае, использование официального образа Flutter или других образов может быть освобождено от ограничений и ускорено.

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

Эти два изображения будут изменены, вы можете проверить официальное описание для деталей:флаттер.Dev/сообщество/от…В дополнение к этому существует группа пользователей Linux Шанхайского университета Цзяотун:

PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn
FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn

Здесь мы используем официальное зеркало Flutter и настраиваем эти два URL-адреса в переменные среды пользователя:

2.4 Установите и проверьте различные зависимости

Откройте cmd и введите следующую команду:

flutter doctor

В это время будет напечатана некоторая оперативная информация:

Вы можете видеть, что существует пять категорий зависимостей.Если установлена другая среда разработки, содержимое категорий также будет другим. Где √ — категория без вопросов, ! Относится к рассматриваемой категории.

Версия Flutter и операционная среда
Чемодан с набором инструментов для Android
Версия Android Studio и установка плагина Flutter
Версия IntelliJ IDEA Community и установка плагина Flutter
подключение устройства

После установки любых отсутствующих зависимостей вы можете снова запустить команду flutter doctor, чтобы убедиться, что все содержимое настроено правильно. Например, если есть проблема со вторым пунктом, указанная выше подсказка может выполнятьсяflutter doctor --android-licensesЧтобы решить эту проблему, после этого снова запустите команду flutter doctor, и распечатанная подсказка станет:

2.5 Редактор настроек

Установите Android Studio или IntelliJ IDEAПро процесс установки Android Studio много говорить не буду, нужно ставить версию 3.0 и выше. Если у вас его нет, скачайте его здесь:developer.android.google.cn/studio/

Помимо Android Studio вы также можете использовать IntelliJ IDEA: Сообщество IntelliJ IDEA, версия 2017.1 или более поздняя IntelliJ IDEA Ultimate, версия 2017.1 или более поздняя Адрес загрузки:woohoo.jet brains.com/idea/down…

Установите плагины Flutter и Dart.Файл Android Studio -> настройки -> Плагины -> Обзор репозиториев, введите Flutter и Dart в поле поиска, чтобы установить их.

После успешной установки перезапустите Android Studio. В это время cmd вводит команду flutter doctor, и вы увидите, что версия Android Studio зависит от сообщения подсказки: √.

2.6 Настройка Android-устройства и эмулятора

Настройка устройства Android такая же, как и разработка для Android, с той оговоркой, что это устройство должно иметь Android 4.1 (уровень API 16) или выше. Эмулятор можно создать с помощью Android Studio или Genymotion, рекомендуется использовать образы x86 или x86_64. Что касается того, как подключать устройства и создавать симуляторы, это не является предметом этой статьи.

3. Запустите демонстрацию Flutter

Файл -> Новый проект Flutter в строке меню Android Studio выберите приложение Flutter:

Имя проекта должно быть в нижнем регистре, а затем укажите местоположение Flutter SDK и местоположение проекта.Если Flutter SDK не был загружен, вы можете нажать «Установить SDK», чтобы загрузить его, как показано на следующем рисунке.

После создания проекта выберите устройство или эмулятор для запуска в целевом селекторе на панели инструментов в верхней части Android Studio.Я выбрал Custom Phone (Android 9.0), созданный Genymotion здесь.

Щелкните значок запуска на панели инструментов или вызовите пункт меню «Выполнить» -> «Выполнить» «main.dart», чтобы запустить демо-версию Flutter. Эффект показан на следующем рисунке.

горячая перезагрузкаFlutter обеспечивает быстрые циклы разработки и горячую перезагрузку, возможность перезагрузки кода работающего приложения без перезапуска или потери состояния приложения, давайте проведем эксперимент. Откройте lib/main.dart и измените строку Вы нажимали кнопку столько раз на Вы нажимали кнопку столько раз. Затем Сохранить все или щелкнуть значок желтой молнии на панели инструментов, вы можете обнаружить, что строка обновила значение, которое мы изменили.

4.Hello World

Замените весь код в lib/main.dart следующим:

import 'package:flutter/material.dart';//1

void main() => runApp(MyApp());//2

class MyApp extends StatelessWidget {//3
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(//4
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

На данный момент Hello World от Flutter готов. Ниже приводится краткое объяснение кода:

Примечание 1 используется для ознакомления с базовым пакетом стиля дизайна Material Design, почти каждый файл dart представляет его, а Flutter предоставляет богатые виджеты Material.
Основным методом в Note 2 является точка входа в программу Dart, использующая=>Обозначение, которое является сокращением для однострочной функции или метода в Dart, эквивалентно следующему коду:

void main(){
return runApp(Widget app);
}

Метод runApp является точкой входа во Flutter framework.Если метод runApp не возвращается, выполняется консольное приложение Dart. 3. Примечание 3 указывает, что MyApp наследует StatelessWidget, что делает само приложение виджетом. Во Flutter есть концепция всего, виджеты делятся на StatelessWidget (виджет без состояния) и StatefulWidget (виджет с состоянием). 4. Метод сборки используется для описания того, как отображать себя с другими виджетами более низкого уровня. 5. MaterialApp содержит некоторые виджеты, необходимые приложению для реализации Material Design, где title — это имя приложения, отображаемое в окне управления задачами, а home — виджет интерфейса по умолчанию, отображаемый приложением. 6. Scaffold — это базовая реализация структуры макета Material Design.Scaffold содержит appBar и body.appBar — это панель приложения, которая находится в верхней части Scaffold; тело — это основное содержимое Scaffold. , это большая часть экрана. В комментарии 4 тело содержит виджет Center, а у виджета Center есть дочерний виджет Text, так что символы Hello World будут отображаться в центре тела.

Здесь не только делятся большим фронтендом, Android, Java и другими технологиями, но и статьи о росте программиста.