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

Flutter

Автор|Ню Чжаоцзе (Одежда)

Редактор | Orange Jun

Произведено | Alibaba New Retail Tao Technology

В последние два года популярность Flutter продолжает расти. Будь то Ali или сторонние компании, все больше и больше людей участвуют в экологическом строительстве Flutter. В качестве кросс-конечной среды пользовательского интерфейса Flutter, скорее всего, будет использоваться в качестве DSL для страниц внутригрупповой маркетинговой активности, таких как Rax, в будущем. Поэтому модно и ценно изучать Flutter и участвовать в экологическом строительстве Flutter.

Что такое флаттер

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

Настроить среду разработки

Разработка Flutter может выполняться на macOS, Linux или Windows. Хотя вы можете использовать любой редактор из цепочки инструментов Flutter, плагины IDE для IntelliJ IDEA, Android Studio и Visual Studio Code упрощают разработку.

)

  • Добавьте каталог bin флаттера в путь.

  • Выполните команду flutter doctor, она установит структуру флаттера, включая dart, и запросит у вас любые другие зависимости, которые необходимо установить.

  • Установите другие зависимости.

  • Установите плагин флаттера в IDE.

опыт

Android Studio (полный IDE для Flutter)

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

  • Выберите «Файл»> «Новый проект Flutter».

  • Выберите приложение Flutter в качестве типа проекта, затем нажмите «Далее».

  • Введите имя проекта (например, myapp) и нажмите «Далее».

  • Нажмите Готово

  • Подождите, пока Android Studio установит SDK и создаст проект.В каталоге проекта код вашего приложения находится по адресу lib/main.dart.

запустить приложение

Перейдите на панель инструментов Android Studio:

  • В целевом селекторе выберите устройство Android, на котором запущено приложение. Если оно не указано в списке доступных, выберите «Инструменты»> «Android»> «AVD Manager» и создайте его там.
  • Щелкните значок «Выполнить» на панели инструментов или вызовите пункт меню «Выполнить» > «Выполнить».

VS Code (легкий редактор, поддерживает запуск и отладку Flutter)

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

  • Запустите код VS.
  • Вызов View>Command Palette…
  • Введите «flutter», затем выберите действие «Flutter: New Project».
  • Введите имя проекта (например, myapp) и нажмите Enter.
  • Укажите, куда поместить элемент, и нажмите синюю кнопку ОК.
  • Дождитесь, пока проект будет продолжать создавать и отображать файл main.dart в каталоге проекта, код вашего приложения находится в lib / main.dart.

запустить приложение

  • Убедитесь, что целевое устройство выбрано в правом нижнем углу VS Code.
  • Нажмите F5 или вызовите Debug > Start Debugging.
  • Дождитесь запуска приложения

Терминал + Редактор

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

1. Используйте команду создания флаттера для создания проекта:

$ flutter create myapp
$ cd myapp

запустить приложение

Проверьте, работает ли Android-устройство. Если не отображается, см.настраивать.

$ flutter devices

Запустите команду запуска флаттера, чтобы запустить приложение:

$ flutter run

Если все хорошо, вы должны увидеть приложение, запущенное на вашем устройстве или эмуляторе:

Структура проекта

┬
└ projectname
  ┬
  ├ android      - Android部分的工程文件
  ├ build        - 项目的构建输出目录
  ├ ios          - iOS部分的工程文件
  ├ lib          - 项目中的Dart源文件
    ┬
    └ src        - 包含其他源文件
    └ main.dart  - 自动生成的项目入口文件,类似RN的index.js文件
  ├ test         - 测试相关文件
  └ pubspec.yaml - 项目依赖配置文件类似于RN的 package.json

Как добавить зависимости, необходимые для проекта Flutter?

  • В Android вы можете добавлять зависимости в файлы Gradle;
  • В iOS зависимости обычно добавляются в подфайл;
  • В RN зависимости проекта обычно управляются package.json;

Flutter использует систему сборки Dart и менеджер пакетов Pub для обработки зависимостей. Эти инструменты делегируют сборку собственных приложений-оболочек Android и iOS соответствующей системе сборки.

dependencies:
  flutter:
    sdk: flutter
  google_sign_in: ^3.0.3

Во Flutter, несмотря на наличие файлов Gradle в папке Android в проекте Flutter, эти файлы используются только при добавлении необходимых зависимостей для конкретной платформы. В противном случае для объявления внешних зависимостей для Flutter следует использовать pubspec.yaml.

То же самое верно и для iOS: если у вас есть подфайл в папке iOS вашего проекта Flutter, используйте его только при добавлении зависимостей для конкретной платформы iOS. В противном случае для объявления внешних зависимостей для Flutter следует использовать pubspec.yaml.

Как архивировать изображения и как работать с разными разрешениями

  • Хотя Android обрабатывает ресурсы и ресурсы по-разному, во Flutter они рассматриваются как ресурсы, и все ресурсы, которые существуют в папках res/drawable-* на Android, помещаются в папку ресурсов Flutter.

  • Подобно Android, iOS также рассматривает изображения и активы как разные вещи, в то время как Flutter имеет только активы. Активы, помещенные в папку Images.xcasset в iOS, помещаются в папку активов во Flutter.

Активами во Flutter могут быть файлы любого типа, а не только изображения. Например, вы можете поместить файлы json в папку my-assets.

my-assets/data.json

Не забудьте объявить активы в файле pubspec.yaml:

assets:
 - my-assets/data.json

Затем в коде мы можем получить к нему доступ через AssetBundle:

import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;

Future<String> loadAsset() async {
  return await rootBundle.loadString('my-assets/data.json');
}

Для изображений Flutter, как и iOS, следует простому формату, основанному на плотности пикселей. Ресурсы изображения могут быть 1,0x 2,0x 3,0x или любым другим кратным. devicePixelRatio представляет отношение физических пикселей к одному логическому пикселю.

Соотношение пикселей соотношения Android для разных плотностей пикселей изображений и Flutter

ldpi    0.75x
mdpi    1.0x
hdpi    1.5x
xhdpi   2.0x
xxhdpi  3.0x
xxxhdpi 4.0x

Например, чтобы поместить изображение с именем my_icon.png в свой проект Flutter, вы можете поместить его в папку с изображениями. Поместите изображения (1.0x) в папку с изображениями, а изображения других разрешений поместите в соответствующие подпапки с соответствующим коэффициентом масштабирования, например:

images/my_icon.png       // Base: 1.0x image
images/2.0x/my_icon.png  // 2.0x image
images/3.0x/my_icon.png  // 3.0x image

Затем вы можете объявить этот ресурс изображения в файле pubspec.yaml следующим образом:

assets:
 - images/my_icon.png

Теперь мы можем получить к нему доступ с помощью AssetImage.

return AssetImage("images/a_dot_burr.jpeg");

Также доступно непосредственно через виджет Изображение:

@override
Widget build(BuildContext context) {
  return Image.asset("images/my_image.png");
}

Как архивировать строковые ресурсы и как работать с разными языками?

В отличие от iOS, в которой есть файл Localizable.strings, во Flutter в настоящее время нет специальной системы строковых ресурсов. В настоящее время рекомендуется хранить строковый ресурс как статическое поле в классе. Например:

class Strings {
  static String welcomeMessage = "Welcome To Flutter";
}

Затем получите доступ к нему следующим образом:

Text(Strings.welcomeMessage)

По умолчанию Flutter поддерживает только строки американского английского. Если вы хотите поддерживать другие языки, включите пакет flutter_localizations. Вы также можете импортировать пакет intl для поддержки других механизмов i10n, таких как форматирование даты/времени.

dependencies:
  # ...
  flutter_localizations:
    sdk: flutter
  intl: "^0.15.6"

Чтобы использовать пакет flutter_localizations, вам также необходимо указать localizationsDelegates и SupportedLocales в виджете приложения.

import 'package:flutter_localizations/flutter_localizations.dart';

MaterialApp(
 localizationsDelegates: [
   // Add app-specific localization delegate[s] here
   GlobalMaterialLocalizations.delegate,
   GlobalWidgetsLocalizations.delegate,
 ],
 supportedLocales: [
    const Locale('en', 'US'), // English
    const Locale('he', 'IL'), // Hebrew
    // ... other locales the app supports
  ],
  // ...
)

Эти прокси включают в себя фактические значения локализации, а поддерживаемые локали определяют, какие локали поддерживает приложение. В приведенном выше примере используется MaterialApp, поэтому он имеет как GlobalWidgetsLocalizations для базовых виджетов, так и MaterialWidgetsLocalizations для локализации виджетов Material. Если вы используете WidgetsApp, вам не нужно включать последний. Обратите внимание, что хотя эти два прокси-сервера включают значения «по умолчанию», если вы хотите, чтобы ваше приложение было локализовано, вам все равно необходимо предоставить один или несколько прокси-серверов в качестве локализованной копии вашего приложения.

При инициализации WidgetsApp или MaterialApp создадут для вас виджет Localizations, используя указанный вами делегат. Виджет Localizations может получить доступ к локали устройства в любое время из текущего контекста или использовать Window.locale.

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

Для получения дополнительной информации об интернационализации и локализации во Flutter посетите руководство по интернационализации, в котором есть пример кода без пакета intl.

компоненты

Во Flutter все является компонентом.Только в Widget существует более 350 подклассов и косвенных подклассов.Если вы изучаете так много компонентов, вам действительно нужно изучать более 350 компонентов? В экономике есть известный 28-й закон, и мы узнаем, что Flutter также применим к 28-му закону, большинство компонентов редко используются, поэтому, как новичок, вам нужно выучить только 20% часто используемых компонентов.

RenderObjectWidget и его подклассы имеют в общей сложности 89:

Всего существует 34 ProxyWidget и их подклассов:

Всего существует 89 StatelessWidget и его подклассов:

StatefulWidget имеет наибольшее количество подклассов, до 141.

дерево компонентов

Когда Flutter создает приложение, все компоненты в конечном итоге сгенерируют дерево компонентов, например следующий код:

 void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      ),
      home: Scaffold(
        body: Text('Hello world!'),
      ),
    );
  }
}

Основная функция — это место, где запускается приложение, запускающее компонент MyApp. Результирующее дерево компонентов выглядит следующим образом:

Чтобы центрировать компонент «Текст», измените его следующим образом:

Scaffold(
  body: Center(
    child: Text('Hello world!'),
  ),
)

Добавьте AppBar в приложение:

Scaffold(
  appBar: AppBar(),
  body: Center(
    child: Text('Hello world!'),
  ),
)

StatefulWidget vs StatelessWidget

Компоненты во Flutter делятся на два типа: StatelessWidget и StatefulWidget. Единственная разница между ними заключается в способе перезагрузки компонента во время выполнения.Компонент StatelessWidget воссоздает экземпляр текущего компонента при перезагрузке, в то время как компонент StatefulWidget не воссоздает экземпляр при перезагрузке, а повторно выполняет функция построения.

Как создается компонент StatelessWidget:

class StatelessWidgetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Функция сборки возвращает текущий компонент. После создания компонента его нельзя изменить. Функция сборки может быть выполнена только один раз. Если вы хотите перерисовать этот компонент, вы можете воссоздать только новый экземпляр этого компонента.

Компоненты StatualWidget, созданные:

class StatefulWidgetDemo extends StatefulWidget {
  @override
  _StatefulWidgetDemoState createState() => _StatefulWidgetDemoState();
}

class _StatefulWidgetDemoState extends State<StatefulWidgetDemo> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Компоненты StatefulWidget создаются иначе, чем StatelessWidgets.Функция сборки в State возвращает текущий компонент, а компонент с отслеживанием состояния может многократно перерисовываться в течение своего жизненного цикла, то есть вызывать функцию сборки несколько раз вместо создания нового экземпляра.

Чтобы перерисовать компонент StatefulWidget, вам нужно вызвать метод setstate, и setstate перерисует себя и свои подкомпоненты, поэтому постарайтесь инкапсулировать компонент StatefulWidget, чтобы избежать недопустимых перестроений и перерисовок, что повлияет на производительность.

Советы по быстрому написанию: введите stl в Android Studio и VS Code и нажмите Enter, чтобы быстро создать компонент StatelessWidget. Аналогичным образом введите stf и нажмите Enter, чтобы быстро создать компонент StatefulWidget. Это функция редактора Live Templates.

Material vs Cupertino

Flutter содержит два стиля компонентов: Material и Cupertino.Cupertino — это компонент в стиле iOS с префиксом Cupertino, например CupertinoSlider, CupertinoDatePicker и т. д. Material Design был запущен Google и предназначен для мобильных телефонов, планшетов и настольных компьютеров. и «другие платформы» предлагают более последовательный и широкий «внешний вид».

Flutter использует набор кода для последовательной работы на разных платформах.Он не рисует разные фигуры в зависимости от разных платформ.Например, использование AlertDialog для всплывающего окна с предупреждением, эффект будет одинаковым, как на Android, так и на iOS.

Но есть некоторые особенности, по которым Flutter различает платформы, например, ListView скользит вниз и продолжает скользить, Android будет иметь светло-голубую (по умолчанию) арку внизу, но не на iOS, это потому, что Flutter оборачивает этот компонент в коде различают платформу, поэтому в процессе просмотра исходного кода Flutter вы часто будете видеть разную обработку в зависимости от разных платформ.

Суммировать

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