IT технологии: Flutter

• История
• Про платформу Flutter
• Про пользовательский интерфейс
• Про виджеты
• Преимущества Flutter
• Установка Flutter на Windows
• Установка Flutter на MacOS
• Отличие Flutter от других кроссплатформенных решений
• С чего начать?
• 4 основные причины использовать Flutter для вашего MVP
• Вакансии Flutter в 2022

История

Первая версия Flutter носила название «Sky» и работала только под Android. Она была представлена в 2015 году на саммите разработчиков Dart с заявленной возможностью рендеринга 120 фреймов в секунду. 4 декабря 2018 года во время Flutter Live было объявлено о выпуске первой стабильной версии 1.0. Полная поддержка создания веб-приложений появилась в версии 2.0 (март 2021 года), с этой же версии реализована поддержка создания настольных приложений для Windows, macOS и Linux и Google Fuchsia (в виртуальной машине Dart с JIT-компилятором).

Про платформу Flutter

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

• В отличии от многих известных на сегодняшний день мобильных платформ, Flutter не использует JavaScript ни в каком виде. В качестве языка программирования для Flutter выбрали Dart, который компилируется в бинарный код, за счет чего достигается скорость выполнения операций сравнимая с Objective-C, Swift, Java, или Kotlin.
• Flutter не использует нативные компоненты, опять же, ни в каком виде, так что не приходится писать никаких прослоек для коммуникации с ними. Вместо этого, подобно игровым движкам (а вы ведь знаете что у игр очень динамичный UI), он отрисовывает весь интерфейс самостоятельно. Кнопки, текст, медиа-элементы, фон — все это отрисовывается внутри графического движка в самом Flutter. После вышесказанного стоит отметить, что “Hello World” приложение на Flutter занимает совсем немного места: iOS ≈ 2.5Mb и Android ≈ 4Mb.
• Для построения UI во Flutter используется декларативный подход, вдохновленный веб-фреймворком ReactJS, на основе виджетов (в мире веба именуемых компонентами). Для еще большего прироста в скорости работы интерфейса виджеты перерисовываются по необходимости — только когда в них что-то изменилось (подобно тому как это делает Virtual DOM в мире веб-фронтенда).
• В дополнение ко всему, в фреймворк встроен Hot-reload , такой привычный для веба, и до сих пор отсутствовавший в нативных платформах.

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

Про пользовательский интерфейс

Одно из преимуществ Flutter - одинаковый пользовательский интерфейс и бизнес-логика на всех платформах.

Flutter не нуждается в каких-либо компонентах пользовательского интерфейса для конкретной платформы для визуализации пользовательского интерфейса. Единственное, что нужно Flutter для отображения пользовательского интерфейса приложения, — это холст, на котором можно рисовать. А вот как это выглядит:

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

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

Про виджеты

Во Flutter’е все построено на Widget’ах: тут и вьюшки, и стили с темами, и состояние в виджетах хранится.

Команда Flutter приложила много усилий, чтобы предоставить широкий спектр готовых к использованию виджетов. Большинство из них невероятно настраиваемы, что экономит ваше время, как никакой другой фреймворк раньше. В дополнение к многочисленным основным виджетам компоновки Flutter предоставляет большой набор виджетов Material и Cupertino, которые идеально имитируют поведение каждого языка дизайна. Вот как работает:

Все графические объекты, включая текст, формы и анимацию, создаются с помощью виджетов; комбинированием простых виджетов создаются сложные виджеты. С фреймворком поставляется два основных набора виджетов — Material Design (стиль Google) и Cupertino (стиль Apple). При этом создавать приложения Flutter можно и без виджетов, напрямую вызывая методы библиотеки Foundation для работы с канвой.

Фреймворк разработки Flutter работает быстрее, чем его альтернативы. В большинстве случаев вы можете ожидать, что приложение Flutter потребует как минимум в два раза меньше человеко-часов по сравнению с тем же приложением, разработанным отдельно для Android и iOS. Основная причина предельно проста: просто не нужно писать код для конкретной платформы, чтобы добиться желаемых визуальных эффектов в вашем приложении. Любой двухмерный пользовательский интерфейс может быть реализован во Flutter без взаимодействия с аналогом нативного приложения.

Кроме того, Flutter предоставляет декларативный API для создания пользовательского интерфейса, который, заметно повышает производительность. Это наиболее очевидно, когда речь идет о визуальных настройках.

Функция «горячей перезагрузки» Flutter, в свою очередь, позволяет практически мгновенно увидеть внесенные изменения, даже не теряя текущего состояния приложения. И это именно то, что ускоряет разработку приложений Flutter в несколько раз.

Преимущества Flutter

У Flutter есть ряд преимуществ по сравнению с конкурентами. Эти преимущества заложены в языке программирования и комплекте средств разработки, позволяющих Flutter устранять проблемы и недостатки, с которыми не справляются другие технологии.

Давайте теперь рассмотрим пять причин, по которым Flutter стоит использовать в вашем следующем проекте:

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

Выгоды использования этого языка в том, что:

• здесь нет конкурирующих стандартов;
• нет навязывания языковых средств, принятых в сообществе разработчиков;
• нет странностей, присущих многим языкам программирования;
• нет кучи абсолютно несовместимых шаблонов проектирования;
• наконец, нет необходимости иметь среди стандартных функциональных возможностей и средств очередной инструмент-катастрофу (взять хотя бы тот же Redux).

Dart обладает чистым и невероятно мощным синтаксисом, задающим идеальные условия для создания чёткой архитектуры и дизайна приложения, не говоря уже об обеспечении слаженности совместной работы программистов, долговечности, простоте сопровождения, приведении к единым стандартам и многом другом, чем не может похвастать большинство других инструментов для кроссплатформенных разработок. Для тех, кто уже работал с такими популярными языками, как C ,# Java и TypeScript, не составит большого труда перейти на Dart и сразу начать его использовать.

За какой-то год Flutter обошла по популярности React Native как на GitHub, так и на Stack Overflow. А ведь React Native была самой используемой платформой своего времени. Какая польза от этого для вашего приложения?

Здесь вы получаете мощный запас ресурсов для обучения, больше квалифицированных разработчиков, готовых потрудиться над вашим приложением. И всё это в условиях быстрого роста самой технологии, которая стремительно развивается и дольше не утрачивает своей актуальности по сравнению с теми технологиями, которые многие годы по большому счёту оставались на своём прежнем уровне (например, React Native).

Приложения на Flutter компилируются в машинный код, использующий графику и механизм визуализации, встроенный в C/C++, поэтому приложения получаются очень быстрыми и высокопроизводительными. Они способны стабильно выдавать 60 кадров в секунду на большинстве устройств и до 120 кадров в секунду на устройствах, поддерживающих Flutter.

Использование Flutter даёт более заметный рост производительности в сравнении с другими кроссплатформенными технологиями. Это стало решающим фактором для перехода на Flutter многих разработчиков мобильных приложений. Стоит подчеркнуть, что речь идёт именно о кроссплатформенных (или платформенно-независимых) технологиях, где Flutter имеет явное преимущество перед своими конкурентами в производительности и визуализации, в то время как при создании нативных приложений такого превосходства добиться нереально.

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

Ещё одной причиной столь стремительного роста популярности Flutter в среде разработчиков (помимо высокой производительности) стало наличие подробной документации и большого числа примеров. А это очень важно для разработчиков, желающих изучить новую платформу, набор средств и инструментов или язык.

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

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

В основание Flutter изначально были заложены две мощные штуки: превосходный язык (Dart) и быстрый, высокопроизводительный механизм визуализации (Skia). Такой выбор был хорошо продуманным решением, избавившим пользователей от дальнейших долгих исканий.

В результате получилась превосходная платформа, помогающая разработчикам самых разных уровней квалификации создавать приложения с использованием подходящих шаблонов проектирования и лучших практик. Можете забыть о противоречиях в стандартах или каких-то технических недоработках, обусловленных несовершенством языка (например, кошмарного JavaScript — и это ещё мягко сказано).

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

Установка Flutter на Windows

Чтобы начать разрабатывать приложения с помощью Flutter, необходимо установить SDK. Но прежде всего следует отметить, что для работы Flutter SDK в Windows в системе должен быть установлен Git for Windows, который можно найти по адресу https://git-scm.com/download/win.

Также Flutter использует Android SDK. Самый легкий способ установить Android SDK - сразу установить Android Studio, вместе с которой будут установлены вс необходимые инструменты.

Непосредственно для установки Flutter SDK перейдем на страницу https://flutter.dev/docs/get-started/install/windows. На этой странице найдем в секции Get the Flutter SDK ссылку на zip-архив с Flutter SDK и загрузим его:

Далее распакуем архив, например, на диске С. Например, в нашем случае архив распакован в папку C:\flutter.

В распакованном архиве в папке flutter\bin мы найдем инструменты для компиляции приложения. Например, в нашем случае полный путь к этой папке C:\flutter\bin:

Путь к этой папке нам надо добавить в переменные среды. (Переменные среды можно открыть через Панель управления - Система - Дополнительные параметры системы - Переменные среды).

Здесь нам надо изменить переменную Path, добавив путь к папке bin в Flutter SDK:

Чтобы проверить корректность установки Flutter, откроем командную строку и введем команду flutter. Если Windows распознает ее, и последует вывод некоторой справочной информации (например, как использовать те или иные команды в консоли), то flutter установлен и настроен.

В качестве альтернативы установить Flutter SDK можно через Git. Для этого необходимо в командной строке перейти к папке, где должен располагаться SDK и далее выполнить в командной строке следующую команду:

В данном случае с репозитария на гитхабе будет загружена последняя стабильная версия Flutter SDK. Для выполнения этой команды необходимо установить Git for Windows, как было написано выше.

Установка Flutter на MacOS

Для установки и обновления Flutter использует git, поэтому необходимо установить git. Однако если установлен Xcode, то git устанавливать не надо, так как Xcode уже включает git.

Для установки Flutter SDK перейдем на страницу https://flutter.dev/docs/get-started/install/macos и найдем на странице ссылку на Flutter SDK и загрузим его:

Далее поместим папку с Flutter SDK где-нибудь на жестком диске. Например, в нашем случае Flutter SDK расположен в корневой папке текущего пользователя.

Для использования Flutter SDK в треминале, необходимо добавить путь к папке bin в SDK в системные переменные. Добавление для текущего окна терминала:

При первом использовании команды flutter произойдет загрузка Dart SDK.

Отличие Flutter от других кроссплатформенных решений

Написать хорошее производительное приложение на React Native сложно из-за технических решений, которые лежат в его основе. Взаимодействие с платформой возможно только через JavaScript Bridge. В процессе этой операции значительно проседает производительность, что критично при отрисовке UI.

Flutter же справился с проблемой производительности дорогой ценой — разработчикам фреймворка пришлось написать свои паки виджетов на Dart (на нем же написан и Flutter). При отрисовке не просто исчезла проблема проседания по fps, но и команда Flutter уверяет, что в теории можно достичь не только 60fps, но и 120fps на девайcах, которые это поддерживают.

Многие муссируют тему, почему фреймворк не поддерживает Kotlin и появится ли он, но разработчики Flutter говорят, что такой задачи у них нет, но может быть это сделает кто-то ещё, вроде JetBrains.

Flutter-приложение — это огромный recyclerview, список с переиспользуемыми элементами, которые рендерятся только при изменении данных, стоящих за ними. При этом виджеты, которые пересоздаются каждые 16 миллисекунд, не имеют ничего общего с виджетами, которые есть в Android и ответственны за отрисовку себя на канве. Тут виджет — это Data Class, в котором есть данные, описывающие этот виджет. Виджет, который рисуется на канве, существует в единственном экземпляре в течение всего жизненного цикла. Полностью пересоздается только его обёртка с данными. Это позволяет работать быстро, не забивая память. Это не тот open source, который раз в квартал зеркалируется из закрытого репозитория в публичный гитхаб. Это настоящий open source, где разработка ведется прямо в открытом репозитории на гитхабе. Ты можешь внести любые изменения в виджеты, написать свой widget pack и использовать его в своей компании.

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

С чего начать?

С чего начать, если решил попробовать для себя Flutter? Кодлабы Гугла содержат конкретные примеры, как с Java пересесть на Dart. Команда Flutter-разработки выпустила серию статей, как мигрировать представителям различных профилей. Есть Flutter for Android developers, Flutter for iOS developers. Советуем начать с этих статей, они все есть в документации Flutter.

Еще нужно затронуть тему, как подружиться с Dart как с языком разработки для Flutter. Для этого есть Dart Language Tour. Там раскрыты все основные концепции Dart. Но некоторые вещи отличаются чуть более существенно (особенно, если копнуть глубже), некоторых вещей не хватает, например, перегрузки функции, там до сих пор нужно ставить точку с запятой в конце строки…

Есть сайт Flutter с подробными инструкциями, как настроить среду разработки, что загрузить, какие SDK, плагины установить. Есть кодлабы, они достаточно простые и в меру информативные, так как не дают и сотой части того, что представляет собой Flutter. Но для начала, чтобы в принципе понять концепцию, кодлабы подойдут. Есть функциональные примеры — клоны реальных приложений Whatsapp, Instagram с допущениями.

Рекомендуем сайт https://itsallwidgets.com/, который позволяет (неважно, собираетесь вы что-то разрабатывать на Flutter или нет) прямо сейчас установить на свой девайс showcase-приложения и посмотреть, как они работают. Есть приложение History of Everything, которое было написано за три месяца. Это абсолютный фан, сумасшедшие анимации. Там гигантский таймлайн, который можно зумить, и на нем начинают появляться различные эпизоды жизни человечества. У каждого своя кастомная анимация. Все сделано на Dart без нативных библиотек. На этом сайте можно понять, где граница возможностей Flutter: есть игры, написанные исключительно на Dart, отрисованные на Skia, есть и обычные приложения.

Недавно проходил конкурс Flutter Create: надо было написать свое маленькое приложение с условием, чтобы исходник, включая все зависимости, весил не более 5Кб. Выиграл товарищ, который сделал интерактивный земной шаг, который можно покрутить, ткнуть в любое место, и увидеть реальный прогноз погоды. Выглядит совершенно нереально. Эти вещи можно использовать для вдохновения.

И можно еще использовать несколько репозиториев на GitHub, созданных энтузиастами. Все они называются одинаково — Awesome Flutter. Это сборники со всеми сэмплами, библиотеками, статьями.

По поводу информационных ресурсов. Рекомендуем подписаться на официальный youtube-канал Flutter. Есть шоу, которые выходят на регулярной основе. Flutter Widget of the week — каждую неделю подробный рассказ об отдельном виджете, основные кейсы применения и возможности. The Boring Flutter Development Show — интересный формат шоу, которое идет целый час и выходит без монтажа. Все это время участники кодят. Смотреть за этим поразительно интересно.

4 основные причины использовать Flutter для вашего MVP

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

Итак, 4 основные причины использовать Flutter для вашего MVP:

• Разработать мобильное приложение с Flutter дешевле, потому что не нужно создавать и — поддерживать два мобильных приложения (одно для IOS и Android).
• Для создания MVP достаточно одного разработчика.
• Это эффективно; невозможно заметить разницу между нативным приложением и приложением Flutter.
• Это красиво; Вы можете легко использовать виджеты, предоставляемые Flutter, и персонализировать их для создания оригинального пользовательского интерфейса для ваших клиентов.

Вакансии Flutter в 2022

Если вы хотите начать с IT фриланса, вам стоит задуматься о Flutter! Осуществите поиск подходящей вакансии на сайте Apeirondb.com или просто перейдите по ссылке: Технология Flutter. Также вы можете воспользоваться телеграм ботом HIRE:bot(t.me/hireIT_bot) @hireIT_bot, который при правильной настройке, будет отправлять вам только Flutter вакансии. На апрель месяц 2022 на сайте более 500 вакансий с технологией Flutter.