[Перевод] кроссплатформенная мобильная мобильная разработка с трепетом

HTTPS Android Flutter Dart
[Перевод] кроссплатформенная мобильная мобильная разработка с трепетом

Автор: Майк Блюэстин | Перевод солнца Yinfeng

Исходный адрес: [https://www.smashingmagazine.com/2018/06/google-flutter-mobile-development/]

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

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

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

Почему появляется флаттер? Зачем это использовать?

Традиционно кроссплатформенные инструменты взяли один из двух подходов:

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

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

Dart

Приложения Flutter написаны на Dart, языке программирования, изначально разработанном Google. Это объектно-ориентированный язык, поддерживающий предварительную компиляцию и компиляцию в реальном времени, поэтому он больше подходит для разработки нативных приложений и может обеспечить эффективный рабочий процесс разработки с горячей загрузкой Flutter. Flutter также недавно перешел на Dart версии 2.0. Язык Dart предоставляет множество функций, которые есть в других языках программирования, включая сборку мусора, асинхронное ожидание, строгую типизацию, дженерики, богатую стандартную библиотеку и многое другое. Эти функции знакомы разработчикам различных языков программирования, таких как C#, JavaScript, F#, Swift и Java. Кроме того, Dart можно скомпилировать в Javascript в сочетании с Flutter для обеспечения совместного использования кода на веб-платформах и мобильных платформах.

Хронология истории событий

  • 2015.04

Flutter (первоначально называвшийся Sky) был представлен на саммите разработчиков Dart [1].

  • 2015.11

Небо было переименовано в трепетать.

  • 2018.02

На мобильном World Congress 2018 был выпущен трепетание бета 1 [2].

  • 2018.04

Выпущена бета-версия Flutter 2 [3]

  • 2018.05

Flutter beta 3 [4] выпущен на Google I/O. Google объявил, что 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, но концептуально похож на то, что он также абстрагирует собственные элементы управления. Точно так же он имеет те же недостатки, что и React Native, когда дело доходит до настройки. Второй способ: Xamarin-classic. В этом подходе предложения Xamarin для iOS и Android используются по отдельности для создания функций, зависящих от платформы, точно так же, как и непосредственное использование собственных функций Apple/Android, за исключением Xamarin, для которого требуется использование C# или F#. Преимущество использования Xamarin заключается в том, что вы можете совместно использовать код, не зависящий от платформы, такой как сеть, доступ к данным, веб-службы и т. д.

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

Обзор приложения Flutter

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

После установки Flutter [5] создать приложение с помощью Flutter очень просто: откройте командную строку, введитеflutter create [app_name], в VS Code выберитеFlutter: New Project; выберите в Android Studio или IntelliJStart a new Flutter Project. Независимо от того, решите ли вы использовать IDE или использовать командную строку в предпочитаемом вами редакторе, новые шаблоны приложений Flutter станут хорошей отправной точкой для вашего приложения.

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

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

Flutter предлагает невероятную гибкость, когда дело доходит до инструментов. как это можно сделать из поддерживаемой IDE (например,VS Code,Android Studio,илиIntelliJ), приложения можно просто разрабатывать из командной строки любого редактора. Какой инструмент разработки использовать, во многом зависит от предпочтений разработчика.Android StudioПредоставляется большая часть функций, таких как инспектор Flutter для анализа виджетов работающего приложения и мониторинга производительности приложения. Он также предоставляет некоторые шаблоны рефакторинга, которые будут удобны при разработке виджетов с иерархиями;VS CodeОбеспечивает более легкий опыт разработки, поскольку он запускается быстрее, чемAndroid StudioилиIntelliJБыстрее, и в каждой IDE есть встроенные помощники по редактированию, такие как завершение кода, обработка различных API и хорошая поддержка отладки; командная строка также хорошо поддерживает команды Flutter, что упрощает создание, обновление и публикацию приложений. дольше зависит от других инструментов, кроме редактора. Вот сценарии использования Flutter в различных средах:

горячая загрузка

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

тестовое задание

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

// Test included with the new Flutter application template

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

import 'package:myapp/main.dart';

void main() {
  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
    // Build our app and trigger a frame.
    await tester.pumpWidget(new MyApp());

    // Verify that our counter starts at 0.
    expect(find.text('0'), findsOneWidget);
    expect(find.text('1'), findsNothing);

    // Tap the '+' icon and trigger a frame.
    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();

    // Verify that our counter has incremented.
    expect(find.text('0'), findsNothing);
    expect(find.text('1'), findsOneWidget);
  });
}

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

Хотя о доступности Flutter было только что объявлено, уже существует богатая экосистема разработчиков: множество пакетов и плагинов [6]. При добавлении пакета или плагина просто добавьтеpubspec.yamlВы можете добавить зависимости к файлу. Затем запустите через командную строку или IDEflutter packages get, Flutter подтянет все необходимые зависимости. Например, во Flutter используется более популярныйimage pickerплагин, вам нужно толькоpubspec.yamlДобавьте зависимости в файл следующим образом:

dependencies:
  image_picker: "^0.4.1"

затем бегиflutter packages getКоманда импортирует все необходимое для ее использования, а затем импортирует и использует в Dart:

import 'package:image_picker/image_picker.dart';

Widgets

Все во Flutter — это виджеты. виджеты включают элементы пользовательского интерфейса, такие какListView, TextBoxа такжеImageА также другие части фреймворка, такие как макет, анимация, распознавание жестов и темы и т. д. Дизайн с виджетами позволяет встраивать все приложение в другие виджеты с иерархией (все приложение также является виджетом). Архитектура с виджетами может четко отслеживать свойства и поведение части приложения, что отличается от большинства других платформ приложений.Большинство фреймворков связывают свойства и поведения непоследовательно, иногда с ними в иерархии.Связаны другие компоненты, иногда с элементом управления сам.

Простой пример виджета пользовательского интерфейса

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

import 'package:flutter/material.dart';

void main() {
  runApp(
    Container(color: Colors.lightBlue)
  );
}

В результате получается бледно-голубой виджет Container, который заполняет весь экран.

Виджеты без состояния и с состоянием

Существует два типа виджетов: виджеты без состояния и виджеты с состоянием. Виджеты без сохранения состояния не меняют своего содержимого после создания и инициализации, в то время как виджеты с состоянием позволяют изменять некоторые состояния во время работы приложения, например взаимодействие с пользователем. Например, приложение также ссылаетсяFlatButton widgetа такжеText widget.Text widgetСостояние строки по умолчанию установлено. Заставляет значение состояния изменяться при нажатии кнопки, что вызываетText widgetОбновите, чтобы отобразить новое строковое значение. Если вы хотите инкапсулировать виджет, вам нужно создать производный отStatelessWidgetилиStatefulWidgetтип. Например, светло-голубойContainerМожно написать так:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.lightBlue);
  }
}

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

class MyStatefulWidget extends StatefulWidget {

  MyStatefulWidget();

  @override
  State createState() {
    return MyWidgetState();
  }
}

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

class MyWidgetState extends State {
  String text = "some text";

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.lightBlue,
      child: Padding(
        padding: const EdgeInsets.all(50.0),
        child: Directionality(
          textDirection: TextDirection.ltr,
          child: Column(
            children: [
              FlatButton(
                child: Text('Set State'),
                onPressed: () {
                  setState(() {
                    text = "some new text";
                  });
                },
              ),
               Text(
                text,
                style: TextStyle(fontSize: 20.0)),
            ],
          )
        )
      )
    );
  }
}

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

Также обратите внимание, что вы можете использоватьDirectionalityВиджет устанавливает направление текста для виджетов в своем поддереве, которым это необходимо, например.Textвиджеты. В данном примере код создается с нуля, поэтому в некоторых местах иерархии виджетов необходимо использоватьDirectionality. Однако, используяMaterialAppВиджет неявно устанавливает направление текста (например, используя шаблон приложения по умолчанию).

макет

По умолчанию функция runApp увеличивает виджет на весь экран. Для управления макетом виджетов Flutter предоставляет множество виджетов макета. Эти виджеты позволяют выравнивать вложенные виджеты по вертикали или горизонтали, увеличивать виджеты для заполнения определенной области, ограничивать виджеты определенной областью, центрировать их на экране и позволять виджетам перекрывать друг друга. Два наиболее часто используемых виджета:Rowа такжеColumn. Они могут отображать свои дочерние виджеты горизонтально (строка) или вертикально (столбец). Чтобы использовать эти виджеты макета, просто оберните их в список дочерних виджетов,mainAxisAlignmentБудет управлять положением виджетов на оси макета, будь то по центру, в начале, в конце или с использованием различных параметров интервала. Следующий код показывает, какRowилиColumnВиджеты выравнивания по центру.

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row( //change to Column for vertical layout
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(Icons.android, size: 30.0),
        Icon(Icons.pets, size: 10.0),
        Icon(Icons.stars, size: 75.0),
        Icon(Icons.rowing, size: 25.0),
      ],
    );
  }
}

Реагировать на прикосновение

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

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => print('you tapped the star'),
      onDoubleTap: () => print('you double tapped the star'),
      onLongPress: () => print('you long pressed the star'),
      child: Icon(Icons.stars, size: 200.0),
    );
  }
}

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

🔥  To hot reload your app on the fly, press "r". To restart the app entirely, press "R".
An Observatory debugger and profiler on iPhone X is available at: http://127.0.0.1:8100/
For a more detailed help message, press "h". To quit, press "q".
flutter: you tapped the star
flutter: you double tapped the star
flutter: you long pressed the star

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

картина

Flutter также предоставляет множество виджетов, связанных с рисованием, включая изменение непрозрачности, настройку обтравочных контуров и применение настроек. используяCustomPaintКомбинация виджета, классов CustomPainter и Canvas, а также поддерживает общие функции рисования. Пример виджета рисования:DecoratedBox, вы можете нарисоватьBoxDecoration. В следующем примере показано, как использоватьDecoratedBoxи градиентная заливка для заполнения экрана.

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new DecoratedBox(
      child: Icon(Icons.stars, size: 200.0),
      decoration: new BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Colors.red, Colors.blue, Colors.green],
          tileMode: TileMode.mirror
        ),
      ),
    );
  }
}

анимация

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

class StarWidget extends StatefulWidget {
  @override
  State createState() {
    return StarState();
  }
}

class StarState extends State with SingleTickerProviderStateMixin {
  AnimationController _ac;
  final double _starSize = 300.0;

   @override
  void initState() {
    super.initState();

    _ac = new AnimationController(
      duration: Duration(milliseconds: 750),
      vsync: this,
    );
    _ac.forward();
  }

  @override
  Widget build(BuildContext context) {

    return new AnimatedBuilder(
      animation: _ac,
      builder: (BuildContext context, Widget child) {
        return DecoratedBox(
          child: Icon(Icons.stars, size: _ac.value * _starSize),
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Colors.red, Colors.blue, Colors.green],
              tileMode: TileMode.mirror
            ),
          ),
        );
      }
   );
  }
}

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

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

канал платформы

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

Суммировать

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

Расширенное чтение

  • Установите Flutter: https://flutter.io/get-started/install/

  • Языковой тур Dart: https://www.dartlang.org/guides/language/language-tour

  • Flutter Codelabs: https://flutter.io/codelabs/

  • Курс Flutter Udacity: https://www.udacity.com/course/build-native-mobile-apps-with-flutter--ud905

  • Исходный код статьи: https://gist.github.com/mikebluestein/3350443df4689ddac115b68d1598d18e

индексный список

[1] https://www.youtube.com/watch?v=PnIWl33YMwA&feature=youtu.be

[2] https://medium.com/flutter-io/announcing-flutter-beta-1-build-beautiful-native-apps-dc142aea74c0

[3] https://medium.com/flutter-io/https-medium-com-flutter-io-announcing-flutters-beta-2-c85ba1557d5e

[4] https://developers.googleblog.com/2018/05/ready-for-production-apps-flutter-beta-3.html

[5] https://flutter.io/get-started/install/

[6] https://pub.dartlang.org/flutter

[7] https://flutter.io/platform-channels/

Статья перенесена из общедоступной учетной записи WeChat «Исследование полного стека», пожалуйста, отсканируйте QR-код ниже, чтобы следовать!

Категории