Что такое flutter и dart

Что такое 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 использует Dart, а не Kotlin или JavaScript

Привет! Меня зовут Артём Зайцев, я руководитель Flutter-отдела в Surf.

Я и многие мои коллеги вышли из мобильной разработки, где господствуют Kotlin и Swift. Это очень «сахарные» языки: лаконичные, красивые, с элегантными конструкциями. Переход от них к Dart вызывает боль: «Зачем мне этот похожий на JS язык с динамической типизацией, когда у меня был Kotlin?» — думал я при первой встрече.

При первом знакомстве Dart вызывает крайне противоречивые чувства у большинства мобильных разработчиков. Поэтому во время конференций и вебинаров мы постоянно слышим вопрос: «Почему Flutter использует именно Dart?». В статье я хочу дать ответ на этот вопрос.

Откуда взялся Dart

Однажды мой коллега сказал: «Откуда, блин, взялся этот Dart? Я реально ничего не слышал о нём до появления Flutter».

И многие тоже ничего не слышали. А ведь Dart существует уже давно: если верить Википедии, его разрабатывают с 2011 года. Изначально он планировался как замена JavaScript от Google. Dart имел динамическую типизацию, был очень похож на JS и… на нём никто не писал, кроме разве что Wrike — долгое время они были единственной компанией, использующей этот язык.

Основную известность Dart приобрёл благодаря кроссплатформенному фреймворку Flutter.

Какой язык мог бы быть у Flutter вместо Dart

Давайте немного поразмышляем: какой язык мог бы занять место Dart? В голову приходят несколько кандидатов, потому что они довольно популярны:

По моему субъективному мнению здесь можно выделить Kotlin — уж очень я его люблю. Но у него нет тех свойств, что смогли бы обеспечить:

Пройдёмся по этим пунктам подробнее.

Особенности Dart

Компиляция и выполнение кода на Dart

В целом методы компиляции можно разделить на три типа.

Компиляция в промежуточный код. Основана на концепции виртуальной машины (VM), которая представляет собой продвинутый интерпретатор, эмулирующий аппаратное обеспечение внутри программного обеспечения. Виртуальная машина упрощает портирование языка для новых аппаратных платформ. В таком случае язык ввода для VM зачастую представляет собой промежуточный код. Например, код на языке программирования (скажем, на Java) компилируется в промежуточный код (байт-код Java), а затем исполняется на VM (JVM).

Just-in-time (JIT) компиляция. JIT-компиляторы используют метод компиляции во время работы программы, «на лету». Они существенно ускоряют цикл разработки, но программа может притормаживать и выполняться медленнее. С JIT-компилятором она запускается медленнее, потому что перед выполнением кода ему нужно одновременно успеть проанализировать и скомпилировать его. Согласно исследованиям многие пользователи скорее всего откажутся пользоваться приложением, если на его запуск уходит больше пары секунд.

Ahead-of-time (AOT) компиляция. AOT-компиляторы замедляют цикл разработки — промежуток времени, через который можно выполнить программу после внесения в неё изменений, чтобы посмотреть результат изменений. Но в результате AOT-компиляции разработчик получает программу, которая работает более предсказуемо, без перерывов на анализ и компиляцию в рантайме. Ещё такие программы, запускаются быстрее, потому что они уже скомпилированы.

Казалось бы, причём здесь Dart? Его разработчики провели грандиозную работу над продвинутыми компиляторами и виртуальными машинами: движком V8 для JavaScript и Strongtalk для Smalltalk — для интерпретируемых языков, компилятором Hotspot для Java — для компилируемых языков. На основе полученного опыта они постарались сделать Dart необычайно гибким с точки зрения методов компиляции и выполнения.

В итоге Dart отлично подходит как для AOT-, так и для JIT-компиляции. Поддержка обоих методов компиляции обеспечивает значительное преимущество для Dart и в особенности для Flutter.

К JIT-компиляции обращаются при разработке и используют самый быстрый компилятор. Затем, когда приложение готово к выпуску, используют AOT-компиляцию. В результате, благодаря продвинутым инструментам и компиляторам, Dart берёт лучшее от двух миров: чрезвычайно быстрый цикл разработки, быстрое выполнение и запуск.

На этом гибкость Dart с точки зрения компиляции и выполнения не ограничивается. Так, Dart можно компилировать в JavaScript, если нужно выполнить программу в браузере. В итоге получается переиспользовать код для мобильного приложения в web и наоборот. Некоторым разработчикам удаётся переиспользовать целых 70% кода в мобильных и web-приложениях. Ещё Dart можно применять для разработки серверных приложений: для этого потребуется компилировать его в нативный код или в JavaScript и использовать с node.js.

И, наконец, для Dart существует отдельная виртуальная машина — DartVM — которая использует язык Dart в качестве промежуточного, по сути выступая в роли интерпретатора.Dart можно компилировать методами AOT или JIT, интерпретировать или компилировать в другие языки. Это даёт разработчику мега-фичу под названием Hot Reload. С ней можно практически мгновенно и без потери состояния подгрузить код в приложение в режиме отладки. Это невероятно ускоряет процесс разработки и позволяет избежать нудной пересборки приложения для просмотра каждого изменения. А в релизе программа получит высокую производительность благодаря AOT-компиляции.

Сбор мусора

Hot Reload — крутая фича, но её используют только разработчики в дебаг-режиме. В чём тогда выгода Dart для уже готового приложения? Ведь конечная цель — это удобство для пользователей.

Здесь вступает в игру другое полезное свойство языка — его сборщик мусора. Да, самим сборщиком сейчас мало кого удивишь. Но здесь есть свои особенности, благодаря которым Flutter обеспечивает быструю работу и 60 FPS. Это даёт разработчикам возможность создавать крутые мобильные приложения с быстрым и отзывчивым пользовательским интерфейсом и секси-анимациями. Отчасти именно поэтому Flutter стал кроссплатформой, которая смогла завоевать доверие разработчиков.

Давайте вспомним, как работает Flutter: всё в нём — виджеты. А виджеты — это по сути объекты. Их много, и они пересоздаются с огромной скоростью при каждом изменении кода. Поэтому здесь нужен не просто сборщик мусора, а суперсборщик мусора.

В Dart используется продвинутая схема сбора мусора и выделение памяти на основе поколений объектов. Она особенно быстро выделяет память для большого количества объектов с коротким жизненным циклом. Это идеально для реактивных пользовательских интерфейсов вроде Flutter, где неизменяемое дерево виджетов пересобирается для каждого кадра.Благодаря такому сборщику Flutter приятен для разработки пользовательских интерфейсов в декларативном стиле. Мы используем конструкторы, создавая объекты, и описываем с помощью них верстку. Причём сами виджеты достаточно легковесны (это тоже важно), и представляют собой лишь информацию для отрисовки. Самой отрисовкой занимаются уже другие слои.

Понятный синтаксис

Выше я говорил, что переход с Kotlin на Dart был болью. Да, это так. Но самое интересное в другом: хоть мне и не хватало «сахара», я мог писать на Dart в тот же день. Наш опыт показывает, что члены команды могут писать на Dart и работать с Flutter уже через пару недель, если они перешли из другого стека, и через три-четыре недели, если они совсем новички. Причём освоение синтаксиса занимало всего несколько дней.

Dart очень прост и максимально близок любому разработчику, знакомому с Java/C#/JavaScript. У него хорошая и читаемая документация, а также подробный тур по языку. Благодаря этому можно научиться писать на Flutter достаточно быстро.

Ну и конечно в синтаксис Dart привносит изменения сам Flutter. Несколько фич в языке появились именно благодаря фреймворку и коммуникации команд Dart и Flutter — все они работают внутри Google.

Dart — это Google

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

Открытый код

Dart — это опенсорс. Он популярен как внутри Google, так и за его пределами. В Google его используют для Ads, Flutter, Fuchsia и других проектов — сейчас он среди наиболее быстро развивающихся языков. За пределами компании в репозиторий Dart коммитит более 100 сторонних разработчиков.

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

Заключение

Перечисленные причины конечно же субъективны, но основаны на том, как развивается Flutter и Dart. Истину знают только в Google.

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

Вы в блоге Surf

Мы разрабатываем мобильные приложе- ния и помогаем в цифровизации крупного бизнеса.

Источник

Flutter I — Введение и установка

Flutter — новый инструмент от Google, позволяющий разработчикам писать кроссплатформенные приложения, которые можно запускать на различных системах (например, на Android или iOS) с общей кодовой базой.

Сам инструмент написан на C и C++. Предоставляет движок для 2D рендеринга, React-подобный FRP фреймворк и набор виджетов в стиле Material Design. На данный момент распространяется версия alpha:0.0.20, но несмотря на довольно «сырую» версию, уже можно создавать продвинутый интерфейс, работать с сетью и даже с файловой системой.

Подход Flutter отличается от инструментов, работающих через WebView и выполняющих HTML, CSS и Javascript (например Cordova), — он заключается в использовании Dart как единственного язык программирования. Dart довольно прост в изучении, а если вы ещё и знаете Java, то, считайте, 75% работы сделано, и на Dart можно перейти всего за пару дней.

Приложения компилируются в нативный код при сборке для релиза. Благодаря этому повышается производительность и уменьшается задержка при работе с интерфейсом. При сборке в режиме отладки (и выявлении возможных багов) Flutter также выполняет некоторые задачи, которые могут замедлять приложение. В таких случаях Flutter будет показывать надпись “Slow Mode” в правом верхнем углу экрана.

Почему именно Flutter?

Кроме того, что вы делаете приложение сразу под несколько систем (Android и iOS), код Flutter очень выразителен. То есть потребуется написать меньше кода чем если бы вы писали нативное приложение под одну платформу.

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

Ещё один плюс Flutter — он ориентирован на Material Design и предоставляет множество возможностей для работы с ним.

Google также использует Flutter для разработки пользовательского интерфейса своей новой системы Fuchsia.

Установка

Так как Flutter ещё в процессе разработки и постоянно обновляется, процесс установки со временем может поменяться. Актуальную инструкцию по установке можно найти на сайте Flutter.

Мы будем пользоваться версией 0.0.20+.alpha. (Прим.перев.: на данный момент установка возможна только под Mac и Linux (64-bit))

Шаг 1. Клонирование

Клонируйте ветку alpha из репозитория Flutter при помощи Git (SourceTree, Github Desktop…) и добавьте директорию bin в PATH.

Шаг 2. Проверка зависимостей

Запустите Flutter doctor, чтобы установить все необходимые зависимости.

Шаг 3. Установка платформ

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

В случае с Android необходимо установить Android SDK. Можете просто установить Android Studio, SDK будет в комплекте. В случае, если Android Studio установлена не в директорию по умолчанию, необходимо добавить переменную ANDROID_HOME в PATH, указав новое расположение, куда был установлен SDK.

В случае с iOS необходим xCode версии 7.2 или выше. Для запуска приложений на физическом устройстве необходим дополнительный инструмент. Его можно установить при помощи Homebrew.

Шаг 4. Конфигурация Atom

Рекомендуется использовать текстовый редактор Atom с установленными плагинами Flutter и Dart.

Установка плагина Flutter для Atom:

Откройте Packages > Flutter > Package Settings и выставьте в FLUTTER_ROOT путь, куда был склонирован Flutter SDK.

Затем Packages > Dart > Package Settings и выставьте переменную с расположением dart sdk, обычно это bin/cache/dart-sdk в директории Flutter.

Если у вас Mac, запустите Atom > Install Shell Commands чтобы установить shell-команды.

И напоследок запустите ещё раз Flutter doctor, чтобы удостовериться, что всё в порядке.

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

Первые шаги (Пишем Hello World!)

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

Запустите Packages → Flutter → create new Flutter Project. В директории lib есть файл main.dart, откройте его и сотрите весь код.

Выполнение кода Dart начинается с функции main, которая должна быть включена в файл main.dart.

Теперь импортируем библиотеку material, она предоставляет нам функцию для запуска приложений.

Эта функция называется runApp и принимает виджет (Widget) в качестве параметра. Виджет можно сравнить с представлением (View) в Android или iOS, чтобы иметь общее представление, но, само собой, между ними есть и отличия. То есть в Flutter весь интерфейс строится на использовании виджетов и весь код пишется на Dart. Например в Android надо было бы использовать XML для описания представлений.

Начнём с того, что выведем при помощи виджета Text произвольный текст.

Теперь запускаем приложение через Atom.

Как видно, текст появился за статус-баром. Так произошло потому, что туда установлены координаты Flutter (0,0).

Давайте добавим отступов, чтобы исправить это. Поскольку пользовательский интерфейс Flutter строится на виджетах, отступы тоже будут виджетом. Возможно, для людей с опытом разработки на Android и iOS (где отступы всего лишь свойства представления) это звучит дико. Нам же сейчас нужно добавить виджет Padding и указать виджет Text как дочерний элемент.

В примере выше создан виджет Padding, в котором отступы установлены на 24 при помощи объекта EdgeInsets, а в качестве дочернего элемента указан виджет Text. Запустите приложение и увидите, что текст теперь ниже.

Примечание: если вы знакомы с Java, то имейте в виду, const EdgeInsets.only(top: 24.0) всего лишь вызов конструктора EdgeInsets. Он возвращает экземпляр объекта, который будет константой времени компиляции. В этом разница между Java и Dart, больше информации о конструкторах в Dart можете найти здесь.

Воспользуемся виджетом Center, чтобы разместить текст в центре экрана.

Оба виджета, Padding и Center, предоставляют атрибут, называемый child, используемый для указания дочернего элемента. На самом деле это одна из особенностей, делающих Flutter таким мощным инструментом. Каждый виджет может иметь дочерние элементы, благодаря чему одни виджеты могут быть вложены в другие виджеты. Так, например, Text может быть вложен в Padding, который будет вложен в Center.

Заключение

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

Источник

Основы Flutter для начинающих (Часть I)

Вступление

Добрый день всем желающим познакомиться с Flutter!

У меня появилось горячее желание поделиться с вами моими знаниями, которые я накопил за несколько месяцев.

Возможно мой опыт совсем мал по сравнению с гуру программистами, я все же попытаюсь сделать что-нибудь полезное для вас.

Результатом нашей работы будет небольшое Flutter приложение, которое будет брать данные из JSONPlaceholder.

Ну что ж, приступим.

Затем устанавливаем редактор или IDE по инструкции Set up an editor

Я буду использовать Android Studio IDE от Google.

Для разработки на Android Studio нужно установить Flutter плагин (в инструкции Set up an editor, описано как это сделать).

Выбираем Flutter Application

Далее указываем название приложения (имя Flutter приложения должно иметь нижний регистр, отдельные слова могут разделяться нижним подчеркиванием).

Затем указываем package name (используется для того, чтобы идентифицировать наше приложение среди других в Google Play или Apple Store, его впоследствии можно будет изменить, более подробно об Android Application ID или об Apple App ID):

Очищаем main.dart файл от ненужного кода:

Затем создаем пакет (код должен быть всегда огранизован, дабы сделать его понятнее):

Называем его pages:

Затем создаем в пакете файл home_page.dart:

И реализуем нашу первую страницу:

Ну что ж, пора испытать наше приложение.

Не забудьте импортировать HomePage в main файл:

Важный момент: старайтесь использовать относительный путь, когда импортируете файлы своего проекта, вместо подобного:

По моему небольшому опыту могут возникнуть проблемы, когда вы захотите поменять имя приложения в pubspec.yaml файле (pubspec.yaml находиться в корневой директории проекта):

Если вы уже используете подобные импорты, это не критично, имя приложения всегда можно будет поменять отдельно для iOS или Android.

Переходим к запуску, выбираем устройство на котором будет выполняться приложение (в данном случае я использую реальное устройство, мой Honor 30i), и нажимаем Run:

Если вас раздражает надпись DEBUG в правом верхнем углу, то её можно убрать:

Также обратите внимание, когда вы запустите приложение, вы можете использовать hot reload:

Hot Reload позволяет буквально за 2-5 секунд внести изменения, когда ваше приложение выполняется.

Это довольно приятная опция, которая ускорит вашу разработку.

При каждом вызове Hot Reload происходит перезапуск build функции. (вся иерархия виджетов перестраивается)

Будьте внимательны: не во всех ситуциях Hot Reload срабатывает и изменения отражаются в приложении, поэтому в таких ситуациях нужно перезапускать приложение полностью.

Также есть довольно интересный факт: размер отладочного приложения на Flutter с одним экраном, которое мы только что создали:

Этого бояться не стоит, т.к. release Flutter приложения будет весить гораздо меньше.

Отладочное приложение содержит много дополнительной информации, а также к этому добавляется поддержка Hot Reload.

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

Ну что ж попробуем реализовать небольшую анимацию которая будет запускаться по кнопки:

Та дам! Выглядит здорово!

Заключение

Статья получилась достаточно информативной и по моему мнению полезной для новичков.

Надеюсь, что это статья принесла вам пользу и вы не закидаете меня тухлыми помидорами))

Источник