Что такое Flutter и почему вы должны изучать его в 2020 году
Привет, Хабр! Представляю вашему вниманию перевод статьи: «What is Flutter and Why You Should Learn It in 2020» автора Gaël Thomas.
Что такое Flutter?
Flutter — бесплатный и открытый набор средств разработки мобильного пользовательского интерфейса, созданный компанией Google и выпущенный в мае 2017 года. Проще говоря, с помощью Flutter возможно создать собственное мобильное приложение с одним массивом кода. Это означает, что для создания двух приложений (IOS и Android) можно использовать единый язык программирования и одну базу кода.
Flutter нацелен на две важные вещи:
Для разработки с Flutter используется язык программирования под названием Dart. Это также язык Google, созданный в октябре 2011 года, но значительно улучшившийся в последние годы.
Dart фокусируется на развитии вёрстки веб-страниц; его можно с легкостью использовать для создания мобильных и веб-приложений.
Я приведу пару причин, почему мне нравится Flutter и я предпочту использовать его в следующем году.
Простое обучение и развитие
Flutter — современная платформа! С его помощью намного легче создавать мобильные приложения. Если вы пользовались Java, Swift или React Native, то знайте: Flutter представляет собой немного другое.
Лично мне никогда не нравилась разработка мобильных приложений до того, как я начал использовать Flutter.
Что мне нравится во Flutter? Так это то, что можно написать нативное приложение без кучи кода.
Быстрая компиляция: максимум производительности
Благодаря Flutter, вы можете изменять свой код и видеть результаты в реальном времени. Это называется Hot-Reload. Для обновления самого приложения требуется совсем немного времени. Некоторые значительные модификации могут перезагрузить приложение, но если вы работаете, как дизайнер, например, изменяете размер элементов, то это возможно просто в режиме Hot-Reload!
Идеально подходит для запуска MVP (Минимально жизнеспособный продукт)
Если вам нужно представить свой продукт инвесторам как можно скорее, вы можете использовать Flutter!
4 основные причины использовать Flutter для вашего MVP:
Растущее сообщество
У Flutter классное, мощное сообщество, и это только начало!
Я люблю делиться своими знаниями и полезным контентом по программированию на моем сайте. Мне нужно знать, что я работаю над технологией, полной потенциала и с большим количеством бэкграундов.
Когда я начал использовать Flutter, первое, к чему я приступил, искал сообщества, и был удивлен… Существует просто огромное количество ресурсов для обмена опытом и общения!
Поддержка Android Studio и VS Code
Flutter доступен в различных IDE. Два основных редактора кода и разработки с помощью этой технологией — Android Studio (IntelliJ) и VS Code.
Android Studio — это полноценное программное обеспечение, где все нужное уже интегрировано; для запуска необходимо загрузить плагины Flutter и Dart.
VS Code — простой инструмент, все конфигурируется через плагины с маркетплейса.
Я использую Android Studio, потому что мне не нужно настраивать много параметров для работы.
Но вы можете выбрать предпочтительную вам среду IDE!
Фриланс
Если вы хотите начать с фриланса, вам стоит задуматься о Flutter!
В 2020 году эта технология должна выстрелить. Много компаний собирается искать разработчиков в этой сфере.
Крупнейшая во Франции платформа для фрилансеров под названием Malt недавно опубликовала технологические тенденции этого года. Flutter возрос на 303% на этой платформе в период с 2018 по 2019 год.
Заключение
Надеюсь, что это введение в технологию вас заинтересовало и мотивировало. Что вы думаете о Flutter? Захотели попробовать его в следующем году?
Flutter. Плюсы и минусы
Причем для последней ОС – Fuchsia – это пока единственный способ создать приложение.
Flutter на протяжении долгого времени, с 2015 года, был представлен только в альфа и бета версиях. Релиз первой стабильной версии состоялся 4 декабря 2018 года.
Flutter активно продвигается Google, постепенно набирает популярность и, скорее всего, в дальнейшем будет теснить другие, используемые сейчас средства кроссплатформенной разработки (React Native, Xamarin), особенно при условии широкого распространения Fuchsia. С учетом того, что Google позиционирует данную операционную систему как замену Android, рано или поздно Flutter вытеснит нативную разработку под Android. Поэтому перспективность и активное развитие – основные плюсы Flutter.
+ Перспективность и активное развитие
Давайте разберемся, как это работает.
На языке программирования Dart создается мобильное приложение с описанием графического интерфейса и всей логики работы. Результат работы добавляется в нативное приложение, как и картинки, шрифты и тому подобное (разумеется, этот процесс автоматизирован).
Одновременно в нативной части приложения создается один-единственный экран, где подгружается виртуальная машина Dart, которая и выполняет Flutter.
Заметим, что отсюда следует один из минусов Flutter:
— Конечный установочный пакет больше, так как в него добавляется виртуальная машина Dart.
Таким образом, есть файлы Flutter и есть виртуальные машины, которые добавляются в зависимости от того, что компилируется – iOS или Android.
В составе виртуальной машины есть собственный графический движок, он рисует интерфейс приложения со всеми переходами между экранами, диалогами, фрагментами и т.д. В этом разработка под Flutter значительно отличается от разработки с Xamarin и React Native, которые используют реальные Android и iOS компоненты. В случае с ними невозможно использовать специфические для платформы компоненты (если такая необходимость есть, приходится создавать два варианта UI). С Flutter при выборе дизайна достаточно ориентироваться на одну платформу (например, Android). При сборке проекта под iOS вы увидите стандартный Android интерфейс. Это будет выглядеть немного странно и неожиданно, но вполне работоспособно (впоследствии интерфейс можно доработать).
+ Собственный графический движок (нет необходимости делать интерфейс отдельно для Android и iOS)
Теперь о впечатлениях.
В ходе портирования нескольких приложений с Android на Flutter мы отметили некоторые различия, которые можно считать как плюсом, так и минусом.
Первое, что бросается в глаза – это способ создания экранов, который значительно отличается от используемых на Android и iOS. В Android разделена логика и интерфейс: логика задается кодом, а интерфейс – версткой в xml. На Flutter все это задается с помощью кода. Хотя здесь для интерфейса используется особый стиль – элементы интерфейса создаются вложенными друг в друга. Это немного похоже на верстку, очень похожий способ действует в React Native. При этом отсутствует возможность прямого доступа к элементам. Чтобы что-то изменить на экране, нужно либо обновить весь экран, либо воспользоваться специальными контроллерами, заблаговременно добавленными к виджету во время его создания.
— Интерфейс создается с помощью кода, из-за чего грань между логикой и дизайном гораздо тоньше.
С другой стороны, данный подход позволяет легче разбивать экраны на отдельные компоненты. По сути дела, любой блок вложенных элементов интерфейса можно вынести в отдельный виджет всего за пару шагов, и это гораздо легче, чем создание кастомных View и фрагментов.
+ Интерфейс легко разбивается на отдельные модули
Последние два замечания, вероятно, стоит разобрать на примере. Для этого напишем простое приложение, которое демонстрирует некоторые возможности Flutter. Это будет приложение со стандартной панелью навигации и панелью вкладок.
Сделаем три вкладки:
1) Первая – с текстом и ползунками для настройки размера и цвета текста
2) На вторую добавим загружаемую картинку (с индикатором прогресса)
3) На третьей поместим пример списка
Также предположим, что мы изначально не разбили интерфейс приложения по отдельным вкладкам. Во Flutter можно реализовать данный экран без использования фрагментов. Конечно, такое разбиение все же желательно, но предположим, что это забыли сделать, или дизайн изменился, после чего разработку продолжили по инерции одним классом.
Теперь рассмотрим исходный код, который реализует такую верстку:
Данный фрагмент кода является стандартным для практически любого Flutter приложения (он создается вместе с проектом).
MyApp – это класс самого приложения, в котором при создании MaterialApp описываются общие параметры: название приложения, шрифты, цвета и стили. Также здесь указывается основной экран приложения (для нас это MyHomePage).
Сделаем важное замечание: во Flutter виджеты разделяются на два типа:
1) StatefulWidget
2) StatelessWidget
Для описания StatefulWidget требуется два класса: класс самого виджета и класс его состояния (в котором и будет происходить основная работа).
StatelessWidget описывается одним классом с фиксированным состоянием, и его можно изменить только путем пересоздания из основного виджета. Поэтому для наших целей требуется именно StatefulWidget.
Теперь рассмотрим _MyHomePageState:
Для простоты восприятия красным цветом помечена вкладка с текстом, зеленым – вкладка с картинкой, синим – вкладка со списком, а желтым – навигационное меню. Как можно заметить, интерфейс описывается как множество вложенных друг в друга виджетов (и их массивов):
Рассмотрим их немного поподробнее:
onTapped – функция, вызываемая при переключении вкладки в нижнем меню. В ней вызывается специальная функция setState, которая позволяет обновить текущий виджет с новыми данными (а мы обновили переменную _currentIndex).
Посмотрим, где она применяется:
Здесь мы имеем дело с массивом, откуда с помощью _currentIndex выбирается один из вариантов разметки экрана, и он подставляется как одна из вкладок.
Далее идет функция _setTextStyle. Она имеет весьма необычное объявление для C-подобных языков.
В нее аргументы передаются не как список, а как массив. Это одна из весьма интересных возможностей Dart, которая позволяет создавать функции с переменным количеством аргументов значительно более тонко, чем это происходит в большинстве других языков.
Так как каждый аргумент именован, то мы можем брать их в произвольном порядке. Например:
Разобьем класс большого экрана на виджеты. Лучше всего разбивать по логическим элементам, в нашем случае это вкладки. Благодаря особенностям Flutter, нам для этого достаточно взять фрагменты кода, ответственные за каждую вкладку, и перенести их вместе с логикой в отдельные классы с помощью метода build.
Первая вкладка:
Так как виджет необходимо обновить (метод _setTextStyle), мы используем StatefulWidget.
Для следующих двух вкладок нет необходимости в обновлении, поэтому будем использовать StatelessWidget.
Вторая вкладка:
Третья вкладка:
Измененный код состояния основного экрана:
Итак, мы легко разбили один большой экран на один маленький экран и три маленьких виджета. Можно заметить, что во Flutter экраны концептуально не отличаются от виджетов (точнее, виджеты берут на себя функции и активити, и фрагмента, и кастомных view). Эта особенность весьма удобна, когда в приложении нужен полноэкранный просмотр какого-либо элемента – для этого можно с минимальной доработкой использовать наши виджеты.
И все же есть минимальные различия между виджетом, который используется как экран, и обычным виджетом. Корневым элементом для виджета экрана должен быть объект Scaffold (позволяет добавлять appBar, bottomNavigationBar, floatingActionButton, drawer и т.д.).
На обычные виджеты данное ограничение не распространяется, так как с помощью метода build они встроятся в основной экран, где уже есть Scaffold.
К счастью, добавление к обычному виджету Scaffold не сказывается на его работоспособности.
Также можно добавить SafeArea (чтобы обеспечить отступ для status bar). Получается следующее простое преобразование:
Ну а теперь вернемся к обсуждению плюсов и минусов Flutter.
Flutter недавно вышел в релиз, поэтому баги встречаются достаточно часто. Особенно это заметно при обновлении Flutter – некоторые библиотеки начинают работать с ошибками.
— Нестабильность (совсем недавно вышел из beta)
Очевидно, что при использовании нового фреймворка в вашем распоряжении гораздо меньше библиотек, чем при нативной разработке по Android/iOS. Однако, библиотек для Flutter все равно довольно много, и они продолжают появляться с большой скоростью. Так, например, многие библиотеки были добавлены во второй половине 2018 года, судя по всему, в рамках подготовки к первому стабильному релизу, а важнейшие библиотеки (Google Analytics, Firebase, Maps и т.д.) существовали и до этого.
— Библиотек меньше, чем для нативной разработки
+ Важнейшие библиотеки уже есть, постоянно выходят новые
Самое время подвести итоги! Давайте вспомним все плюсы и минусы, расположив элементы от самых существенных плюсов до самых существенных минусов:
+ Кроссплатформенность
+ Перспективность и активное развитие
+ Важнейшие библиотеки уже есть, постоянно выходят новые
+ Собственный графический движок
+ Интерфейс легко разбивается на отдельные модули
— Конечный установочный пакет больше, так как в него добавляется виртуальная машина Dart
— Интерфейс создается с помощью кода, из-за чего грань между логикой и дизайном гораздо тоньше
— Библиотек (и информации) меньше, чем для нативной разработки
— Нестабильность (совсем недавно вышел из beta)
Как Flutter захватывает мир мобильной разработки
Flutter — молодая, но очень мощная технология, которая позволяет это реализовать самым эффективным путем. Об особенностях и перспективах нового набора инструментов рассказала разработчик на Flutter, основательница школы IT-профессий для девушек ITGIRLSCHOOL Алиса Цветкова. Она очень открытый человек и консультирует разработчиков по Flutter внутри сообщества Heg.ai.
В Appstore и Google Play доступно 4,4 миллиона приложений для 14 миллиардов смартфонов по всему миру. Большинство из них нативные, а значит для каждой платформы разрабатывались обособленно. Такой подход влечет большие финансовые потери, поэтому компании всё чаще стараются использовать кроссплатформенность при разработке.
Когда у компаний появляется идея для нового приложения, то обычно приходится делить разработку на несколько частей: для каждой платформы — своя команда программистов. Либо использовать Flutter — кроссплатформенную технологию разработки мобильных приложений от Google, который позволяет использовать один код в разных операционных системах. Таким образом, его можно применить и для iOS, и для Android одновременно. Это особенно удобно для стартапов из-за скорости работы и меньших трат.
Технология сейчас на пике популярности: Ebay, Google Assistant и Alibaba уже используют Flutter для работы мобильных приложений. В 2020 году Flutter продемонстрировал резкий рост в мире разработки. По данным Statista, показатель использования вырос с 30% до 39%, больше только у React Native (еще одной кроссплатформенной технологии). Резкий скачок обусловлен высокой скоростью написания кода.
Flutter используют в том случае, когда нужно в кратчайшие сроки создать MVP — минимально жизнеспособный продукт. С помощью этого набора инструментов разработка ускоряется примерно в два раза. Для удобной и быстрой работы есть функция Hot Reload, с помощью которой можно мгновенно просматривать все изменения в коде, не теряя текущую версию.
Из-за простоты и удобства Flutter в ближайшем будущем станет самым популярным инструментом для создания мобильных приложений.
Google активно продвигает свою технологию, в то время как React Native постепенно сдает позиции. Обе технологии пока занимают очень высокие позиции на GitHub: 113 тыс. звезд (Flutter) и 93 тыс. (React Native), а в 2020 разработка Google впервые захватила лидерство.
Еще одно преимущество Flutter — это отсутствие доработок из прошлого. Большинство популярных средств разработки придуманы давно, поэтому содержат старые методы и технологии, которые надо постоянно улучшать. К примеру, Xamarin написан в 2011 году, а Flutter — в 2017, что делает его методы современнее и проще.
У молодой платформы встречаются и недостатки: если при разработке возникают проблемы, то скорее всего найти их решение в интернете не удастся. Flutter — новый инструмент, с которым еще не так много работали. Вероятно, с ростом популярности фреймворка этот недостаток исчезнет естественным образом.
Flutter — это все о виджетах. Платформа использует собственные виджеты с расширенной анимацией и распознаванием жестов, которые отображает в графической библиотеке Skia. Она размещается на движке Flutter, и служит для управления API-интерфейсами.
Изучить Flutter с нуля — несложная задача, которая займет от силы 3-4 месяца. В основе платформы лежит язык программирования Dart — еще одна разработка Google. Синтаксис схож со знакомыми многим C#, Java и JavaScript, а значит опытному программисту будет легко обучиться Flutter.
Из-за новизны технологии, программистов Flutter пока немного. Почти все работающие с этим фреймворков так или иначе раньше занимались мобильной разработкой на другом языке.
Значит, предлагать вакансии Flutter-разработчиков стоит всем, связанным с Dart, JavaScript, Native React и т.д. Возможно кто-то из них имел небольшой опыт с Flutter и хочет окончательно сменить специализацию. Существует и другой способ поиска сотрудников — например, IT-компания The MASCC решает эту проблему аутсорсингом. Они готовы предоставить полноценную команду из 6 человек для разработки приложения на Flutter.
По состоянию на 2021 год всего 11% разработчиков — девушки. Большинство из них фронтендеры, а значит могут быть косвенно знакомы с Flutter.
Для тех, кто еще не сталкивался с такой технологией, в мае в моей школе программирования для девушек ITGIRLS я планирую запустить свой курс по мобильной разработке на Flutter. Это, например, особенно удобно для тех, кто в декрете — ушли в 2021, а в 2024 вернулись с умением работать на новой, востребованной платформе, спрос на которую за несколько лет вырастет многократно.
5 причин выбрать Flutter в 2020 году
Что такое Flutter?
Flutter — это платформенно-независимая технология Google для создания приложений, используемых на мобильных, настольных и веб-платформах. Официально она была представлена в декабре 2018 года и за это время успела обогнать по популярности React Native как на GitHub, так и на Stack Overflow. Этот успех вполне заслужен. Попробуем разобраться в его причинах.
Очередная платформа. Но зачем?
Когда я рассказываю разработчикам о Flutter, то первое, что обычно слышу в ответ: «Зачем кому-то использовать её, когда есть React Native или какой-нибудь другой инструмент из пакета SDK?». Ответ прост: технология Flutter практически во всём превосходит любой из этих инструментов.
Обычно мы не замечаем того, что возможности используемых нами инструментов ограничены, пока нам не покажут что-то, работающее гораздо лучше. И даже тогда предубеждения, стереотипы да и просто наши привычки не дают отказаться от старого в пользу чего-то нового, более мощного и гибкого.
Так программист, имеющий лишь опыт разработки приложений на PHP, может с пеной у рта доказывать, почему он считает PHP самым крутым языком в мире, и в то же время понятия не иметь о целой экосистеме устройств за пределами простых веб-серверов.
Но веб-сайтом мир не ограничивается, именно поэтому я так ратую за использование специализированного инструментария для разработки приложений в противовес тем средствам и инструментам, которые были привнесены из клиентской части веб-экосистемы.
Преимущества Flutter
У Flutter есть ряд преимуществ по сравнению с конкурентами. Эти преимущества заложены в языке программирования и комплекте средств разработки, позволяющих Flutter устранять проблемы и недостатки, с которыми не справляются другие технологии.
Давайте теперь рассмотрим пять причин, по которым Flutter стоит использовать в вашем следующем проекте:
1. Язык Dart
Не секрет, что языки программирования зачастую испытывают проблемы с приведением к единым стандартам и разные версии этих языков различаются по функциональным возможностям. Причём многие разработчики ориентируются в этих различиях с большим трудом. А вот язык Dart с самого начала был задуман как инструмент для создания клиентских приложений, оптимизируемый и заточенный под разработку пользовательского интерфейса.
Выгоды использования этого языка в том, что:
Dart обладает чистым и невероятно мощным синтаксисом, задающим идеальные условия для создания чёткой архитектуры и дизайна приложения, не говоря уже об обеспечении слаженности совместной работы программистов, долговечности, простоте сопровождения, приведении к единым стандартам и многом другом, чем не может похвастать большинство других инструментов для кроссплатформенных разработок. Для тех, кто уже работал с такими популярными языками, как C#, Java и TypeScript, не составит большого труда перейти на Dart и сразу начать его использовать.
2. Массовый переход разработчиков на Flutter
За какой-то год Flutter обошла по популярности React Native как на GitHub, так и на Stack Overflow. А ведь React Native была самой используемой платформой своего времени. Какая польза от этого для вашего приложения?
Здесь вы получаете мощный запас ресурсов для обучения, больше квалифицированных разработчиков, готовых потрудиться над вашим приложением. И всё это в условиях быстрого роста самой технологии, которая стремительно развивается и дольше не утрачивает своей актуальности по сравнению с теми технологиями, которые многие годы по большому счёту оставались на своём прежнем уровне (например, React Native).
Динамика изменений на Stack Overflow — сравнение Flutter и React Native
На этом графике наглядно показано, как Flutter вот так из ниоткуда вдруг появилась и сразу вырвалась вперёд. Её лидерство, скорее всего, продолжится, и рано или поздно может так оказаться, что уже днём с огнём не сыщешь разработчиков, готовых осуществлять поддержку кроссплатформенных приложений (и имеющих возможность это делать) с использованием других технологий. И хотя до этого может пройти много времени (несколько лет), такая перспектива вполне реальна, ведь подобные метаморфозы уже не раз происходили в сообществе разработчиков ПО.
3. Высокая скорость
Приложения на Flutter компилируются в машинный код, использующий графику и механизм визуализации, встроенный в C/C++, поэтому приложения получаются очень быстрыми и высокопроизводительными. Они способны стабильно выдавать 60 кадров в секунду на большинстве устройств и до 120 кадров в секунду на устройствах, поддерживающих Flutter.
Использование Flutter даёт более заметный рост производительности в сравнении с другими кроссплатформенными технологиями. Это стало решающим фактором для перехода на Flutter многих разработчиков мобильных приложений. Стоит подчеркнуть, что речь идёт именно о кроссплатформенных (или платформенно-независимых) технологиях, где Flutter имеет явное преимущество перед своими конкурентами в производительности и визуализации, в то время как при создании нативных приложений такого превосходства добиться нереально.
4. Простота освоения (относительная)
Вы можете сказать, что нет такого языка или набора средств и инструментов для разработки в реальной эксплуатационной среде, который было бы легко освоить. Тем не менее существует большая разница между теми из них, которые имеют чёткую документацию и стандартные шаблоны проектирования и работают с большим количеством примеров использования и сценариев применения, и теми, документация которых неоднородна, а способы решения казалось бы простых задач в значительной степени противоречат друг другу.
Ещё одной причиной столь стремительного роста популярности Flutter в среде разработчиков (помимо высокой производительности) стало наличие подробной документации и большого числа примеров. А это очень важно для разработчиков, желающих изучить новую платформу, набор средств и инструментов или язык.
И особенно важно это для опытных программистов, у которых уже глаз намётан, и они легко могут найти ошибки в дизайне языка или в самом инструментарии. Они быстро разочаровываются в новой технологии, когда в процессе изучения обнаруживается, что у неё плохая документация или примеры решения основных задач противоречат друг другу.
Flutter ценят за чёткую документацию и дружное сообщество разработчиков, объединяющее экспертов и новичков, готовых прийти на помощь и поделиться опытом, предоставляя отлично работающие примеры своих проектных моделей и шаблонов разработки. Здесь царит доброжелательная атмосфера, способствующая лёгкому освоению технологий самым широким кругом пользователей.
5. Отличный дизайн
В основание Flutter изначально были заложены две мощные штуки: превосходный язык (Dart) и быстрый, высокопроизводительный механизм визуализации (Skia). Такой выбор был хорошо продуманным решением, избавившим пользователей от дальнейших долгих исканий.
В результате получилась превосходная платформа, помогающая разработчикам самых разных уровней квалификации создавать приложения с использованием подходящих шаблонов проектирования и лучших практик. Можете забыть о противоречиях в стандартах или каких-то технических недоработках, обусловленных несовершенством языка (например, кошмарного JavaScript — и это ещё мягко сказано).
Опытные разработчики, которые собаку съели на создании приложений с использованием самых разных устройств, сразу увидят все преимущества Flutter, едва начав работать с ним. Новички тоже смогут оценить эту технологию, ведь в Интернете полно отличных примеров для изучения лучших практик.
Заключение
Предназначенная для создания высокопроизводительных приложений в рекордные сроки, Flutter помогает разработчикам избегать стольких проблем, что я даже затрудняюсь всех их перечислить. Чтобы в полной мере оценить эту платформу для разработки приложений, надо самому испытать её в деле. Надеюсь, теперь вам стало понятно, почему опытные разработчики делают выбор в пользу Flutter для своих проектов.
Спасибо за внимание и удачи в вашем следующем проекте!
