Немного предыстории

Все началось в 2011 году: Xamarin, теперь принадлежащая Microsoft, разработала решение для гибридных мобильных приложений через свой фирменный продукт Xamarin SDK with C #. Так началась революция гибридных мобильных приложений - легкость написания единой базы кода для многих платформ.

Ionic возникла в 2013 году, выпустив свой первый выпуск от Drifty Co. Ionic помог веб-разработчикам использовать свои существующие навыки в растущей индустрии мобильных приложений. В 2015 году Facebook использовал React.js, чтобы заново изобрести его для разработчиков мобильных приложений. Они предоставили нам React Native, полностью основанный на JavaScript код, опирающийся на собственные SDK.

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

Теперь мы можем наблюдать за тем, как Google вкладывает руку в дело с Flutter.

Что такое Дарт?

Google выпустил свой первый выпуск Flutter 1.0 в декабре прошлого года, после того как он находился в бета-режиме более 18 месяцев. Dart - это язык программирования, используемый для программирования приложений Flutter. Dart - еще один продукт от Google, который в ноябре выпустил версию 2.1 до Flutter. На данный момент сообщество Flutter не так обширно, как ReactNative, Ionic или Xamarin.

Некоторое время назад я обнаружил симпатию к JavaScript. Я был в восторге от работы над мобильным приложением ReactNative во время стажировки. Мне тоже нравится кодировать гибридные мобильные приложения, поэтому я хотел попробовать Flutter, как и Xamarin в прошлом году.

При первом взгляде на Flutter (и Dart) я чувствовал себя сбитым с толку и ничего не мог понять. У них даже был раздел в документации для разработчиков, переходящих с React Native. Итак, я стал копать глубже во всем, что касается Дарта.

Dart немного похож на C и является объектно-ориентированным языком программирования. Итак, если вы предпочитаете языки C или Java, Dart - это то, что вам нужно, и вы, вероятно, будете в нем разбираться.

Dart используется не только для разработки мобильных приложений, но и является языком программирования. Утвержденный в качестве стандарта Ecma (ECMA-408), он используется для создания чего угодно в Интернете, на серверах, настольных компьютерах и, конечно же, в мобильных приложениях (да, те же люди, которые стандартизировали наши любимые ES5 и ES6).

Dart при использовании в веб-приложениях переносится на JavaScript, поэтому работает во всех веб-браузерах. Установка Dart также включает виртуальную машину для запуска файлов .dart из интерфейса командной строки. Файлы Dart, используемые в приложениях Flutter, компилируются и упаковываются в двоичный файл (.apk или .ipa) и загружаются в магазины приложений.

Как выглядит кодирование в Dart?

Как и большинство языков ALGOL (например, C # или Java):

  1. Точкой входа в класс Dart является метод main(). Этот метод также служит отправной точкой для приложений Flutter.
  2. Значение по умолчанию для большинства типов данных - null.
  3. Классы Dart поддерживают только одиночное наследование. Для конкретного класса может быть только один суперкласс, но он может иметь множество реализаций интерфейсов.
  4. Управление потоком определенных операторов, таких как условия if, циклы (for, while и do-while), switch-case, break и continue, одинаковы.
  5. Абстракция работает аналогичным образом, позволяя использовать абстрактные классы и интерфейсы.

В отличие от них (а иногда и немного похоже на JavaScript):

  1. Dart имеет вывод типа. Тип данных переменной необязательно объявлять явно, так как Dart «сделает вывод», что это такое. В Java тип переменной должен быть явно указан во время объявления. Например, String something;. Но в Dart вместо этого используется ключевое слово var something;. Код обрабатывает переменную в соответствии с тем, что она содержит, будь то число, строка, логическое значение или объект.
  2. Все типы данных являются объектами, включая числа. Таким образом, если они не инициализированы, их значение по умолчанию не равно 0, а равно нулю.
  3. Тип возвращаемого значения метода не требуется в сигнатуре метода.
  4. Тип num объявляет любой числовой элемент, как действительный, так и целочисленный.
  5. Вызов метода super() находится только в конце конструктора подкласса.
  6. Ключевое слово new, используемое перед конструктором для создания объекта, необязательно.
  7. Сигнатуры методов могут включать значение по умолчанию для передаваемых параметров. Таким образом, если один из них не включен в вызов метода, вместо этого метод использует значения по умолчанию.
  8. Он имеет новый встроенный тип данных под названием Runes, который имеет дело с кодовыми точками UTF-32 в строке. В качестве простого примера см. Смайлы и аналогичные значки.

И все эти отличия - лишь некоторые из многих, которые вы можете найти в туре по языку Dart, который вы можете проверить здесь.

Dart также имеет встроенные библиотеки, установленные в Dart SDK, наиболее часто используемые:

  1. dart: core для основных функций; он импортируется во все файлы дротиков.
  2. dart: async для асинхронного программирования.
  3. дротик: математика для математических функций и констант.
  4. dart: convert для преобразования между различными представлениями данных, такими как JSON в UTF-8.

Более подробную информацию о библиотеках Dart вы можете найти здесь.

Использование Dart во Flutter

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

  1. Виджет: общие элементы приложения, такие как Text или ListView.
  2. Материал: содержит элементы, соответствующие дизайну материала, например FloatingActionButton.
  3. Купертино: содержит элементы, соответствующие текущему дизайну iOS, например CupertinoButton.

Вы можете найти специальные библиотеки Flutter здесь.

Настройка Flutter

Итак, чтобы приступить к работе, следуйте документации по Flutter. В нем подробно рассказывается об установке Flutter SDK и настройке предпочитаемой IDE; у меня будет код VS. Настройка кода VS с расширением Flutter может быть полезна. Он поставляется со встроенными командами, в отличие от использования терминала.

Следуйте инструкциям еще раз, чтобы создать свое первое приложение. В моем случае запустите команду расширения Flutter: New Project. После этого введите имя проекта и выберите папку назначения.

Если вы предпочитаете использовать терминал, перейдите в целевую папку приложения. Затем используйте команду flutter create <app_name>, чтобы создать папку приложения. Это создает всю папку приложения, включая папку проекта Android и iOS. Чтобы открыть эти папки, используйте Android Studio и XCode для создания приложения.

В корне проекта вы найдете pubspec.yaml. Этот файл содержит зависимости приложения. Сюда входят как внешние библиотеки / модули, так и активы, такие как изображения и файлы конфигурации. Он работает как package.json, содержащий все внешние модули приложения. Чтобы установить эти пакеты, введите имя и версию пакета в разделе dependencies: файла pubspec.yaml. Выполните команду flutter packages get. Включите ресурсы приложения в flutter: раздел того же файла.

Точкой входа в приложение является main.dart, она находится внутри папки lib. Эта папка также содержит все классы Dart (страницы приложений или повторно используемые компоненты). При создании приложения файл main.dart поставляется с простым заранее написанным кодом. Перед запуском этого кода устройство подключается к ПК с включенной отладкой по USB. После этого запустите команду flutter run на терминале.

Первый взгляд на приложение Flutter

Сейчас приложение выглядит так:

При создании пользовательского интерфейса приложения Flutter используются виджеты.

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

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

Класс Scaffold представляет собой структуру макета материального дизайна и является основным контейнером для домашней страницы. AppBar, также элемент материального дизайна, представляет собой строку заголовка в верхней части страницы. Все остальные компоненты, такие как плавающая кнопка и два текстовых тега, находятся под основной частью страницы. Класс Center - это класс макета, который центрирует свои дочерние компоненты по вертикали и горизонтали.

Класс Column, еще один виджет макета, перечисляет каждый дочерний элемент по вертикали. Каждый из его дочерних элементов добавляется в массив и помещается под раздел children :.

Два текста говорят сами за себя. На первом отображается текст «Вы нажали». На втором отображается текущее значение переменной _counter.

FloatingActionButton является частью виджетов материального дизайна. Он отображает значок + и запускает приращение переменной _counter.

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

Еще один плюс использования Flutter - функция горячей перезагрузки. Он позволяет видеть изменения, внесенные в код, в режиме реального времени без перезапуска процесса сборки. Введите «r» на той же консоли, на которой вы запускали команду flutter run.

Изменение текущего кода

Как мы видим, когда вы нажимаете кнопку, значение переменной _counter увеличивается. Это повторно отрисовывает страницу, и новое значение отображается в теле страницы.

Я собираюсь немного изменить это. При каждом нажатии кнопки мы будем отображать настраиваемый компонент Card с номером позиции.

Создание пользовательского компонента карты

Итак, для начала мы создаем новый файл .dart внутри папки lib. Я создал свой в подпапке commonComponents и назвал его customCard.dart.

import 'package:flutter/material.dart';
class CustomCard extends StatelessWidget {
  CustomCard({@required this.index});
final index;
@override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: <Widget>[Text('Card $index')],
      )
    );
  }
}

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

Отображение списка пользовательских карточек

Импортируйте указанный выше компонент в main.dart следующим образом:

import 'commonComponents/customCard.dart';

Затем я заменяю код тела домашней страницы с приведенного выше на следующий:

body: Center(
  child: Container(
    child: ListView.builder(
      itemCount: _counter,
      itemBuilder: (context, int index) {
        return CustomCard(
          index: ++index,
        );
      },
    )
  ),
),

Теперь он отображает список из CustomCard элементов с указанием количества нажатий кнопки. itemCount используется для определения количества элементов, которые ListView должен отображать. itemBuilder возвращает фактически отображаемый элемент.

И это простой пример использования Flutter.

В заключение…

До того, как меня заинтересовал JavaScript, я работал с Java. Если бы я встретил Дарта примерно в то время, я мог бы понять его легче, чем сейчас. В общем, это было не так уж сложно, но потребовалось время, чтобы научиться. Я мог вовремя увидеть, как использую его.

Найдите репо кода здесь.

Найдите коммит для этого поста здесь.