Кроссплатформенные технологии: глубокое погружение в Flutter

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

Сегодня фреймворк очень популярен. Есть цифры, что в сфере разработки программного обеспечения доля рынка Flutter составляет 0,98%, хотя этому SDK приходится соревноваться с 162 альтернативными способами создания программных продуктов. Масштабное исследование на материале 2022 года, которое затронуло команды разработки 24 000 приложений, показало, что 46% IT-девелоперов используют Flutter в своих проектах.

Flutter: знакомство!

Сайты, приложения и порталы, написанные с использованием Flutter, отличаются высокой производительностью, быстротой и надежностью, в том числе при создании мобильных приложений. В наборе SDK, помимо готовых сегментов кода на языке Dart, спрятанных «под капот» удобных команд, есть много полезных API. В частности, для создания в проекте анимаций и графики.

В результате создается «затягивающий» интерфейс, использующий любое взаимодействие клиента с проектом для еще более подробного знакомства с контентом. Процесс разработки во Flutter интуитивно понятен. Предусмотрена «горячая перезагрузка» (hot reloading). Код удобно контролировать, а баги быстро локализуются. Легко понимать, что и на каком этапе происходит. Перечислим особенности Flutter, делающие привлекательной ставку на него в проектах:

• Dart: он прост для понимания. Спроектирован специально под задачи, подобные тем, которые решаются Flutter. Именно Dart фреймворк обязан львиной долей своих преимуществ (подробнее об этом ниже);
• «Горячая перезагрузка»: означает, что вы можете быстро и просто менять свое приложение без необходимости каждый раз перезапускать его. Это одна из особенностей, которая ускоряет разработку во Flutter по сравнению с альтернативными инструментами. На практике разработчики получают возможность экспериментировать с разными вариантами размещения UI-элементов и тут же проверять их работоспособность без потери времени на перезагрузки. Затем, остановиться окончательно на каком-то одном варианте;
• Виджеты кастомного дизайна: во фреймворк встроен набор виджетов, позволяющих решать задачи нетипичного оформления проектов (ниже поговорим об этом подробно);
• UI-дизайн (пользовательские интерфейсы): во Flutter к созданию вовлекающих, эффективных приложений применяется много технологий Google – текущего владельца фреймворка – в том числе Material design. Систему принципов и визуальный язык для создания UI-виджетов и дизайна в целом от Google. UI – пользовательские интерфейсы. Также Flutter получил от IT-гиганта функционал «глубоких ссылок» (deep links). Это уникальный метод, который в проектах с обилием контента приводит пользователей на целевые части приложения. Он используется в YouTube и других сервисах Google;
• Нативность: при всех преимуществах, которые выше перечислены, Flutter выгодно отличает производительность, в том числе на iOS и Android, поскольку код является нативным для любой платформы, с которой работает;
• Open-source: фреймворк Flutter является бесплатным инструментом, можно свободно использовать его в своих проектах, а можно внести вклад в развитие проекта, предложив или подготовив свои улучшения;
• Рендеринг: во Flutter поддерживается сжатие кода на специальном языке AMD под CPU, эта и ряд других особенностей радикально ускоряют приложения, созданные с участием этого фреймворка.

Dart и Flutter: несколько слов о языке программирования

На этапе, когда Flutter был стартапом, проходил отбор из десятков языков. Какой больше подойдет для новой платформы? Остановились на Dart. Это объектно-ориентированный язык, разработанный тем же Google. Он оптимизирован исходя из потребностей пользователей Flutter, которым нужно поддерживать код, исправлять ошибки, масштабировать приложение и выполнять другие текущие операции.

Dart легко компилируется в JavaScript и нативный код для десктопных или мобильных платформ. Благодаря прямой и простой трансформации одного в другое, коду на Dart не нужны неудобные посредники для работы с такими популярными технологиями, как React Native. Это радикально оптимизирует время первичной загрузки приложения и, в целом, экономичность его работы с ресурсами.Как DevOps-сервис помогает «разгрузить» высоконагруженные системы BPMSoft

В Dart не используется разделение памяти и ряд других манипуляций с данными, которые провоцируют блокировки контента. Декларативная компоновка, которая часто нужна при операциях с «фронтовой» частью приложения, с Dart не требует отдельной технологии вроде XML или JSX, поскольку сам синтаксис языка удобен для создания таких структур и легко читается.

Язык программирования, на который сделана ставка во Flutter, считается легким в освоении, поскольку большая часть его функций знакомы по другим языкам: статическим, интерпретируемым, компилируемым, динамическим. Уникальны не методы языка, а их компоновка и работа. Именно удачное сочетание того, что уже было придумано – залог эффективности Dart.

Еще одна приятная особенность, помимо всего прочего, делающая возможность «горячей перезагрузки» приложений. В стандартной конфигурации Dart работает с фоновым JIT-компилятором (JIT – Just-In-Time). Это опережающий компилятор (AOT). Он в режиме реального времени, по ходу разработки все время компилирует создаваемый код, благодаря чему основной компилятор не так часто требуется разработчику, а срабатывает, когда с проектом знакомиться пользователь.

Стоит добавить, что с Dart нет таких больших проблем с графическими аспектами приложения: плавностью и анимацией. Так как язык изначально создавался под те задачи, для которых сегодня и используется, то его методы были специально спроектированы с тем расчетом, чтобы улучшить ситуацию в упомянутой и многих других проблемах программирования внешнего вида сервисов.

Flutter: чем так хороши виджеты пользовательского дизайна?

Виджет во Flutter – компонент, который позволяет формировать адаптированные под специфические нужды из «строительных блоков»: кнопки, паддинги, шрифты. Можно очень быстро набросать хоть дюжину разных макетов, так как они основаны на другой комбинации одних и тех же виджетов. Виджеты Flutter можно «рендерить» в древовидной структуре, что очень удобно. Есть и минус. Такие структуры такие «быстрые» структуры могут сделать проект более громоздким. Плюс в скорости. Никогда еще создание кросс-платформенных приложений не было таким быстрым. Вот пример виджета из официальной документации^[1] Flutter:

class MyScaffold extends StatelessWidget {
  const MyScaffold({super.key});

  @override
  Widget build(BuildContext context) {
    // Material is a conceptual piece
    // of paper on which the UI appears.
    return Material(
      // Column is a vertical, linear layout.
      child: Column(
        children: [
          MyAppBar(
            title: Text(
              'Example title',
              style: Theme.of(context) //
                  .primaryTextTheme
                  .titleLarge,
            ),
          ),
          const Expanded(
            child: Center(
              child: Text('Hello, world!'),
            ),
          ),
        ],
      ),
    );
  }
}

По сути, виджеты представляют собой уже созданные неизменяемые классы Flutter. В них заранее прописаны некоторые аспекты взаимосвязи нового элемента с другими элементами на страницы, его поведения. Однако, создав дочерний класс от виджета (в примере использован StatelessWidget, который выводит текст), можно его настроить под очередной проект. Нужно лишь обязательно использовать при создании элемента метод build(), так как он возвращает дерево виджетов и помогает вставить новый элемент в систему уже созданных.

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

• inkWell: парой строк кода на странице создается область, которая реагирует желаемым образом на нажатия или «тапы» пользователя;
• image: вывод картинки на страницу. Помимо всего прочего. поддерживает 3 распространенных формата картинок;
• TextFormField: по функционалу данный виджет похож на обычные формы обратной связи, однако по функционалу, который описан в документации, у строки ввода намного больше настроек и возможностей по кастомизации;
• Container: специальный виджет группировок других виджетов. Именно с его помощью во Flutter можно делать сетки публикаций, элементов и кнопок. Например, парой строк кода создается сетка Masonry (вывод смысловых блоков в виде кладки кирпичей);
• LastView: а этот элемент понадобится, если нужно сделать слайдер, поскольку он отвечает за вывод перелистываемых областей.

Полный перечень виджетов, которые поддерживаются во Flutter можно увидеть в специальном разделе^[2] документации. Так как почти все делается фреймворком, за исключением того, что клиент или разработчик могут захотеть кастомизировать, перенос макетов в верстку и в целом: создание приложений становятся простой задачей и проекты реализуются с удивительной быстротой.

Как создать кросс-платформенный сервис с Flutter?

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

Установка платформы Flutter на устройство с Android или iOS

Чтобы поставить Flutter нам нужно убедиться, что Android Studio или Xcode уже есть на устройстве. Существует несколько способов инсталлировать фреймворк на компьютер. Наиболее надежными являются скачивание из репозитория GitHub или с официального сайта Flutter.

Создаем проект Flutter

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

• из 4 типов проектов, из которых предложено будет сделать выбор, выберете пункт «Приложение Flutter». Далее будет еще много полей для заполнения, например, «имя пакета», «отрасль вашей компании». Если у вас нет домена, то данные там вы можете вводить абсолютно любые;
• нажмите затем «Androidx.* artifacts»: тем самым вы подключаете Android Jetpack. Подключаемый пакет с архивами, инструментами, стандартами в помощь разработчикам при создании сложных специфических приложений. Android Jetpack позволяет реализовать очень сложное с удивительной простотой, в частности, можно «малой кровью» решить проблему создания многих нативных элементов в проекте;
• еще одно подменю при создании нового Flutter-проекта связано с выбором нужного языка программирования. Можно предпочесть Swift или Kotlin, а можно писать на «родном» языке Flutter SDK. Нажмите «Finish», подождите, пока Android Studio подготовит новый проект.

Запустите ваше приложение под мобайл или веб

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

Семь причин выбрать для создания кросс-платформенных приложений именно Flutter

Что делает Flutter исключительным, инновационным инструментом для такой цели. Вот несколько конкретных преимуществ:

• нативная производительность: самое важное преимущество. Благодаря графическому движку Skia (Skia Graphics Library), встроенному во Flutter проекты отрисовываются с большой надежностью, экономией к ресурсам и быстротой. При изменениях на странице библиотека каждый раз быстро «переделывает» фронт со скоростью 60 кадров в секунду. Также свою роль в результатах Flutter играет нативность. Все дело в том, что использованная во Flutter комбинация технологий делает этот процесс независимым от интерпретаторов языков и преобразований из языка в язык. Подход идентичен подходу, использующемуся в нативных приложениях;
• одна кодовая база для всех платформ: с Flutter вам не нужно при создании приложения и под iOS, и под Android поддерживать две разные кодовые базы. Один и тот же код будет работать и по десктопы, и под мобайл, и в веб. Это не только экономит деньги, но и дополнительно ускоряет загрузку приложения. Проблемы совместимости операционных систем все же могут возникнуть. 85-90% кода на Dart будет работать во всех 6 популярных операционных системах. Но в случае с Flutter – это огромная редкость;
• улучшения показателя time-to-market: по сравнению с появившимися раньше конкурентами, Flutter характеризуется большей гибкостью. Time-to-market – это время между моментом сдачи клиенту готового IT-продукта и моментом получения от клиента информации о том, что требуется разработать. Важный показатель успешности IT-компании. С Flutter этот срок будет кратким. Обычно сдать проект, рассчитанный на мобайл сложно, поскольку то версия под iOS, то под Android буксует и не дает назвать точный срок сдачи продукта. Как кросс-платформенный фреймворк, Flutter решает проблему. Благодаря положительному влиянию на такой экономический параметр, как time-to-market, Flutter популярен у IT-стартапов, ведь для них скорость выполнения многих проектов может оказаться вопросом жизни и смерти;
• пользовательский механизм рендеринга: одна из проблем, которые возникают при использовании других кросс-платформенных движков, заключается в том, что приложения смотрятся при просмотре пользователем (в обеих операционных системах) или в большей степени, как приложения для iOS или наоборот, как для Android. У Flutter в комплекте система виджетов, которые подходят для обеих систем и в обеих отображаются корректно;
• быстрая разработка: Flutter экономит ресурсы, так как тратится меньше средств на поддержку и разработку. Кодовая база меньше. Гибкий набор инструментов позволяет проще решать сложные задачи. Фреймворк ускоряет выполнение задач;
• продуманный функционал дебага: поиск ошибок при разработке становится простым и быстрым делом, за что Flutter хвалят многие разработчики. Интегрированные инструменты дебага работают и с UI, и с кодом, без специальных настроек работают со всеми операционными системами.

Flutter: подведем итоги!

Несмотря на огромные преимущества, Flutter опробовали еще не все разработчики. Между тем, именно этот инструмент позволяет как никогда раньше облегчить производство IT-продукции. Мы рекомендуем тем, кто еще не смотрел в эту сторону в своей работе, обязательно познакомиться с Flutter. Его преимущества видны особенно выпукло при работе над специфическими, уникальными проектами с особыми требованиями от клиента. Освоить Flutter легко для опытных разработчиков. Основной для него язык Dart является очень простым. Есть большое коммьюнити заинтересованных во фреймворке разработчиков, поэтому с наличием документации, сервисов ответов на вопросы и сервисов обучения проблем не возникнет. Вот, например, отличная платформа для изучения Flutter c нуля.

Автор: Вячеслав Столовицкий, CEO Sigmamobi

Примечания