Мир программирования все больше захватывают кросс-платформы. Такие технологии, как Flutter, позволяют создавать приложения одновременно и для iOS, и для Android. Происходит это не без своих ограничений, конечно же, однако для многих компаний использование кросс-платформ становится отличным решением. Возникает закономерный вопрос: как специалистам в области создания приложения под iOS или Android быстро освоиться в новом пространстве?
Понимание Основ Flutter
Для начала важно понять основные принципы Flutter, который использует язык программирования Dart, сочетающий элементы OOP и функционального программирования. Flutter основан на декларативном UI, где вы описываете, как должен выглядеть ваш интерфейс, а не шаги его создания.
Авторы Flutter стремятся облегчить переход к использованию своей технологии, поэтому подготовили несколько гайдов для разработчиков iOS, Android, Web и даже других кросс-платформенных технологий.
Dart: язык Flutter
Dart — это оптимизированный под UI язык для создания приложений на любой платформе. Синтаксис Dart будет вам знаком, если вы использовали язык в стиле C. Он поддерживает объектно ориентированные концепции и является строго статически типизированным.
Dart компилируется в машинный код ARM и x64 для мобильных устройств, desktops и бэкенда. Он также компилируется в JavaScript для веба. Эта гибкость позволяет запускать код Dart различными способами, что очень важно для кросс-платформенности Flutter.
Декларативный UI во Flutter
При переходе на Flutter одним из самых значительных изменений для разработчиков Android и iOS станет адаптация к декларативному фреймворку UI. Мы рассмотрим эту концепцию, сравним ее с императивным стилем и покажем, как она может улучшить ваш процесс разработки.
Декларативный подход означает, что вы описываете, как должен выглядеть UI в том или ином состоянии приложения, а фреймворк берет на себя заботу о рендеринге UI и переходе между состояниями. Это отличается от императивного стиля, используемого в Android (где вы напрямую управляете элементами пользовательского интерфейса) и iOS (особенно до появления SwiftUI).
Во Flutter вы создаете UI с помощью виджетов. Каждый виджет — это неизменяемое объявление части UI. Виджеты можно рассматривать как кирпичики, из которых собирается UI вашего приложения — по аналогии с Views в Android и ViewControllers в iOS.
В отличие от императивного подхода, при котором вы можете вручную обновлять элементы UI при изменении состояния, во Flutter вы изменяете состояние, и UI автоматически обновляется, чтобы отразить это. Такое изменение способствует более структурированному и масштабируемому подходу к разработке пользовательского интерфейса.
Во Flutter вы создаете UI путем вложения виджетов друг в друга. Это может напомнить вам XML-макеты Android, но предлагает больше возможностей и гибкости благодаря широкому спектру настраиваемых виджетов и возможности создавать свои собственные.
Декларативный UI Flutter на практике
Давайте рассмотрим практический пример. Создадим экран, на котором отображается список элементов. Для этого возьмем виджет ListView для создания списка, а для каждого элемента определим виджет, который описывает, как должен выглядеть элемент в зависимости от его текущего состояния.
ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index].name),
subtitle: Text(items[index].description),
onTap: () => setState(() {
items[index].favorite = !items[index].favorite;
}),
);
},
)
В этом фрагменте ListView.builder автоматически перестраивает каждый виджет ListTile при изменении состояния элемента — например, когда элемент помечается как избранный.
Сравнение с Android и iOS
Android: традиционно разработчики Android использовали XML для определения макета и код на Java/Kotlin для работы с элементами пользовательского интерфейса. Во Flutter и макет, и логика объединены в рамках одного языка (Dart), что упрощает процесс разработки.
iOS: до появления SwiftUI разработчики iOS в значительной степени полагались на Storyboards и императивный код во ViewControllers. В SwiftUI появился более декларативный подход, который в большей степени соответствует Flutter.
Создание простого виджета в Flutter и его аналог в Android/iOS:...