Flutter embedded browser client software что это
Что такое 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. Чтобы мозг размять, и чтобы было о чем похоливарить с мужиками на кухне. Дело пошло. Я начал смотреть, потом читать, потом писать. И вроде все получается, приложения запускаются, и то что объясняют — понятно, все просто. Но не без “но” — объясняют не все. А поскольку платформа, ЯП, подходы и даже предметная область для меня новые, то подобное вызывает раздражение, ведь у тебя “не запускается”, а ты даже не знаешь что гуглить: Dart/Flutter/Window/Screen/Route/Widget?
Перечитывать всю документацию Dart, Flutter и его виджетов конечно же не хотелось, ведь времени у меня не много, и мне лишь хотелось присмотреться к Flutter. Вот было бы здорово, если бы был небольшой гайд, в котором описано все нужное, но не больше, для понимая и написания не слишком сложных приложений на Flutter!
Про гайд
Большинство статей по этой теме хорошо написаны и не являются сложными. Проблема заключается в том, что большинство из них предполагают наличие знаний считающихся базовыми основами, которые, тем не менее, не упоминаются в других статьях описывающих основы. В данной серии статей я хочу исправить эту ситуацию. Начнем с нуля и, не оставляя ничего из упомянутого без внимания, запустим одно или несколько приложений. В процессе научимся пользоваться всеми основными компонентами, создавать уникальный интерфейс, работать с нативными модулями, и, конечно же, собирать свое приложение под обе платформы.
Писать я буду с перспективы веб-разработчика. Большинство из вас скорее всего знакомо со стэком веба, а аналогия со знакомой платформой лучше аналогии с постройкой домов или чего там еще, Animal, Dog, Foo, Bar…
Излагаться постараюсь кратко, чтобы не затягивать. А для самых любознательных буду оставлять полезные ссылки по обсуждаемым темам.
Про платформу
Flutter — молодая, но очень многообещающая платформа, уже привлекшая к себе внимание крупных компаний, которые запустили свои приложения. Интересна эта платформа своей простотой сравнимой с разработкой веб-приложений, и скоростью работы на равне с нативными приложениями. Высокая производительность приложения и скорость разработки достигается за счет нескольких техник:
О практической пользе этих факторов я очень рекомендую прочитать статью Android разработчика, который переписал свое приложение с Java на Dart и поделившегося своими впечатлениями. Сюда я лишь вынесу названное им количество файлов/строк кода до (написанное на Java) — 179/12176, и после (переписанное на Dart) — 31/1735. В документации можно найти подробное описание технических особенностей платформы. А вот ещё ссылка, если интересно посмотреть другие примеры работающих приложений.
Про Dart
Dart — язык программирования на котором нам предстоит писать приложения под Flutter. Он очень прост, и если у вас есть опыт работы с Java или JavaScript, вы быстро его освоите.
Я пытался написать обзорную статью о Dart, стремясь описать лишь необходимый минимум для изучения Flutter. Но в этом языке столько нюансов, что несмотря на несколько попыток написать такую статью, у меня так и не удалось сделать ее достаточно полной и в то же время короткой. С другой стороны, авторы A Tour of the Dart Language отлично справились с этой задачей.
Про подготовку
Эта тема, как и Dart, очень хорошо описана в официальном гайде. Я мог бы разве что скопировать ее сюда, но делать этого не стану.
Ничего не дожидаясь, идем на страницу гайда по установке, выбираем платформу и по шагам выполняем инструкцию для установки платформы на нашу систему. В своем редакторе обязательно подключаем плагины. В том же гайде есть инструкция по настройке VS Code и IntelliJ. Для вашего редактора тоже найдутся плагины для Dart и Flutter (обычно нужно ставить два). Запускаем приложение и проверяем его работоспособность.
Подсказка для пользователей OSX. Мне жалко места занимаемого нарисованными рамками телефона в эмуляторе iOS, поэтому я их отключил и переключился на iPhone 8 (он не такой “длинный”):
iPhone 8 & iPhone X с рамками
iPhone 8 & iPhone X без рамок
Про структуру
Зайдем в папку со сгенерированным приложением и разберемся что у нас там есть. Не со всем, но с нужным:
Про виджеты (Hello World здесь)
Во Flutter’е все построено на Widget’ах: тут и вьюшки, и стили с темами, и состояние в виджетах хранится. Есть два основных типа виджетов: со стейтом и без, но пока не об этом. Давайте с простого.
Удаляем все из main.dart. Вставляем следующий код внимательно вчитываясь в комментарии:
Уже запустили приложение? “Hello, World!” вывелся! Вроде бы… Да? Но что-то явно пошло не так.
Текст перекрыт системной информацией. В нашем распоряжении все пространство экрана, и мы вывели виджет в самом его начале, где в том числе выводится системная информация. Давайте попробуем куда-то подвинуть наш текст.
Композиции виджетов используются в Flutter для отрисовки UI, изменения внешнего вида, и даже для передачи данных. К примеру виджет Directionality(…) задает направление текста для всех дочерних виджетов:
Посмотрим на еще один очень важный виджет и заодно преобразим внешний вид нашего приложения:
Color(…) — цвет. В документации указаны разные способы его задания, но основным является просто передача числа в конструктор класса. В примере выше мы передаем конструктору число, записанное в шестнадцетиричной форме, что очень похоже на HEX, только вначале у нас добавилось еще два знака, означающих степень прозрачности цвета, где 0x00 — это абсолютно прозрачный, а 0xFF — это совсем не прозрачный.
TextStyle(…) — еще более интересный виджет, с его помощью можно задать цвет, размер, толщину, межстрочный интервал, добавить подчеркивание и прочее.
Приложение на Flutter написано, дело сделано! В доках можно почитать как его собрать под Android и iOS, там же есть ссылочки чтобы вы узнали как его отправить в нужный Store. Кому этого мало, я ниже накидал еще пару строк про Flutter, может больше…
Про Stateless виджеты
Как использовать виджеты — мы разобрались, давайте теперь разбираться как их создавать. Выше уже упоминалось, что есть виджеты у которых есть состояние, и у которых его нет. До сих пор мы использовали только виджеты без состояния. Это не значит, что у них его совсем нет, ведь виджеты это просто классы, и их свойства могут быть изменены. Просто после того, как виджет будет отрисован — изменения его состояния не приведет к обновлению этого виджета в UI. К примеру, если нам нужно поменять текст на экране, нужно будет сгенерировать другой виджет Text и указать новое содержимое которое мы хотим отобразить. Такие виджеты можно назвать константными, если вы понимаете о чем я. И они простые, поэтому с них и начнем.
Чтобы создать Stateless виджет, нужно:
Пример виджета с одним аргументом:
Про Stateless больше и добавить нечего…
Про Hot Reload
Обратите внимание, что при изменении содержимого нашего виджета приложение будет автоматически перерисовываться. После того, как мы вынесли виджет из функции main() Hot-reload стал нам помогать.
Важно также понимать, что из-за запущенного модуля для горячей замены приложение работает на порядок медленнее.
Про GestureDetector
В следующей секции мы будем разбираться с StatefulWidget (с виджетами которые изменяются при изменении их состояния). Для того чтобы это было интересно, нам нужно это состояние как-то изменять, согласны? Мы будем изменять состояние виджета реагируя на касания по экрану. Для этого мы будем использовать GestureDetector(…) — виджет, который ничего не отрисовывает, но следит за касаниями на экране смартфона и сообщает об этом вызывая переданные ему функции.
Создадим кнопку в центре экрана, при нажатии на которую в консоль будет выводиться сообщение:
Нажимаем на синюю кнопку и видим сообщение в консоли. Нажимаем еще раз и снова видим сообщение в консоли. Еще раз… Ладно, хватит залипать.
Про Stateful виджеты
StatefulWidget — простые, даже проще чем StatelessWidget ‘ы. Но есть нюанс: они не существуют сами по себе, для их работы нужен еще один класс который будет хранить состояние этого виджета. При этом, его визуальная часть (виджеты из которых он состоит) также становятся его состоянием.
Для начала, посмотрим на класс виджета:
Объект состояния совершенно не сложный. Более того, он практически идентичен StatelessWidget ‘ам написанным нами выше. Его основное отличие — родительский класс.
Обратите внимание, что имя класса начинается с нижнего подчеркивания. В Dart’е все имена начинающиеся с нижнего подчеркивания идентифицируют приватные значения. А состояние виджетов, в Flutter’е, принято оставлять приватными, хотя это не обязательно.
Какое замечательное приложение мы с вами сделали! Это отличный результат. Но перед тем как закончить эту часть курса, давайте рассмотрим еще пару интересных виджетов. Только в этот раз мы напишем больше кода, просто, чтобы было интереснее. Большая часть приложения должна быть вам знакома, а остальное вы уже должны были научиться понимать:
Про домашнее задание
Если вам хочется почитать что-нибудь еще на досуге, вот список интересных ссылок: