Flutter - это набор инструментов пользовательского интерфейса Google для создания красивых, скомпилированных в исходном коде приложений для мобильных, веб- и настольных компьютеров из единой базы кода.
Flutter обещает нам, что мы сможем создать приложение, которое будет работать на Android, iOS, в Интернете и на рабочем столе. Насколько это правда? Как это делается? Дает ли это нам достаточно гибкости для создания того, что мы хотим, при этом имея возможность работать на всех этих платформах? Можем ли мы по-прежнему использовать специфичные для платформы функции и библиотеки? Есть ли альтернативы Flutter? Давайте найдем ответы на все эти вопросы!
Что такое флаттер?
Flutter - это фреймворк (SDK), в котором вы можете создавать кроссплатформенные приложения. Flutter включает фреймворк в стиле React, движок 2D-рендеринга, готовые виджеты и инструменты разработки. Язык, на котором вы пишете свой код, - Dart. Примечательные особенности платформы Dart:
- Он поддерживает «горячую перезагрузку», при которой изменения в исходные файлы могут быть внесены в работающее приложение. Это обеспечивает быструю разработку, при которой вы можете непосредственно видеть результаты своих изменений. Вы также увидите это в этой статье.
- Он специально разработан для разработки пользовательского интерфейса.
- Его можно запустить как сценарий (J ust I n T ime compilation), скомпилированный в собственный код (A head O f T ime compilation), и его даже можно скомпилировать в Javascript для использования в Интернете.
Основа приложения Flutter - это движок Flutter. Этот движок взаимодействует с базовыми системами, такими как Android, iOS и т. Д. Большая часть движка написана на C ++. Он предлагает ряд основных библиотек для рендеринга, файлового и сетевого ввода-вывода, систему плагинов и среду выполнения Dart.
Еще один термин, который вы увидите, если погрузитесь в Flutter, - это «основная библиотека». Это API, о котором вы будете говорить при написании приложения Flutter. Базовая библиотека написана на Dart и является интерфейсом для всех базовых компонентов, предлагаемых движком Flutter.
Все в виде виджета!
База Flutter состоит из виджетов. Слоган флаттера: «Все - виджет». Виджет определяет часть пользовательского интерфейса. Виджет может быть чем угодно: кнопкой, фрагментом текста, меню, шрифтом или даже отступом между элементами. Это может показаться немного неестественным, но как только вы увидите пример кода, вы поймете, что это действительно имеет смысл. Нет отдельных файлов для верстки и кода. Все, что определяет виджет, определяется в одном виджете Flutter.
Когда состояние виджета изменяется, виджеты автоматически обновляются и при необходимости перерисовываются. Вам не нужно писать код для отслеживания состояния и обновления пользовательского интерфейса.
Например, если вы хотите центрировать фрагмент текста, вы можете просто сделать это, создав виджет «Центр» и сделав текст дочерним по отношению к этому центральному виджету. На самом деле это просто, возможно, даже проще, чем работать с расширенной системой ограничений, такой как Android.
Чтобы узнать, какие виджеты доступны во Flutter, ознакомьтесь с документацией по виджетам! Здесь вы увидите, что в основном есть два набора виджетов. Набор виджетов материального дизайна и меньшее подмножество виджетов Купертино, которые в значительной степени основаны на текущем дизайне iOS.
Эти виджеты просто хорошо выглядят, и их легко комбинировать, чтобы создать потрясающе выглядящее приложение. Стоит отметить, что эти виджеты не зависят от базовой платформы. Они являются частью Flutter, и все, что нужно Flutter, - это холст для их рисования.
Пример кода
Чтобы сделать это более конкретным, я продемонстрирую виджеты с помощью примера кода:
На следующем снимке экрана вы можете увидеть результат работы этого кода в эмуляторе Android:
Обработка холста
Помимо виджетов вы также можете напрямую управлять холстом через библиотеку фундамента. Большинству людей эта опция не понадобится, поскольку она довольно низкоуровневая, но приятно знать, что такая возможность есть. Примером проекта, который использует это, является Flame Engine, игровой движок, разработанный для Flutter.
Создание мобильного приложения (Android + iOS)
Давайте создадим мобильное приложение и посмотрим, насколько это будет легко (или сложно). Вы можете следовать указаниям и попробовать это самостоятельно, но не стесняйтесь просто сесть и расслабиться, пока я буду делать всю тяжелую работу.
Шаг 1. Установка Android Studio и Flutter
Вы можете использовать любой редактор и любую платформу (MacOS, Linux, Windows) для создания приложений Flutter. Поскольку поддерживается Android Studio, я настоятельно рекомендую использовать ее, поскольку это отличная платформа и она полностью бесплатна. Установить Android Studio очень просто. Перейдите на страницу загрузки, следуйте инструкциям по установке, и все готово.
Я использую Mac, потому что это то, над чем я работал в основном последние 10 лет. К счастью для меня, это также позволяет мне протестировать приложение Flutter на iOS, поскольку у меня уже установлены Xcode и виртуализация iOS.
Шаг 2: установите Flutter
Далее нам нужно установить Flutter. Возможно, это немного больше работы, но все же легко. Перейдите к установке Flutter и следуйте инструкциям. Убедитесь, что вы также установили плагин Flutter для Android Studio. Вы можете найти и установить плагин в диалоговых окнах настроек плагина Android Studio.
Шаг 3: создайте новый проект
Теперь можно начинать самое интересное. Начнем с создания нового проекта Flutter:
Затем мы выбираем создание приложения Flutter:
Дайте нашему проекту имя (demo_app), место на диске и описание. Вам также может потребоваться указать место установки Flutter SDK. Приятным дополнением при использовании Android Studio является то, что вы также можете установить SDK отсюда одним нажатием кнопки:
На следующем экране есть другие варианты для заполнения. Домен вашей компании определит имя вашего пакета. Вы можете использовать здесь что угодно, если у вас еще нет реального домена. Я использовал example.com. Затем у вас есть возможность использовать артефакты androidx. *. Используя androidx, вы в основном выбираете Android Jetpack. Jetpack - это набор библиотек, инструментов и руководств, которые помогут разработчикам легче писать высококачественные приложения. Если вы создаете новое приложение, я бы порекомендовал использовать androidx, даже если вам не нужно вообще об этом беспокоиться, если вы используете только Flutter и не выполняете ничего из низкоуровневых нативных вещей Android.
Вам нужно решить для себя, хотите ли вы включить поддержку Kotlin и / или Swift. Опять же, если вы планируете оставаться в рамках Flutter SDK, не имеет значения, что вы выберете здесь.
После нажатия кнопки «Готово» вам придется подождать, пока Android Studio выполнит всевозможные настройки проекта.
Шаг 4. Запуск вашего приложения
Как только Android Studio будет завершена, вы получите очень простой пример приложения, которое вы можете запустить:
Прежде чем вы сможете запустить мобильное приложение, вам потребуется либо настоящий телефон, подключенный к вашему компьютеру, либо вам нужно создать эмулятор (виртуальное устройство).
Для управления виртуальными устройствами перейдите в Инструменты - ›AVD Manager.
Поскольку я работаю на MacOS, у меня есть возможность создать эмулятор Android и эмулятор iOS, что я и сделал. Следующий снимок экрана доказывает, что наше демонстрационное приложение работает на обеих этих платформах!
Как вы могли заметить, вверху справа есть ярлык «DEBUG». В режиме отладки производительность приложения невысока, но он позволяет нам делать несколько очень полезных вещей. Возможно, одна из самых важных особенностей Flutter - это его способность выполнять горячую перезагрузку с отслеживанием состояния. Это означает, что вы можете изменить код, нажать «Сохранить» в среде IDE и сразу увидеть изменения. Приложение не будет перезапущено, и даже его состояние не будет сброшено. Соответствующий код просто заменяется в горячем режиме. Если виджет определяется кодом, он сразу же перерисовывается. Вы можете увидеть живую демонстрацию этого в следующем видео, которое я сделал:
Создание веб-приложений
Так можно ли создать веб-приложение с помощью Flutter? Да! Когда я изначально писал эту статью, я не мог запустить даже простейшую демонстрацию в веб-браузере. Все, что у меня было, это пустая страница. Я выполнил инструкции здесь. SDK также предупредил, что эта функция является экспериментальной. Но по состоянию на 12 декабря 2019 года веб-поддержка перешла в режим бета-тестирования, и в нее было внесено множество улучшений.
Создание настольных приложений
Наконец, что касается создания нативных настольных приложений, мне придется вас разочаровать, так как на момент написания это вряд ли возможно. Вы можете увидеть текущий статус поддержки десктопов на этой странице Github. На данный момент поддержка MacOS является наиболее полной. И Windows, и Linux, похоже, находятся на ранних стадиях разработки. Если вы надеялись создавать настольные приложения с помощью Flutter, боюсь, что потребуется время, чтобы они стали стабильными и поддерживались.
Сказав это, я попытался запустить наше демонстрационное приложение и с некоторым дополнительным кодом (вам нужно жестко запрограммировать целевую платформу) я запустил его на MacOS!
Использование расширенных или (собственных) функций платформы
Одна из проблем с SDK, подобным Flutter, заключается в том, что вы не сможете полностью использовать базовую платформу. Что, если я захочу добавить фоновую службу в будущем? Или хотите узнать состояние батареи? Возможно, мне позже понадобится доступ к устройству через USB?
Для начала, да, вы можете запустить фоновый код во Flutter. Об этом написана обстоятельная статья здесь. Это требует, чтобы вы подключились к собственной платформе, поэтому это нетривиально.
Во-вторых, да, вы можете прочитать состояние батареи. Для этого есть плагин состояния батареи. Но это противоречит тому, что я пытаюсь донести. Вы можете написать собственный код для конкретной платформы. В примере, приведенном в документации, они показывают вам, как считывать уровень заряда батареи устройства. Это, очевидно, распространяется на другие функции собственной платформы, которые вы, возможно, захотите использовать, которые не поддерживаются Flutter одного из многих плагинов.
Это показывает нам, что мы не ограничены Flutter. Всегда есть способ создать код для конкретной платформы и связать его с вашим приложением Flutter. Итак, чтобы ответить на последний вопрос: таким образом вы можете получить доступ к внешнему USB-устройству. И да, для этого есть плагины.
Альтернативы Flutter
Я не тестировал ни одну из альтернатив Flutter. Есть несколько альтернатив, которые могут быть очень интересными, поэтому я хочу по крайней мере передать их вам для дальнейшего исследования. Без суждения и в произвольном порядке:
React Native
React Native - это фреймворк, основанный на библиотеке React, очень популярной библиотеке JavaScript, используемой для разработки веб-интерфейса. Он разработан Facebook и существует дольше, чем Flutter. Он используется в ряде популярных приложений, таких как Facebook и Instagram.
Xamarin
От Microsoft у нас есть Xamarin. Он позволяет создавать кроссплатформенные приложения в .NET.
Qt
Qt - еще один кроссплатформенный UI-фреймворк, который существует уже давно. Он основан на C ++. и используется во многих встраиваемых устройствах, но также может использоваться для создания настольных и мобильных приложений. Qt имеет коммерческую лицензию и имеет открытый исходный код.
Реальные приложения Flutter
Flutter - это не просто игрушечный проект. Есть компании, использующие его для приложений производственного уровня. Я мог бы перечислить их здесь, но вам будет лучше, если загляните на страницу витрины на сайте Flutter!
Недостатки Flutter
До сих пор я был в восторге от Flutter. Вам может быть интересно, есть ли у Flutter какие-либо недостатки. Какие-нибудь негативы я смог найти? Конечно, есть. Чаще всего в таких новых проектах, как этот, вы сталкиваетесь с недостатками только тогда, когда действительно начинаете его использовать. Я только начал его использовать, так что, возможно, я найду больше по пути. В таком случае я обновлю этот пост. Если вы сами обнаружили какие-либо проблемы, оставьте, пожалуйста, комментарий к этому посту! Я хочу, чтобы вы все получили очень четкое и предельно честное представление о Flutter, которое включает в себя перечисление любых недостатков.
Нет собственного звука
Одна очень конкретная проблема, которую я обнаружил, была когда я начал создавать очень простое приложение, которое могло воспроизводить пару звуковых дорожек. Ничего особенного, просто список mp3, который вы можете щелкнуть, а затем послушать. Оказывается, нет собственного «Flutter way» или официального плагина для воспроизведения звука. Вы должны полагаться на внешние пакеты от третьих лиц. Но у всех этих плагинов есть свои проблемы, например, они работают только на одной платформе, не работают вообще, не обновляются, все еще имеют альфа / бета-качество и т. Д.
В этом отношении лучше всего использовать плагин video_player. Он разработан командой Flutter, может воспроизводить все виды аудиоформатов и работает как на Android, так и на iOS.
Следующая остановка - воспроизведение звука при закрытии приложения. Для этого требуется другой плагин, называемый audio_service. Вам нужно объединить это с одним из аудиоплееров, чтобы создать приложение, которое может воспроизводить музыку, даже когда вы закрываете приложение. Хорошая новость в том, что это работает, и плагин audio_service предлагает работающее демонстрационное приложение, чтобы показать вам это.
Я ожидал, что это будет родная часть Flutter. Если вы хотите быть кроссплатформенным, вам нужно предложить основы. На мой взгляд, воспроизведение звука - одна из них, как и воспроизведение видео с использованием камеры, GPS и микрофона. Было бы неплохо, если бы экосистема плагинов вокруг Flutter стала более зрелой, а основные плагины получили официальную поддержку.
Новый язык
Может быть, не такой уж большой недостаток, но вам придется изучить Дарт. Насколько это серьезный недостаток на самом деле? Если вы хотите изучить собственный Android, вам придется изучать Kotlin в наши дни. Если вы начнете изучать родной iOS, вам придется изучить Swift. Так что вы могли бы просто перейти на кроссплатформенность и вместо этого изучить Dart. Насколько я знаю, Dart - несложный язык, и существует множество концепций, очень похожих на Javascript, Java и т. Д.
Заключение
Мне нравится философия Flutter. В нем на удивление легко создать приложение. Его главным преимуществом является то, что он работает как на iOS, так и на Android! Знание, что поддержка веб-сайтов и настольных компьютеров находится в процессе создания, добавляет азарта! Работа с Flutter кажется логичной. У него есть хороший набор инструментов, который делает то, что ему нужно, не усложняя его. Документация исчерпывающая. Тот факт, что вы можете использовать Android Studio (которая по сути является бесплатной IntelliJ IDEA), тоже большой, БОЛЬШОЙ плюс.
Я заранее опасался, что мне не хватит инструмента визуального дизайна интерфейса. Но благодаря Flutters Stateful Hot Reload невероятно легко создать макет интерфейса и напрямую увидеть результаты на реальном устройстве или эмуляторе. Все, что вам нужно сделать, это сохранить свою работу или нажать кнопку горячей перезагрузки. Оказывается, вам не нужен инструмент для визуального дизайна, вы можете просто посмотреть на результат прямо сейчас!
Разработка для Интернета все еще находится на стадии бета-тестирования. Создание собственных настольных приложений для MacOS возможно, но, как и в случае с Интернетом, это все еще эксперимент. Сборка для Windows или Linux пока вообще невозможна. Если это то, что вас воодушевило во Flutter, очень плохо, но вам придется подождать еще немного.
Я действительно вижу у Flutter светлое будущее. Поскольку вы можете разрабатывать для нескольких платформ, Flutter сэкономит много времени на разработку и, следовательно, денег. Добавьте к этому тот факт, что Google, похоже, прилагает серьезные усилия для этого проекта. Когда Flutter повзрослел, не будет много причин НЕ использовать его для создания приложений.
дальнейшее чтение
Возможно, вас заинтересует другой кроссплатформенный способ разработки, называемый Progressive Web Apps:
Если вам понравилась эта статья и вы хотите получать уведомления, когда я публикую новые материалы, подпишитесь на мой список рассылки.
