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 slow mode ribbon


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


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


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


Пример галереи 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.


$ git clone https://github.com/flutter/flutter.git -b alpha
$ export PATH=`pwd`/flutter/bin:$PATH

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

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


$ flutter doctor

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

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


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


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


$ brew tap flutter/flutter
$ brew install ideviceinstaller ios-deploy

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

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


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


  • Запустите Atom.
  • Packages > Settings View > Install Packages/Themes.
  • Напишите в поле Install Packages слово ‘flutter’, затем нажмите кнопку Packages.
  • Выберите Flutter и установите.

Откройте 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 ещё не отвечает всем необходимым требованиям.


[✓] Flutter (on Mac OS, channel alpha)
• Flutter at /Users/XensS/dev-dart/flutter-sdk
• Framework revision 9a0a0d9903 (5 days ago), engine revision f8d80c4617
[✓] Android toolchain — develop for Android devices (Android SDK 24.0.1)
• Android SDK at /Users/XensS/Library/Android/sdk
• Platform android-N, build-tools 24.0.1
• Java(TM) SE Runtime Environment (build 1.8.0_25-b17)
[✓] iOS toolchain — develop for iOS devices (Xcode 6.4)
• XCode at /Applications/Xcode.app/Contents/Developer
• Xcode 6.4, Build version 6E35b
x Flutter requires a minimum XCode version of 7.0.0.
Download the latest version or update via the Mac App Store.
x ideviceinstaller not available; this is used to discover connected iOS devices.
Install via ‘brew install ideviceinstaller’.
x ios-deploy not available; this is used to deploy to connected iOS devices.
Install via ‘brew install ios-deploy’.
[✓] Atom — a lightweight development environment for Flutter
• flutter plugin version 0.2.4
• dartlang plugin version 0.6.37

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


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


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


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


void main() { }

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


import ‘package:flutter/material.dart’;

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


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


import 'package:flutter/material.dart';

void main() {
  runApp(
    new Text("Hello World")
  );
}

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



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



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


import 'package:flutter/material.dart';

void main() {
  runApp(
    new Padding(
      padding: const EdgeInsets.only(top: 24.0),
        child: new Text("Hello, World")
    )
  );
}

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


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


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


import 'package:flutter/material.dart';

void main() {
  runApp(
    new Center(
        child: new Text("Hello, World")
    )
  );
}


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


import 'package:flutter/material.dart';

void main() {
  runApp(
    new Center(
        child: new Padding(
            padding: const EdgeInsets.only(left: 128.0),
              child: new Text("Hello, World")
          )
    )
  );
}


Заключение


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


Original: @develodroid
Поделиться публикацией

Комментарии 14

    +1
    Стоит упомянуть, что на данный момент разработка из-под windows невозможна.
      0
      А вот интересно, зачем это Гуглу? Исключительно для пиара Dart? Насколько я знаю (хотя не уверен в актуальности своих знаний), Dart исполняется в виртуальной машине, и они даже отдельный билд Chromium для дарта сделали. А вот как оно работает на мобилках? Что там внутри? На выходе получится очередной WebView?
        0
        Dart работает не через WebView, отзывчивость собранных приложений намного выше, как натив. Не знаю как код исполняется на мобилке, предполагаю, что компилируется в байткод.
        Вообще первое впечатление лучше чем от Xamarin и Phonegap.
          0
          Xamarin вот тоже в байткод компилится, все равно выше?
            0
            Не знаю как у Xamarin Forms, не смог настроить и запустить, хотя пытался пару дней, но та система, которая в Xamarin заставляет писать отдельный интерфейс под каждую платформу, работает так же. А вообще мой комментарий про отзывчивость относительно WebView, которое в Phonegap/Ionic.

            Я успел поработать со следующими кроссплатформенными решениями: Adobe AIR, Xamarin, Ionic, Dart Flutter. И удобство разработки Dart Flutter сравнимо с Adobe AIR, по некоторым параметрам превосходит Xamarin и Ionic.
            Минус Dart Flutter в том, что нельзя разрабатывать приложения из-под Windows, скорее всего нельзя тестировать на эмуляторе(у меня не вышло), и, наверняка, нет многих платформозависимых фич/либ.
            Если учесть минусы, которые существуют на данный момент только из-за молодости проекта, то инструмент выглядит очень перспективным.
              0
              Xamarin от Native отличается только языком. Скорость работы приложений такая же, в некоторых местах может быть выше из-за того, что objective-c динамический язык, а C# — статический.
          0
          Там без WebView, но у них свой набор контролов https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit?usp=sharing
          Про исполнение можно почитать в FAQ https://flutter.io/faq/#how-does-flutter-run-my-code-on-android
            0
            Спасибо, очень интересный материал.
            Выходит, что дарт с помощью какой-то магии обращается к C++ коду.
            А вы пробовали на нем что-то делать (не hello world)? Сложно ли становится если есть необходимость сделать что-то кастомное, что не сделать базовым контролом?
              0
              Пока ничего серьёзного не делал, только приглядываюсь. Кастомное сделать можно и это довольно просто, рекомендую посмотреть examples/layers/widgets в github-репозитории. Разработчики флаттера делают упор на то, что все слои (рендеринг, виджеты, материал дизайн) опциональны и расширяемы, их легко можно дополнить или заменить своим целиком.

              Стандартный набор виджетов довольно широк, их можно оценить в приложении Flutter Gallery, доступном на плей маркете (https://play.google.com/store/apps/details?id=io.flutter.gallery).

              Но не следует забывать, что фреймворк пока в альфе и там есть баги, хоть они и очень быстро фиксятся. Команда очень активная, разработка кипит, так что вскоре, думаю, мы получим отличнейшую библиотеку для быстрой удобной разработки.
          0
          Попытка сделать разметку как в ReactNative?
            0
            скорее всего решили сделать альтернативу ReactNative
              0
              Вообще со всех сторон странная ситуация получается: у нас есть железобетонно надежная Java для разработки приложений, которая использует NDK, но вот вам держите альтернативу на JS, которая все равно использует NDK
                0
                Не вижу ничего странного в этом. Это сильно ускоряет разработку. Приложения с одинаковым функционалом на Java писать много дольше, чем на ReactNative (из личного опыта). Уж насколько я был не искушен в мобильной разработке, у меня заняло на порядок меньше времени (на Java писал человек, знакомый с Java хорошо).
                Это стирает границы. Позволяет сделать разработчиков более универсальными без потери качества конечного приложения. Мне кажется, это замечательно.
                  –2
                  Одна из главных идей — это Dart на любом фронте: web (DartAngular или другое), iOS (Flutter), Android (Flutter). По заявлениям это позволяет шарить 70% кода (при этом самого сложного/потенциально ошибочного) и иметь единую команду разработки.

                  Соответственно, в разы ускоряется (и удешевляется) разработка и отладка.

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

              Самое читаемое