IT KPI Dart & Flutter

Розробка під Android на Flutter з VS Code на сервері

2022-08-19T07:08:19.039Z

Гнучкість VS Code дозволяє займатися розробкою прямо у браузері. Прикладами є vscode.dev, що працює виключно на фронтенді, та github.dev з послугою GitHub Codespaces, що використовує віддалений сервер як потужний бекенд для аналізу коду, тоді як фронтенд є лише відображенням результатів обчислень на сервері.

Безкоштовною альтернативою GitHub Codespaces є self-hosted проєкт code-server.

Давайте розберемося як завдяки code-server та SSH налаштувати середовище для Android розробки на Flutter так, щоб потужний віддалений сервер виконував усі обчислення, а локальна малопотужна машина відображала GUI та підключала фізичний Android пристрій.

Перевірено на Ubuntu 22.04 (сервер), Fedora 36 (локальна машина) та Flutter 3.0.5.

Встановлення програмного забезпечення та SDK на сервері

1. Встановіть `code-server` з офіційного репозиторію

Важливо: Після встановлення code-server просить налаштувати автозапуск серверу через systemd шляхом виконання команди systemctl. Не дотримуйтесь цих вказівок, інакше VS Code не знаходитиме пристрої через ADB. Способу примусити ADB працювати сумісно з systemd поки не знайшлось.

2. Встановіть Flutter SDK та оновіть `PATH`

Вашій системі також можуть знадобитися додаткові залежності для запуску Flutter SDK. Рекомендовано дотримуватися офіційного посібника. Надавайте перевагу описаним там ручним способам встановлення.

Після встановлення оновіть змінну PATH у ~/.bashrc, щоб включити папку /bin з Flutter SDK, наприклад, додайте такий рядок:

export PATH="$PATH:$HOME/path/to/flutter/bin"

після чого, застосуйте зміни:

source ~/.bashrc

3. Встановлення інструментарію Android

Припустимо, на вашому сервері немає графічного середовища, тому ми встановимо інструментарій Android без Android Studio (оскільки для роботи Studio потрібен DE).

Скачування cmdline-tools

Перейдіть на сайт Android Studio та завантажте пакет "Command line tools only". Розпакуйте архів командою unzip за бажаним шляхом. Краще зробити структуру папок наступною:

~/path/to/android-sdk/cmdline-tools

Таким чином, коли sdkmanager завантажуватиме свої пакети, нові папки будуть створені всередині папки android-sdk.

Станом на серпень 2022 року для sdkmanager в інструментах командного рядка Android потрібна спеціальна ієрархія папок, яку можна досягти, помістивши вміст папки cmdline-tools в папку latest під нею за допомогою цієї команди:

mv ./cmdline-tools/ ./latest && mkdir cmdline-tools && mv ./latest/ ./cmdline-tools/latest/

Додайте інструменти до свого PATH у .bashrc і вкажіть ANDROID_SDK_ROOT, додавши нові рядки:

export ANDROID_SDK_ROOT="$HOME/path/to/android-sdk"
export PATH="$PATH:$ANDROID_SDK_ROOT/cmdline-tools/latest/bin:$ANDROID_SDK_ROOT/platform-tools"

Не забудьте запустити source ~/.bashrc

Встановіть SDK

Flutter SDK вимагає встановлення двох пакетів: build-tools і platform-tools.

sdkmanager "build-tools;33.0.0" "platform-tools"

33.0.0 — це остання версія build-tools станом на серпень 2022 року. Дізнайтеся, яка остання версія build-tools доступна, запустивши:

sdkmanager --list | grep build-tools

Погодьтесь з ліцензіями

Запустіть sdkmanager --licenses і прийміть усі ліцензії, натискаючи клавішу y

Налаштування VS Code

Після встановлення code-server ви можете отримати доступ до редактора зі свого браузера.

Також рекомендується встановити його як PWA, щоб у вас було більше місця на екрані, більше можливостей для комбінацій клавіш і можливість запускати редактор із системної панелі запуску програм.

Встановіть розширення Flutter
Додайте ці опції до користувацьких налаштувань VS Code:

{
    "dart.flutterRunAdditionalArgs": [
        // Dart Developer Service port (debugger)
        "--dds-port=10388",
        // Dart VM Service instance port (device)
        "--host-vmservice-port=10389"
    ],
    "dart.devToolsPort": 9100,
    "dart.devToolsLocation": "external"
}

За замовчуванням Dart вибирає випадкові порти для підключення між налагоджувачем і пристроєм. Встановлюючи ці параметри, ми робимо порти статичними, тому ми можемо їх легко переадресовувати між пристроями.

Можливо, ви захочете налаштувати dart.devToolsLocation: external через помилку code-server, яка не дозволяє завантажувати iframe Dart DevTools. Цей параметр запускає DevTools у вашому браузері за умовчанням. Причиною проблеми може бути цей issue.

Переадресація портів використовуючи SSH на локальній машині

Для налагодження програми Android за допомогою Flutter нам доведеться перенаправити 4 порти. У таблиці наведено номери портів відповідно до параметрів VS Code вище. Ви можете використовувати власні номери портів, але тоді вам доведеться відповідно змінити конфігурації.

Команди

SSH можна використовувати для перенаправлення портів.

Щоб перенаправити порт з локального хоста на віддалений хост, запустіть на локальному комп’ютері:

ssh -R XXXX:localhost:XXXX user@host

Щоб перенаправити порт із віддаленого хоста на локальний, запустіть на локальному комп’ютері:

ssh -L XXXX:localhost:XXXX user@host

Ви можете з’єднати параметри команди ssh, наприклад:

ssh -R 5037:localhost:5037 -L 10388:localhost:10388 -R 10389:localhost:10389 -L 9100:localhost:9100 user@host

Перенаправлення портів буде активним, доки ви не закриєте з’єднання SSH.

Переконайтеся, що ваш брандмауер налаштовано на переадресацію портів.

Скрипт для автоматизації

Сценарій, який автоматизує процес:

Вимикає локальний ADB і перезапускає його, щоб звільнити використані порти
Налаштовує переадресацію портів для вказаних портів на віддалений хост. Сценарій передбачає використання ключів для автентифікації SSH.
Знищує всі запущені екземпляри code-server, node і adb. Якщо вам це не підходить, відредагуйте скрипт.
Запускає ADB і запускає code-server.

Призначений для запуску на локальній машині.

#!/bin/bash

# Remote machine
CE_MACHINE="user@host"

# Local machine, no need to change
CE_LOCALHOST="localhost"

# Default port for ADB daemon is 5037
CE_ADB_PORT="5037"

# You might need to specify exact path to adb on your
# remote system since .bashrc is not sourced for
# non-interactive sessions (see https://stackoverflow.com/a/6212684)
CE_ADB_EXECUTABLE="~/dev/tools/android-sdk/platform-tools/adb"

# "Dart Developer Service port
CE_DDS_PORT="10388"

# Dart VM Service instance port
CE_HOST_VMSERVICE_PORT="10389"

# Flutter DevTools port
CE_DEVTOOLS_PORT="9100"

#### VSCode Settings ####
# "dart.flutterRunAdditionalArgs": [
# "--dds-port=10388",
# "--host-vmservice-port=10389",
# ],
# "dart.devToolsPort": 9100,
# "dart.devToolsLocation": "external",
#### VSCode Settings ####


# Reset ADB on local machine
# so it releases used ports
killall adb
adb devices

# When `adb devices` is called, ADB checks the daemon port.
# If it detects there's no response on the port, it
# launches a new daemon.
#
# After killing ADB and forwarding the ADB port to local machine,
# a newly launched ADB client will bind to the existing connection
# (which is our physical device) instead of launching a daemon on
# the remote machine.
#
# Restart code-server
# ADB doesn't detect devices if code-server is managed by systemctl
# WARNING, killing all Node processes here. Customize if needed.
#
# 1. ADB forwarding Local -> Remote
# 2. Dart Dev Server forwarding Remote -> Local
# 3. Dart on-device debugger client forwarding Local -> Remote
# 4. Flutter DevTools Remote -> Local forwarding
ssh -R $CE_ADB_PORT:$CE_LOCALHOST:$CE_ADB_PORT \
-L $CE_DDS_PORT:$CE_LOCALHOST:$CE_DDS_PORT \
-R $CE_HOST_VMSERVICE_PORT:$CE_LOCALHOST:$CE_HOST_VMSERVICE_PORT \
-L $CE_DEVTOOLS_PORT:$CE_LOCALHOST:$CE_DEVTOOLS_PORT \
$CE_MACHINE "killall code-server; killall node; killall adb; $CE_ADB_EXECUTABLE devices; code-server"

Completer: створюємо власні Future

2021-05-05T13:21:36.952Z

Future є базовим поняттям для Dart. Детальний розбір асинхронного програмування ми вже робили у перекладі англомовної статті з dart.dev.

Та іноді, під час написання коду, інтерфейсу Future починає не вистачати. Таке трапляється частіше за все під час написання власних бібліотек та контролерів.

Також ми переклали цю статтю англійською

Як це, не вистачає?

Розгляньмо наявний інтерфейс класу Future:

Future(FutureOr<T> computation())
/* Виклик функції computation() асинхронно,
використовуючи Timer.run */
Future.delayed(Duration duration, [FutureOr<T> computation()])/* Аналогічно Future(), але виконання відбувається
після затримки */
Future.error(Object error, [StackTrace? stackTrace])// Створення Future, що завершується помилкою
Future.microtask(FutureOr<T> computation())
// Аналогічно Future(), але використовується scheduleMicrotask
Future.sync(FutureOr<T> computation())
// Аналогічно Future(), але функція викликається негайно (синхронно)
Future.value([FutureOr<T>? value])
// Створення Future з уже вказаним результатом

Як бачимо, наданий інтерфейс дає лише можливість продукувати Future як результати інших обчислень, але не дає ніяких інструментів, щоб повернути індикацію обчислень, що ще тривають.

Наданий інтерфейс корисно використовувати хіба що у синхронному коді, якщо, наприклад, ми імплементуємо який-небудь інтерфейс, що вимагає повернення Future у методі, у той час як наша реалізація є синхронною:

import 'dart:io';

abstract class FileReader {
  Future<String> readFile(String name);
}

class SyncFileReader implements FileReader {
  @override
  Future<String> readFile(String name) {
    return Future(() {
      return File(name).readAsStringSync();
    });
  }
}

Тепер уявімо ситуацію, що ми створюємо контролер для бази даних. Для того, щоб почати працювати з базою даних, до неї треба підключитися. До того ж, необхідно зберегти підключення до БД у контролері — адже створення багатьох паралельних підключень є неефективним.

Спробуймо написати такий код з тими знаннями, що у нас є:

import 'package:sqflite/sqflite.dart';

class DbConnection {
  Database? _database;

  Future<Database> use() async {
    _database ??= await openDatabase(
      'my.db',
      onCreate: (db, version) async {
        ...
      },
      version: 1,
    );

    return _database!;
  }
}

Даний клас має метод use(), який:

Перевіряє наявність вже активного підключення
Якщо підключення немає, виконує його й повертає результат
Якщо підключення вже є, повертає його

Здавалось би, все гаразд, але у даній реалізації можна знайти недолік — якщо кілька незалежних частин коду спробують отримати доступ до бази даних до того, як було ініційовано перше підключення, на кожний запит буде відкрите окреме підключення:

Демонстрація того, що відбувається у даному прикладі

Ось ще один наглядний приклад цієї проблеми:

Розглянемо його детальніше:

Клас NumberHolder має один раз отримати значення з асинхронної функції asyncNumberGet(), після чого зберегти його та щоразу повертати збережене значення
asyncNumberGet() після кожного виклику збільшує своє значення
У функції main() ми:

Паралельно запускаємо два запити на отримання значення числа
Окремо запускаємо один запит на отримання числа

За логікою:

Ми створюємо екземпляр NumberHolder
Виклик 1: Клас NumberHolder має отримати значення числа з функцї asyncNumberGet() один раз та записати його у змінну _result. Результат: 1
Виклик 2: змінна _result вже наявна, тому використовуємо її. Результат: 1
Виклик 3: змінна _result вже наявна, тому використовуємо її. Результат: 1

Тобто, очікуваним виводом даної програми мають бути такі рядки:

[1, 1]
1

Але якщо ми запустимо приклад, то побачимо інший результат:

[1, 2]
2

Даний результат виникає через проблему, що називається Race Condition, або конкуренція: коли від порядку виконання коду залежить результат.

У прикладі з базою даних стався б витік ресурсів через непотрібне та незакрите з'єднання з БД.

Давайте розглянемо, чому так стається. Переглянувши реалізацію Future.wait, робимо висновок, що всередині Future.wait([task1(), task2()]) виклик відбувається так:

task1();
task2();

Тобто обидва асинхронні завдання виконуються конкурентно, не очікуючи один на одного.

Конкурентність у контексті Dart

JavaScript-розробники вже мають бути знайомі з поняттям черги подій (event loop).

Коротко: хоча й Dart підтримує справжню багатопоточність (isolates), увесь звичайний (синхронний та асинхронний) код виконується в одному потоці. Це означає, що усі команди можуть виконуватись виключно одна за одною.

Але одночасно у логіки роботи черги є одна особливість: як тільки інтерпретатор потрапляє на асинхронну команду, ця команда переміщується у кінець черги, очікуючи на виконання синхронного коду, що розміщується після неї.

Логіка роботи Future

У нашому прикладі замість task1 ми викликаємо number.use. Перегляньмо цю функцію.

Future<int> use() async {
    _result ??= await asyncNumberGet();
    return _result!;
}

Перепишемо дану функцію простіше та без використання async, щоб зрозуміти логіку роботи:

Future<int> use() {
  if (_result == null) {
    return asyncNumberGet() # Future
    .then((number) {
      _result = number;
      return number;
    });
  }
  return Future.value(_result);
}

Застосуємо наші знання про конкурентність та проілюструємо порядок виконання очима інтерпретатора Dart:

Тоді викличмо нашу функцію двічі підряд, як це робить Future.wait й відсортуймо команди, як це робить Dart:

Так як асинхронний код було переміщено, виклик asyncNumberGet() поки що не стався, а отже й значення _result не було встановлено. Через це друга перевірка _result == null є істинною, через що дану ділянку коду не буде пропущено, а функцію asyncNumberGet() буде викликано двічі:

Врешті-решт, асинхронна функція виконується синхронно в кінці черги.

У перенесеному коді записуємо усі конструкції Future().then() аналогічною конструкцією з await для спрощення сприйняття:

У результаті маємо два виклики asyncNumberGet() через те, що перевірка умови під час другого виклику відбувається раніше, ніж завершення першого виклику.

Completer на допомогу

Але ж що робити, якщо хочеться створити безшовний доступ до кешованого результату?

Completer це вбудований у Dart контролер Future. Він здатний продукувати Future будь-якого виду та завершувати (resolve/complete) їх у будь-який час.

Completer дуже простий у використанні. Екземляр даного класу має такі методи:

complete([FutureOr<T>? value]) → void
// Завершує Future наданим значенням
completeError(Object error, [StackTrace? stackTrace]) → void
// Завершує Future з помилкою

Та такі властивості:

future → Future<T>
// Екземляр Future, який ми контролюємо
isCompleted → bool
// Повертає істину, якщо Future вже завершено

Отож, перепишемо наш приклад з використанням Completer:

Отримуємо результат, що підтверджує правильність.

CALLED
[1, 1]
1

Висновки

Завдяки Completer ми змогли зробити контрольований екземпляр Future, який можна повертати, поки тривають конкурентні обчислення, у результаті чого ми змогли уникнути помилки Race Condition.

Запрошуємо усіх зацікавлених у Dart і Flutter приєднуватись до нашого чату, щоб отримувати більше цікавих матеріалів та новин про ці технології.

Асинхронне програмування у Dart: Future, async, await

2021-04-30T11:35:45.112Z

Асинхронність є однією з фундаментальних умов для роботи з Dart. Навіть якщо дане поняття вам відоме з JavaScript, асинхронність у Dart має несуттєві відмінності, тож радимо прочитати цю статтю кожному.

Дана стаття є перекладом англомовного туторіалу з dart.dev.

Ця кодова лабораторія навчить вас писати асинхронний код за допомогою об'єкту Future та ключових слів async, await.

Щоб отримати максимальну віддачу від цієї кодової лабораторії, вам слід мати:

Знання базового синтаксису Dart.
Деякий досвід написання асинхронного коду іншою мовою.

Приблизний час для проходження цієї кодової лабораторії: 40-60 хвилин.

Чому асинхронний код важливий

Асинхронні операції дозволяють вашій програмі продовжувати працювати, одночасно чекаючи закінчення іншої операції. Ось декілька поширених асинхронних операцій:

Отримання даних через мережу.
Запис у базу даних.
Зчитування даних з файлу.

Для виконання асинхронних операцій в Dart ви можете використовувати клас Future та ключові слова async і await.

Приклад: Неправильне використання асинхронної функції

Наступний приклад показує неправильний спосіб використання асинхронної функції ( fetchUserOrder()). Пізніше ви виправите приклад за допомогою async та await. Перш ніж запускати цей приклад, спробуйте виявити проблему — який, на вашу думку, буде результат?

Ось чому в прикладі не вдається вивести значення, яке fetchUserOrder() повертає з запізненням у 2 секунди:

fetchUserOrder() — це асинхронна функція, яка після затримки надає рядок, що описує замовлення користувача: “Large Latte”.
Щоб отримати замовлення користувача, createOrderMessage() слід викликати fetchUserOrder() і зачекати, поки замовлення буде повернуто. Через те, що createOrderMessage() виконує виведення до того, як fetchUserOrder() завершує роботу, createOrderMessage()не може отримати текстове значення, яке fetchUserOrder() ще не повернуло.
Натомість createOrderMessage() отримує об'єкт, що позначає результат, який ще очікується: незавершену Future. Докладніше про Future ви дізнаєтесь у наступному розділі.
Оскільки createOrderMessage() не вдається отримати значення, що описує замовлення користувача, приклад виводить не “Large Latte”, а “Ваше замовлення: Instance of '_Future<String>'”.

У наступних розділах ви дізнаєтеся про Future та про роботу з ними (за допомогою async та await), що дасть вам змогу написати код, який зможе коректно вивести "Large Latte" у консолі, який повертає функція fetchUserOrder().

Ключові терміни:

Синхронна операція: синхронна операція блокує виконання інших операцій до свого завершення.
Синхронна функція: синхронна функція виконує лише синхронні операції.
Асинхронна операція: після запуску асинхронна операція дозволяє паралельно виконувати інші операції впродовж своєї роботи.
Асинхронна функція: асинхронна функція виконує принаймні одну асинхронну операцію, а також може виконувати синхронні операції.

Що таке Future?

Future - це екземпляр класу Future. Future це представлення результату роботи асинхронної операції, що може мати два стани: незавершений або завершений.

Примітка: Незавершений (uncompleted) - термін у мові Dart, що стосується стану Future до того, як повертається значення.

Незавершений

Коли ви викликаєте асинхронну функцію, вона повертає незавершений Future. Цей Future чекає на успішне завершення асинхронної операції функції або на видачу помилки.

Завершений

Якщо асинхронна операція вдається, Future завершується (completes) значенням. В іншому випадку Future завершується помилкою.

Завершення зі значенням

Future<T> завершується значенням типу T. Наприклад, Future з типом Future<String> створює значення String (рядка). Якщо Future не повертає будь-якого значення, тоді це тип Future<void>.

Завершення з помилкою

Якщо асинхронна операція, виконана функцією, не вдається з будь-якої причини, Future завершується помилкою.

Приклад: вводимо Future у код

У цьому прикладі fetchUserOrder() повертає Future, яке завершується вже після виводу в консолі. Оскільки функція не повертає яке-небудь корисне значення, fetchUserOrder()має тип Future<void>. Перш ніж запускати приклад, спробуйте спрогнозувати, що буде виведено першим: “Large Latte” або “Отримання замовлення користувача…”.

У попередньому прикладі, незважаючи на те, що fetchUserOrder() виконується до виклику print() на рядку 8, консоль відображає дані з рядка 8 (“Fetching user order…”) перед даними з fetchUserOrder()(“Large Latte”). Це трапляється тому, що fetchUserOrder() затримується перед тим, як надрукувати “Large Latte”.

Приклад: Завершення з помилкою

Запустіть цей приклад, щоб побачити, як Future завершується помилкою. Трохи пізніше ви дізнаєтесь, як правильно працювати з помилками у Future.

У цьому прикладі fetchUserOrder() завершується помилкою, яка вказує на те, що ідентифікатор користувача недійсний.

Ви дізналися про Future та про те, як вони повертають значення, але як використати результати асинхронних операцій? У наступному розділі ви дізнаєтесь, як отримати результати за допомогою ключових слів async та await.

Короткий огляд

Об'єкт типу Future<T> продукує значення типу T
Якщо Future не продукує корисне значення, це тип Future<void>
Future має два стани: завершений та незавершений
Коли ви викликаєте функцію, що повертає Future, дана асинхронна задача стає у чергу та повертає значення через якийсь час, з затримкою
Коли виконання Future завершується, результатом є значення заданого типу або помилка

Ключові терміни

Future: клас Future у Dart
a future (з малої літери): екземпляр класу Future, що позначає асинхронну задачу

Працюємо з Future: async та await

Ключові слова async та await створені для декларування асинхронних функцій та для використання їх результатів. Запам’ятайте ці дві основні рекомендації при використанні async та await:

Щоб створити асинхронну функцію, додайте async перед тілом функції
Ключове слово await можна використовувати тільки в async функціях

Ось як перетворити синхронну функцію в асинхронну:

Спочатку додайте ключове слово async перед тілом функції:

void main() async { ··· }

Якщо функція має оголошений тип, який вона повертає, змініть тип на Future<T>, де T є саме тим типом, що повертає функція. Якщо функція не повертає явного значення, тоді слід вказати тип Future<void>:

Future<void> main() async { ··· }

Тепер, коли у вас є async-функція, ви можете використовувати ключове слово await, щоб дочекатися результату Future:

print(await createOrderMessage());

Як показують наступні два приклади, ключові слова async та await продукують асинхронний код, який дуже схожий на синхронний код. Єдині відмінності виділено в асинхронному прикладі, який знаходиться праворуч від синхронного прикладу:

Асинхронний приклад має три відмінності:

Тип, що повертає функція createOrderMessage() змінено з String на Future<String>.
Ключове слово async додано перед тілом функції createOrderMessage() і main().
Ключове слово await додано перед викликом асинхронних функцій fetchUserOrder() і createOrderMessage().

Ключові терміни

async: Використовуйте ключове слово async, щоб зробити функцію асинхронною.
async function: async-функція - це функція, позначена ключовим словом async.
await: Ви можете використовувати ключове слово await, щоб отримати завершений результат асинхронного виразу. Ключове слово awaitпрацює тільки в межах async-функцій.

Порядок виконання з async та await

Примітка: До версії Dart 2.0, async-функція негайно повертала значення, не виконуючи код у тілі функції

Приклад: Виконання всередині async-функції

Запустіть цей приклад, щоб побачити, як працює виконання у тілі async-функції. Як ви думаєте, яким буде результат?

Після запуску коду в попередньому прикладі спробуйте поміняти рядки 2 і 3 місцями:

var order = await fetchUserOrder();
print('Awaiting user order...');

Зверніть увагу як змінюється порядок виводу: тепер print('Awaiting user order') з'являється після першого використання ключового слова await в printOrderMessage().

Вправа: Попрактикуйтеся з async й await

Наступна вправа — це непрацюючий юніт-тест, який містить частково готові фрагменти коду. Ваше завдання — виконати вправу, написати такий код, щоб тест проходив успішно. Вам не потрібно реалізовувати функцію main().

Щоб імітувати асинхронні операції, використовуйте надані вам функції:

Future<String> fetchRole() {...} // Отримує короткий опис ролі користувача
Future<int> fetchLoginAmount() {...}
// Отримує кількість входів користувача в систему.

Частина 1: reportUserRole()

Доробіть функцію reportUserRole() так, щоб вона робила наступне:

Функція має повертати Future, яке завершується наступним рядком: "User role: <user role>"

Примітка: Ви повинні використовувати фактичне значення, яке повертає fetchRole(); копіювання та вставка значення з прикладу не дасть вам пройти тест
Приклад поверненого значення: "User role: tester"

Функція має отримувати роль користувача, викликаючи надану функцію fetchRole().

Частина 2: reportLogins()

Реалізуйте async-функцію reportLogins() так, щоб вона робила наступне:

Функція має повертати рядок "Total number of logins: <# of logins>".

Примітка: Ви повинні використовувати фактичне значення, яке повертає fetchLoginAmount(); копіювання та вставка значення з прикладу не дасть вам пройти тест
Приклад поверненого значення з reportLogins():"Total number of logins: 57"

Функція має отримувати кількість входів, викликаючи надану функцію fetchLoginAmount().

Зауважте: Якщо ваш код проходить усі тести, ви можете ігнорувати попередження з міткою info

Обробка помилок

Для обробки помилок у async-функції, використовуйте конструкцію try-catch:

try {
  var order = await fetchUserOrder();
  print('Awaiting user order...');
} catch (err) {
  print('Caught error: $err');
}

У межах async-функції ви можете використовувати try-catch конструкції так само, як і в синхронному коді.

Приклад: async та await з використанням try-catch

Запустіть даний приклад, щоб побачити, як обробляти помилку в асинхронній функції. Як ви думаєте, яким буде результат?

Вправа: Практикуємося обробляти помилки

Наступна вправа надає практичні навички в асинхронному коді, використовуючи підхід, описаний у попередньому розділі. Для імітації асинхронних операцій вам надано цю функцію:

Future<String> fetchNewUsername() {...} /* Повертає нове ім’я користувача, 
яке можна використовувати для заміни старого. */

Використовуйте asyncі await для реалізації асинхронної функції changeUsername(), що має робити наступне:

Функція має викликати надану асинхронну функцію fetchNewUsername() і повертати її результат.

Приклад поверненого значення з changeUsername(): "jane_smith_92"

Ловить (catch) будь-яку помилку, що виникає, і повертає значення рядка помилки.

Ви можете використовувати метод toString() як для винятків (Exception), так і для помилок (Error)

Вправа: Складемо все докупи

Настав час потренуватися в тому, що ви дізналися, в одній заключній вправі. Для імітації асинхронних операцій ця вправа надає асинхронні функції fetchUsername()та logoutUser():

Future<String> fetchUsername() {...}// Повертає ім'я поточного користувача
Future<String> logoutUser() {...}
/* Виконує вихід із поточного користувача
та повертає ім’я користувача, що вийшов з системи */

Напишіть наступне:

Частина 1: addHello()

Напишіть функцію, addHello()яка приймає один аргумент String.
Функція addHello() повертає свій аргумент типу String, перед яким стоїть "Hello".
Приклад: addHello('Jon')повертає 'Hello Jon'.

Частина 2: greetUser()

Напишіть функцію, greetUser(), що не приймає аргументів.
Щоб отримати ім’я користувача, greetUser()викликає надану асинхронну функцію fetchUsername().
greetUser() створює привітання для користувача, викликаючи addHello(), передаючи йому ім’я користувача та повертаючи результат.
Приклад: Якщо fetchUsername() повертає 'Jenny', то greetUser()повертає 'Hello Jenny'.

Частина 3: sayGoodbye()

Напишіть функцію sayGoodbye(), яка робить наступне:

Не приймає аргументів.
Ловить будь-які помилки.
Викликає надану асинхронну функцію logoutUser().

Якщо logoutUser() не вдається, sayGoodbye()повертає довільний рядок String.
У разі успіху logoutUser(), sayGoodbye()повертає рядок '<result> Thanks, see you next time', де <result> — значення рядка, яке повертається за допомогою виклику logoutUser().

Що далі?

Вітаємо, ви закінчили роботу з кодовою лабораторією! Якщо ви хочете дізнатись більше, ось кілька підказок, куди йти далі:

Експериментуйте у DartPad.
Спробуйте іншу кодову лабораторію [англ.].
Дізнайтеся більше про Future та асинхронність:

Ознайомлення з Stream [англ.]: Дізнайтеся, як працювати з послідовністю асинхронних подій.
Відео про Dart від Google [англ.]: перегляньте одне або кілька відео про асинхронне кодування. Або, якщо хочете, прочитайте статті, основані на цих відео. (Почніть із ізоляцій та циклів подій [англ.]).

Завантажте Dart SDK.

Переклад виконано спеціально для @dart_itkpi.

Приборкуємо Icon: як він працює зсередини?

2021-04-30T09:42:46.996Z

У даній статті ми розглянемо віджет Icon, а також розкажемо про лайфхак, завдяки якому значення для піктограми можна задавати динамічно: наприклад, передавати з сервера.

Також ми переклали цю статтю англійською

Віджет Icon

У Material Framework, що входить до Flutter, є віджет Icon. Даний віджет використовується, щоб відобразити яку-небудь піктограму. Його відмінність від віджету Image у тому, що даний віджет підпорядковується встановленій темі та може бути інтегрований з віджетом, у якому він використовується (наприклад, піктограма відповідно змінює свій колір у віджеті IconButton).

Розглянемо, які параметри приймає даний віджет:

Приклад роботи віджету Icon

Наведений приклад виводить піктограму з колекції Material Icons. Розберемо параметри:

Перший позиційний параметр: значення типу IconData. Його ми розглянемо нижче
Непозиційний параметр color: значення типу Color щоб, відповідно, перефарбувати піктограму
Непозиційний параметр size: дійсне число, розмір піктограми у пікселях

Віджет ImageIcon

Даний віджет дозволяє використовувати растрові зображення для простого створення власних піктограм:

Приклад роботи віджету ImageIcon

Синтаксис аналогічний до Icon, окрім того, що у перший позиційний параметр передається об'єкт типу ImageProvider. ImageProvider це об'єкт у Flutter, що відповідає за отримання зображення іншими віджетами. Наприклад, віджетом Image.

Скоріш за все, ви ніколи не працюватимете з ImageProvider напряму, натомість, ви будете використовувати одну з готових реалізацій:

AssetImage — отримання зображення з асетів Flutter (див. документацію щодо того, як додати зображення до списку асетів)
NetworkImage — завантаження зображення по HTTP
FileImage — отримання зображення з об'єкту File
MemoryImage — отримання зображення з масиву байтів у оперативній пам'яті
ExactAssetImage — аналог AssetImage, див. документацію щодо особливостей

У даному прикладі використовується зображення-асет.

Слід зазначити, що кольорові піктограми будуть приведені до монохромного вигляду за каналом прозорості:

Зміна кольору у ImageIcon

Колекція Icons та CupertinoIcons

Дані класи містять у собі колекції піктограм для Material Design та iOS відповідно. Слід зазначити, що між собою дані колекції не сумісні: якщо ви розробляєте такий застосунок, що використовує Material Icons на Android, а Cupertino — на iOS, вам доведеться власноруч вказувати відповідну піктограму, або, наприклад, скористатись бібліотекою flutter_platform_widgets, яка пропонує обмежений список піктограм, що відповідають одна одній.

Список усіх піктограм для Material Design знаходиться на сторінці Material Icons. Кожна піктограма представлена у чотирьох стилях: звичайний, Rounded, Sharp та Outline. Щоб звернутися до необхідного стилю, слід додати до назви піктограми відповідне закінчення:

Використання різних стилів для піктограм

Список усіх наявних Cupertino Icons наведено на сторінці бібліотеки.

Піктограми та теми

Усі компоненти Material Framework підпорядковуються заданій темі. Тема задається у віджеті MaterialApp, завдяки об'єкту ThemeData та властивості theme.

Ви можете глобально змінити стиль за замовчуванням для усіх піктограм у вашому застосунку, використовуючи властивість iconTheme у ThemeData:

Приклад використання теми для задання стилю піктограм

Але крім цього, тему можна перезаписати безпосередньо у дереві віджетів, використовуючи віджет IconTheme (варто помітити, при цьому на перезаписану піктограму властивості теми діяти припиняють):

Приклад локального перезапису теми піктограми

Як працюють векторні піктограми

У Flutter для роботи векторних піктограм використовуються так звані icon fonts, тобто шрифти, що використовують символи для виводу піктограм. Насправді, коли ви використовуєте віджет Icon, Flutter створює віджет Text з спеціально заданим шрифтом. Ми переконаємося у цьому далі.

Тип IconData

IconData виступає контейнером для даних піктограми, що має бути виведено. Саме об'єкти цього типу зберігаються у колекції Icons: наприклад, Icons.people є об'єктом IconData. Давайте розглянемо конструктор цього об'єкта:

Конструктор IconData — саме так зберігаються піктограми у колекції Icons

Першим позиційним параметром є ціле число, що позначає номер символу, який буде використано для поточної піктограми.

Параметр fontFamily містить назву шрифта, що використовується для виводу піктограми.

Таким чином, вивід піктограми зводиться до віджету Text (\ue8f5 - позначення символу під номером e8f5):

Аналог віджету Icon, реалізований на Text

Крім того ж, у поле тексту можна помістити читабельну назву піктограми:

Замінюємо '\ue8f5' на 'people' — віджет продовжує функціонувати

Слід зауважити, що конструктор IconData є константним, що дозволяє компілятору виключити невикористані піктограми з програми.

Динамічні піктограми й інтеграція з Material Framework

❗ Робіть зазначене нижче тільки якщо вам дійсно це треба. Дана практика шкодить розміру застосунку. Замість цього, ви можете, наприклад, завантажувати піктограму з мережі через NetworkImage та використовувати ImageIcon.

Таким чином можна зробити висновок, що використовуючи віджет Text можна відобразити піктограму за її кодом або навіть назвою. Проте, у такого підходу є суттєвий недолік: відсутність інтеграції з темою та Material Framework у цілому, адже Flutter сприймає таку піктограму як звичайний текст. Тому, ми напишемо власний об'єкт Icon, що не є константою, та який приймає назву піктограми для її відображення (див. кінець статті).

Використання:

Приклад використання DynamicIcon

Увага, через те, що конструктор не константний, tree shaking не працюватиме, що призведе до помилки компіляції, але дану поведінку можна виключили прапорцем збирання --no-tree-shake-icons.

Приєднуйтесь до нашого чату.