Использование Google Flutter для действительно кросс-платформенной мобильной разработки

1. Почему был создан Flutter и почему вы должны его использовать
2. дротик
3. Исторический график событий
4. React Native
5. Xamarin
6. Обзор флаттера
7. Параметры инструментов
8. Горячая перезагрузка
9. тестирование
10. Использование пакетов и плагинов
11. раскладка
12. Отвечая на прикосновение
13. Картина
14. Анимация
15. Использование нативных функций
16. Заключение

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

Flutter - это кроссплатформенная среда разработки мобильных приложений с открытым исходным кодом от Google. Это позволяет создавать высокопроизводительные, красивые приложения для iOS и Android из единой базы кода. Это также платформа для разработки будущей операционной системы Google Fuchsia. Кроме того, он спроектирован таким образом, что его можно перенести на другие платформы через встроенные двигатели Flutter ,

Почему был создан Flutter и почему вы должны его использовать

Кроссплатформенные наборы инструментов исторически использовали один из двух подходов:

• Они оборачивают веб-представление в собственном приложении и создают приложение, как если бы это был веб-сайт.
• Они обертывают собственные элементы управления платформой и обеспечивают некоторую кроссплатформенную абстракцию над ними.

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

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

дротик

Приложения Flutter написаны на Dart, который является языком программирования, первоначально разработанным Google. Dart является объектно-ориентированным языком, который поддерживает как своевременную, так и своевременную компиляцию, что делает его хорошо подходящим для создания собственных приложений, обеспечивая при этом эффективный рабочий процесс разработки с горячей перезагрузкой Flutter. Флаттер недавно перешел на Dart версии 2.0.

Язык Dart предлагает множество функций, которые можно увидеть на других языках, включая сборку мусора, async-await, строгую типизацию, обобщения, а также богатая стандартная библиотека ,

Dart предлагает пересечение функций, которые должны быть знакомы разработчикам из разных языков, таких как C #, JavaScript, F #, Swift и Java. Кроме того, Дарт может скомпилировать в Javascript. В сочетании с Flutter это позволяет распространять код на веб-сайты и мобильные платформы.

Исторический график событий

Apple / Android Native

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

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

React Native

React Native позволяет создавать нативные приложения с использованием JavaScript. Фактические элементы управления, используемые приложением, являются встроенными элементами управления платформы, поэтому конечный пользователь получает ощущение собственного приложения. Для приложений, которые требуют настройки помимо того, что обеспечивает абстракция React Native, все еще может потребоваться собственная разработка. В тех случаях, когда объем требуемой настройки является значительным, выгода от работы на уровне абстракции React Native уменьшается до такой степени, что в некоторых случаях разработка приложения в естественных условиях была бы более полезной.

Xamarin

При обсуждении Xamarin, есть два разных подхода, которые необходимо оценить. Для их наиболее кросс-платформенного подхода есть Xamarin.Forms. Хотя технология очень отличается от React Native, концептуально она предлагает аналогичный подход в том, что она абстрагирует нативные элементы управления. Кроме того, он имеет аналогичные недостатки в отношении настройки.

Во-вторых, есть то, что многие называют Xamarin-классика. Этот подход использует продукты Xamarin для iOS и Android независимо друг от друга для создания специфичных для платформы функций, как при непосредственном использовании нативного Apple / Android, только с использованием C # или F # в случае Xamarin. Преимущество Xamarin заключается в том, что можно использовать общий для неплатформенного кода код, такие как сети, доступ к данным, веб-службы и т. Д.

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

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

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

После установка флаттера создать приложение с Flutter так же просто, как открыть командную строку и ввести flutter create [app_name], выбрать команду «Flutter: New Project» в VS Code или выбрать «Start new Flutter Project» в Android Studio или IntelliJ ,

Независимо от того, выберете ли вы IDE или командную строку вместе с предпочитаемым вами редактором, новый шаблон приложения Flutter станет хорошей отправной точкой для приложения.

Приложение включает в себя пакет flutter / material.dart, предлагающий некоторые базовые леса для приложения, такие как строка заголовка, значки материалов и темы. Он также устанавливает виджет с отслеживанием состояния, чтобы продемонстрировать, как обновлять пользовательский интерфейс при изменении состояния приложения.

Новое приложение Flutter, работающее на iOS и Android. ( Большой предварительный просмотр )

Параметры инструментов

Флаттер предлагает невероятную гибкость в отношении инструментов. Приложения могут быть так же легко разработаны из командной строки вместе с любым редактором, как и из поддерживаемой IDE, такой как VS Code, Android Studio или IntelliJ. Подход в значительной степени зависит от предпочтений разработчика.

Android Studio предлагает большинство функций, таких как Flutter Inspector, для анализа виджетов запущенного приложения и мониторинга производительности приложения. Он также предлагает несколько рефакторингов, которые удобны при разработке иерархии виджетов.

VS Code предлагает более легкий опыт разработки, поскольку он имеет тенденцию запускаться быстрее, чем Android Studio / IntelliJ. Каждая IDE предлагает встроенные помощники редактирования, такие как автозавершение кода, позволяющие исследовать различные API, а также хорошую поддержку отладки.

Командная строка также хорошо поддерживается с помощью команды flutter, которая позволяет легко создавать, обновлять и запускать приложения без какой-либо другой зависимости от инструментов, кроме редактора.

Инструмент Flutter поддерживает различные среды. ( Большой предварительный просмотр )

Горячая перезагрузка

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

Горячая перезагрузка значительно повышает эффективность разработки, обеспечивая более быструю итерацию. С платформой действительно приятно работать.

тестирование

Flutter включает в себя утилиту WidgetTester для взаимодействия с виджетами из теста. Новый шаблон приложения включает в себя пример теста, чтобы продемонстрировать, как использовать его при создании теста, как показано ниже:

// Проверка включена в новый шаблон приложения Flutter import 'package: flutter / material.dart'; импортировать «пакет: flutter_test / flutter_test.dart»; импортировать «пакет: myapp / main.dart»; void main () {testWidgets ('Счетчик увеличивает дымовой тест', (WidgetTester tester) async {// Создаем наше приложение и запускаем фрейм. await tester.pumpWidget (new MyApp ()); // Убедитесь, что наш счетчик начинается с 0 . Ожидаем (find.text ('0'), findOneWidget); ожидаем (find.text ('1'), findNothing); // Коснитесь значка «+» и активируйте фрейм. await tester.tap (find.byIcon (Icons.add)); await tester.pump (); // Убедитесь, что наш счетчик увеличился. Ожидаем (find.text ('0'), findNothing); ожидаем (find.text ('1'), findOneWidget) ;}); }

Использование пакетов и плагинов

Flutter только начинается, но уже есть богатая экосистема для разработчиков: Изобилие пакетов и плагинов уже доступны для разработчиков.

Чтобы добавить пакет или плагин, просто включите зависимость в файл pubspec.yaml в корневом каталоге приложения. Затем запустите пакеты flutter, полученные либо из командной строки, либо через IDE, и инструментарий Flutter внесет все необходимые зависимости.

Например, чтобы использовать популярный плагин выбора изображений для Flutter, pubspec.yaml нужно только перечислить его как зависимость следующим образом:

зависимости: image_picker: "^ 0.4.1"

Затем при запуске пакетов flutter вы получаете все, что вам нужно для его использования, после чего его можно импортировать и использовать в Dart:

импортировать 'package: image_picker / image_picker.dart';

Все во Флаттере это виджет. Это включает в себя элементы пользовательского интерфейса, такие как ListView, TextBox и Image, а также другие части платформы, включая макет, анимацию, распознавание жестов и темы, и это лишь некоторые из них.

Если все будет виджетом, все приложение, которое также является виджетом, может быть представлено в иерархии виджетов. Наличие архитектуры, в которой все является виджетом, проясняет, откуда берутся определенные атрибуты и поведение, применяемые к части приложения. Это отличается от большинства других сред приложений, которые непоследовательно связывают свойства и поведение, иногда присоединяя их из других компонентов в иерархии, а иногда и к самому элементу управления.

Точка входа в приложение Flutter является основной функцией. Чтобы разместить виджет для элемента пользовательского интерфейса на экране, в main () вызовите runApp () и передайте ему виджет, который будет служить корнем иерархии виджетов.

импорт «пакет: флаттер / материал.дарт»; void main () {runApp (Container (color: Colors.lightBlue)); }

В результате появляется светло-синий виджет «Контейнер», который заполняет экран:

Приложение минимального флаттера с одним контейнером ( Большой предварительный просмотр )

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

В этом примере виджет FlatButton и виджет Text выводятся на экран. Текстовый виджет начинается с некоторой строки по умолчанию для его состояния. Нажатие на кнопку приводит к изменению состояния, что приведет к обновлению виджета «Текст» с отображением новой строки.

Для инкапсуляции виджета создайте класс, производный от StatelessWidget или StatefulWidget. Например, голубой Контейнер может быть написан следующим образом:

класс MyWidget расширяет StatelessWidget {@override Widget build (контекст BuildContext) {return Container (color: Colors.lightBlue); }}

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

Для виджета с состоянием, производного от StatefulWidget:

класс MyStatefulWidget расширяет StatefulWidget {MyStatefulWidget (); @override State createState () {return MyWidgetState (); }}

Виджеты с состоянием возвращают класс State, который отвечает за построение дерева виджетов для данного состояния. Когда состояние изменяется, соответствующая часть дерева виджетов перестраивается.

В следующем коде класс State обновляет строку при нажатии кнопки:

класс MyWidgetState extends State {String text = "некоторый текст"; @override Widget build (контекст BuildContext) {return Container (color: Colors.lightBlue, child: Padding (padding: const EdgeInsets.all (50.0), дочерний: Directionality (textDirection: TextDirection.ltr, дочерний: Column (children: [FlatButton] (child: Text ('Set State'), onPressed: () {setState (() {text = "некоторый новый текст";});},), Text (text, style: TextStyle (fontSize: 20.0)), ],)))); }}

Состояние обновляется в функции, которая передается в setState (). Когда вызывается setState (), эта функция может установить любое внутреннее состояние, например строку в этом примере. Затем будет вызван метод сборки, обновляющий дерево виджета с сохранением состояния.

Обработка изменения состояния от взаимодействия с пользователем ( Большой предварительный просмотр )

Также обратите внимание на использование виджета «Направленность» для установки направления текста для любых виджетов в его поддереве, которые в нем нуждаются, например, для виджетов «Текст». Приведенные здесь примеры строят код с нуля, поэтому где-то в иерархии виджетов нужна направленность. Однако при использовании виджета MaterialApp, например, с шаблоном приложения по умолчанию, неявно устанавливается направление текста.

раскладка

Функция runApp раздувает виджет, чтобы заполнить экран по умолчанию. Для управления макетом виджета Flutter предлагает множество виджетов макета. Существуют виджеты для выполнения макетов, которые выравнивают дочерние виджеты по вертикали или горизонтали, расширяют виджеты для заполнения определенного пространства, ограничивают виджеты определенной областью, центрируют их на экране и позволяют виджетам перекрывать друг друга.

Два часто используемых виджета - это строка и столбец. Эти виджеты выполняют макеты для отображения своих дочерних виджетов по горизонтали (строка) или по вертикали (столбец).

Использование этих виджетов макета просто включает в себя их обертывание вокруг списка дочерних виджетов. MainAxisAlignment контролирует, как виджеты располагаются вдоль оси макета, либо по центру, в начале, в конце, либо с различными параметрами интервалов.

Следующий код показывает, как выровнять несколько дочерних виджетов в строке или столбце:

Класс MyStatelessWidget расширяет StatelessWidget {@override Widget build (BuildContext context) {return Row (// изменить на столбец для вертикального макета mainAxisAlignment: MainAxisAlignment.center, children: [Icon (Icons.android, размер: 30.0), Icon (Icons.pets) , размер: 10.0), Icon (Icons.stars, размер: 75.0), Icon (Icons.rowing, размер: 25.0),],); }} Виджет строки, показывающий горизонтальное расположение ( Большой предварительный просмотр )

Отвечая на прикосновение

Сенсорное взаимодействие обрабатывается с помощью жестов, которые инкапсулированы в классе GestureDetector. Поскольку это также виджет, добавить распознавание жестов так же просто, как оборачивать дочерние виджеты в GestureDetector.

Например, чтобы добавить сенсорную обработку в Icon, сделайте его дочерним по отношению к GestureDetector и установите обработчики детектора для захвата требуемых жестов.

класс MyStatelessWidget расширяет StatelessWidget {@override Widget build (BuildContext context) {return GestureDetector (onTap: () => print ('вы нажали звезду'), onDoubleTap: () => print ('вы дважды нажали звезду'), onLongPress: () => print («Вы долго нажали звезду»), child: Icon (Icons.stars, размер: 200.0),); }}

В этом случае, когда по значку выполняется касание, двойное касание или длительное нажатие, соответствующий текст печатается:

Hot Для горячей перезагрузки приложения на лету нажмите «r». Чтобы полностью перезапустить приложение, нажмите «R». Отладчик и профилировщик Обсерватории на iPhone X доступен по адресу: http://127.0.0.1:8100/ Для получения более подробного справочного сообщения нажмите «h». Чтобы выйти, нажмите «q». трепетание: ты коснулся звезды трепетание: ты дважды нажал звезды трепетание: ты долго нажал на звезду

В дополнение к простым жестам касаний, существует множество распознавателей для всего, от панорамирования и масштабирования до перетаскивания. Это позволяет очень легко создавать интерактивные приложения.

Картина

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

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

Класс MyStatelessWidget расширяет StatelessWidget {@override Widget build (BuildContext context) {возвращать новый DecoratedBox (дочерний элемент: Icon (Icons.stars, размер: 200.0), декоративный элемент: новый BoxDecoration (градиент: LinearGradient (begin: Alignment.topCenter, end: Alignment. bottomCenter, colors: [Colors.red, Colors.blue, Colors.green], tileMode: TileMode.mirror),),); }} Рисование градиентного фона ( Большой предварительный просмотр )

Анимация

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

Любой виджет, такой как украшенная звезда, показанная ранее, может иметь свои свойства анимированные. Например, рефакторинг кода в StatefulWidget, поскольку анимация - это изменение состояния, а передача AnimationController в класс State позволяет использовать анимированное значение при создании виджета.

класс StarWidget расширяет StatefulWidget {@override State createState () {return StarState (); }} класс StarState расширяет состояние с помощью SingleTickerProviderStateMixin {AnimationController _ac; окончательный двойной _starSize = 300,0; @override void initState () {super.initState (); _ac = новый AnimationController (продолжительность: продолжительность (миллисекунды: 750), vsync: это,); _ac.forward (); } @override Widget build (контекст BuildContext) {вернуть новый AnimatedBuilder (animation: _ac, builder: (контекст BuildContext, дочерний виджет)) {return DecoratedBox (дочерний элемент: Icon (Icons.stars, размер: _ac.value * _starSize), украшение: BoxDecoration (градиент: LinearGradient (начало: Alignment.topCenter, конец: Alignment.bottomCenter, colors: [Colors.red, Colors.blue, Colors.green], tileMode: TileMode.mirror),),);)); }}

В этом случае значение используется для изменения размера виджета. Функция построителя вызывается всякий раз, когда изменяется анимированное значение, в результате чего размер звезды изменяется в течение 750 мс, создавая эффект масштаба:

Размер анимации

Использование нативных функций

Чтобы обеспечить доступ к собственным API платформы на Android и iOS, приложение Flutter может использовать каналы платформы. Это позволяет коду Flutter Dart отправлять сообщения на хост-приложение iOS или Android. Многие из доступных плагинов с открытым исходным кодом созданы с использованием обмена сообщениями по каналам платформы. Чтобы узнать, как работать с каналами платформы, Флаттерная документация включает в себя хороший документ, который демонстрирует доступ к собственным API-интерфейсам батареи.

Заключение

Даже в бета-версии Flutter предлагает отличное решение для создания кроссплатформенных приложений. Благодаря превосходной оснастке и горячей перегрузке, он приносит очень приятный опыт разработки. Обилие пакетов с открытым исходным кодом и отличная документация позволяют легко начать работу. Заглядывая вперед, разработчики Flutter смогут ориентироваться на Fuchsia в дополнение к iOS и Android. Учитывая расширяемость архитектуры движка, меня не удивит, что Flutter появится и на других платформах. С растущим сообществом, это прекрасное время, чтобы прыгнуть.

Следующие шаги

Похожие

Комментарии