Немного предыстории
Все началось в 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):
- Точкой входа в класс Dart является метод
main()
. Этот метод также служит отправной точкой для приложений Flutter. - Значение по умолчанию для большинства типов данных -
null
. - Классы Dart поддерживают только одиночное наследование. Для конкретного класса может быть только один суперкласс, но он может иметь множество реализаций интерфейсов.
- Управление потоком определенных операторов, таких как условия if, циклы (for, while и do-while), switch-case, break и continue, одинаковы.
- Абстракция работает аналогичным образом, позволяя использовать абстрактные классы и интерфейсы.
В отличие от них (а иногда и немного похоже на JavaScript):
- Dart имеет вывод типа. Тип данных переменной необязательно объявлять явно, так как Dart «сделает вывод», что это такое. В Java тип переменной должен быть явно указан во время объявления. Например,
String something;
. Но в Dart вместо этого используется ключевое словоvar something;
. Код обрабатывает переменную в соответствии с тем, что она содержит, будь то число, строка, логическое значение или объект. - Все типы данных являются объектами, включая числа. Таким образом, если они не инициализированы, их значение по умолчанию не равно 0, а равно нулю.
- Тип возвращаемого значения метода не требуется в сигнатуре метода.
- Тип
num
объявляет любой числовой элемент, как действительный, так и целочисленный. - Вызов метода
super()
находится только в конце конструктора подкласса. - Ключевое слово
new
, используемое перед конструктором для создания объекта, необязательно. - Сигнатуры методов могут включать значение по умолчанию для передаваемых параметров. Таким образом, если один из них не включен в вызов метода, вместо этого метод использует значения по умолчанию.
- Он имеет новый встроенный тип данных под названием Runes, который имеет дело с кодовыми точками UTF-32 в строке. В качестве простого примера см. Смайлы и аналогичные значки.
И все эти отличия - лишь некоторые из многих, которые вы можете найти в туре по языку Dart, который вы можете проверить здесь.
Dart также имеет встроенные библиотеки, установленные в Dart SDK, наиболее часто используемые:
- dart: core для основных функций; он импортируется во все файлы дротиков.
- dart: async для асинхронного программирования.
- дротик: математика для математических функций и констант.
- dart: convert для преобразования между различными представлениями данных, такими как JSON в UTF-8.
Более подробную информацию о библиотеках Dart вы можете найти здесь.
Использование Dart во Flutter
У Flutter больше библиотек для конкретных приложений, чаще всего для таких элементов пользовательского интерфейса, как:
- Виджет: общие элементы приложения, такие как Text или ListView.
- Материал: содержит элементы, соответствующие дизайну материала, например FloatingActionButton.
- Купертино: содержит элементы, соответствующие текущему дизайну 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. Если бы я встретил Дарта примерно в то время, я мог бы понять его легче, чем сейчас. В общем, это было не так уж сложно, но потребовалось время, чтобы научиться. Я мог вовремя увидеть, как использую его.
Найдите репо кода здесь.
Найдите коммит для этого поста здесь.