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 буде в комплекті. У разі, якщо Чоловічий 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, alpha channel)
• 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-в17)
[✓] 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 connected to 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, який буде вкладений у Венеції.
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
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.