ОСОБЕННОСТИ ИСПОЛЬЗОВАНИЯ ФРЕЙМВОРКА FLUTTER ПРИ РАЗРАБОТКЕ КРОССПЛАТФОРМЕННЫХ ПРИЛОЖЕНИЙ Текст научной статьи по специальности «Компьютерные и информационные науки»

УДК 004.9

ОСОБЕННОСТИ ИСПОЛЬЗОВАНИЯ ФРЕЙМВОРКА FLUTTER ПРИ РАЗРАБОТКЕ КРОССПЛАТФОРМЕННЫХ ПРИЛОЖЕНИЙ

А. О. Камышев Научный руководитель - А. Г. Зотин

Сибирский государственный университет науки и технологий имени академика М. Ф. Решетнева Российская Федерация, 660037, г. Красноярск, просп. им. газеты «Красноярский рабочий», 31

E-mail автора: pocharua@mail.ru

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

Ключевые слова: Flutter, Dart, кроссплатформенностъ, iOS, Android, Web, Desktop.

FEATURES OF USING THE FLATTER FRAMEWORK FOR DEVELOPING CROSSFLATFORM APPLICATIONS

A. O. Kamyshev Scientific supervisor - A.G. Zotin

Reshetnev Siberian State University of Science and Technology 31, Krasnoyarskii rabochii prospekt, Krasnoyarsk, 660037, Russian Federation E-mail автора: pocharua@mail.ru

Described the main features of developing cross-platform applications using the Flutter framework, which allows define a single code base for various platforms.

Ключевые слова на английском языке: Flutter, Dart, Cross-platform, iOS, Android, Web, Desktop.

При разработке информационных приложений разработчики стараются охватить как можно больше платформ, на которых может функционировать продукт. Это является очень важным аспектом разработки, так как фокус только на одной платформе может снизить возможную аудиторию приложения в 2 раза и более раза, что влечет за собой потерю прибыли. Выходом из данной ситуации является использование кроссплатформенных фреймворков приложений. Одним из таких решений является Flutter [1], который определяет единую кодовую базу для различных платформ.

Flutter является разработкой корпорации Google и opensource-сообщества. Код данного фреймворка полностью открыт и находится в репозитории на Github [2]. Flutter полностью написан на языке программирования Dart [3], который так же является разработкой Google. Главными особенностями Flutter являются: скорость разработки, нативные компоненты и производительность. Скорость разработки играет очень большую роль в бизнесе, так как от нее зависит, когда выйдет продукт и как быстро будет он развиваться.

Высокая скорость разработки с применением фреймворка Flutter достигается за счет использования технологии hot reload и декларативного подхода в построении разметки экранов приложения. Hot reload позволяет экспериментировать, строить UI, добавлять новые функции без повторного развертывания приложения на устройстве. Работа hot reload заключается в том, что данный механизм проводит добавление обновленных исходных файлов в запущенную Dart

Секция «Программные средства и информационные технологии»

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

При разработке приложений с помощью Flutter разработчики Google рекомендуют использовать паттерн BLoC (Business Logic Components) [4]. Суть данного паттерна в том, что все в приложении представлено в виде потока событий: виджеты принимают и отправляют события. На рис. 1 показана схема паттерна в объединении с виджетами. Следует отметить, что у каждого компонента BLoC имеются точки входа и выхода (Sink и Stream). С помощью Sink виджеты отправляют события в компонент, a Stream используется для уведомления виджетов об изменении состояния [4].

Рис 1. Схема паттерна BLoC [4]

Если рассматривать структуру разметки, то она будет выглядеть на начальном этапе проектирования примерно, как показано на рис. 2. Как можно заметить, разметка представляет собой древовидную структуру, где каждый элемент представляет собой объект класса Widget [5]. Это позволяет строить сложные и вложенные структуры из различных виджетов. Каждый виджет предоставляет свойства, которые могут менять его поведение или стиль отображения. При этом следует отметить, что при разработке приложений на Flutter разработчикам предоставляются два набора стилизованных UI-компонентов для Android и iOS: Material Components и Cupertino. От использования каждого набора зависит то, как будет выглядеть приложение. Можно использовать один набор компонентов для iOS и Android, но это нарушит гайдлайны [6] одной из операционных систем, что повлияет на удобство использования приложения. На рис 3. показан пример отображения экрана регистрации новых пользователей, который представлен в двух вариациях: Web-приложение в браузере Chrome и мобильное приложение под iOS.

Рис 2. Структура разметки [7]

• • í lacalhost:54038/#/ X +

С? О localhost:54098/íf/

it ©

Л

Email Sign Up

Username

Password

Select one ~ X

Рис. 3. Пример экрана регистрации приложения: а - Web; б - iOS

Главное отличие от других кроссплатформенных решений состоит в том, что Flutter отображает все графические элементы с помощью своего движка для рендеринга. Это позволяет сократить время, которое могло бы затрачиваться на коммуникацию с прослойками нативных компонентов. Flutter позволяет разворачивать приложения под Android, iOS, Google Fuchsia, Web platform, Windows, macOS и Linux. Возможность разработки под многочисленные платформы сокращает время разработки в несколько раз.

Библиографические ссылки

1. Flutter [Электронный ресурс]. URL: https://flutter.dev/ (дата обращения: 20.04.2020).

2. Flutter Github Repository [Электронный ресурс]. URL: https://github.com/flutter/flutter (дата обращения: 20.04.2020).

3. Dart programming language [Электронный ресурс]. URL: https://dart.dev/ (дата обращения: 20.04.2020).

4. Getting Started with the BLoC Pattern [Электронный ресурс]. URL: https://www.raywenderlich.com/4074597-getting-started-with-the-bloc-pattern (дата обращения: 22.04.2020).

5. Widget Class [Электронный ресурс]. URL: https://api.flutter.dev/flutter/widgets/Widget-class.html (дата обращения: 23.04.2020).

6. Human Interface Guidelines [Электронный ресурс]. URL: https://developer.apple.com/ design/human-interface-guidelines/ (дата обращения: 23.04.2020).

7. Flutter - Architecture Application [Электронный ресурс]. URL: https://www.tutorialspoint. com/flutter/flutter_architecture_application.htm (дата обращения: 24.04.2020).

© Камышев А. О., Зотин А. Г., 2020