DartPad воркшопи від Flutter GDE

Привіт! Я Анна — експертка з мобільної розробки, GDE з Dart та Flutter, досвідчена розробниця мобільних додатків на Flutter.

Цього року, як і минулого разу, Google I/O проходив переважно онлайн, у віртуальному світі Adventure world. На віртуальних стендах була представлена велика кількість ознайомчих і навчальних матеріалів, які підготували співробітники Google, компанії, що користуються технологіями від Google, і комьюніті. Серед них у Flutter зоні були представлені пʼятнадцять DartPad воркшопів, створених Google Developer Expert-ами у Flutter з різних країн, в тому числі два з України. Ось так це виглядало в Adventure world:

Незважаючи на те, що Google I/O вже пройшов, всі матеріали доступні для ознайомлення на постійній основі. Далі надані посилання на кожен воркшоп із коротким описом, складеним самими авторами. Всі матеріали створено англійською мовою.

Але спочатку пару слів про Dartpad Workshops.

DartPad — це онлайн редактор, що дозволяе аналізувати код і запускати Dart і Flutter додатки у візуальному середовищі поруч з кодом.

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

До речі, якщо вас зацікавить, як самостійно створити DartPad Workshop, ось посилання на інструкцію від досвіченого автора.

Послідовний дизайн з Flutter Theme

Послідовність — це виграшна стратегія для хорошого інтерфейсу програми. І для цього Flutter розробникам не обов’язково бути професійними дизайнерами. Як завжди, для цього є віджет — Theme! Дізнайтеся більше про послідовний і легкий для імплементації дизайн Flutter додатків у цьому воркшопі.

Авторка Анна Леущенко

Програмуючи як математик

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

Автор Олександр Леущенко

Неявні анімації у Flutter

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

Авторка Paulina Szklarska

Адаптивний UI у Flutter: створення плавних інтерфейсів

Flutter — це портативний фреймворк: він може запускатися на мобільних пристроях, десктопах, у веб. Але портативність виходить за межі його крос-платформених можливостей. Вашою метою як розробника має бути здатність додатків адаптуватись до різних екранів та пристроїв, на яких користувачі будуть їх запускати. У цьому воркшопі ви дізнаєтеся, як скористатися перевагами можливостей Flutter фреймворку, і створити плавний, адаптивний UI, який буде тішити ваших користувачів на всіх платформах, незалежно від розміру екрана, орієнтації, тощо.

Автор Roman Jaquez

Елегантна обробка помилок

Помилки можуть виникнути в будь-який час у будь-якій програмі. Відображення належних повідомлень користувачам вашого додатка значно покращить їхні враження, але як це зробити? У цьому воркшопі ми виходимо за рамки try/catch й оброблятимемо помилки, створивши власний клас помилок, а також віджет, і показуватимемо відповідні повідомлення на основі отриманих помилок.

Автор Majid Hajian

Посібник з Future для початківців

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

Автор Dane Mackier

Segmented state патерн з flutter_bloc

Loading, success і error — три часто вживані стани при асинхронному завантаженні даних. Triple патерн (Segmented State патерн) виділяє ці стани з стану додатку. Цей воркшоп навчить вас, як реалізувати цей шаблон за допомогою flutter_bloc.

Автор Mangirdas Kazlauskas

Реактивний код у Flutter

Реактивне програмування може допомогти створити більш орієнтовані на дані, високо реактивні та адаптивні додатки. Ви змінюєте дані в одній частині програми, і вони автоматично оновлюються у всіх інших частинах програми, які від них залежать. У цьому воркшопі ви дізнаєтесь про різні доступні способи створення таких реактивних додатків у Flutter, включаючи вбудовані Stream, ValueNotifier, а також про реактивні рішення, створенні спільнотою, такі як Riverpod.

Авторка Pooja Bhaumik

Екстеншн методи

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

Автор Bhavik Makwana

Додаємо типізацію до Firestore запитів за допомогою конвертерів

Firestore — це NoSQL база даних від Firebase, яка є одиним з найпопулярніших варіантів у Flutter. За замовчуванням документація Firestore маніпулює об’єктом Map<String, dynamic>. Доступ до будь-якого поля у Map не є строго типізованим, ми повинні переконатися, що поле має правильний тип, перш ніж використовувати його значення. У цьому воркшопі ви дізнаєтесь про Firestore конвертори і як їх використовувати, щоб розробляти додатки з безпечнішою типізацією.

Авторка Mais Alheraki

Створюємо keyboard oriented пазл на Flutter

Flutter підтримує декстоп, веб- та мобільні пристрої. Використання клавіатури та переваг м’язової пам’яті є важливим аспектом для користувачів додатків. У цьому воркшопі ви дізнаєтеся про те, як створювати шорткати для додатку, а також як їх використати для створення чудової гри.

Автор Muhammed Salih Güler

Шлях від мобайл до веб/десктоп

Веб/десктоп-додатки відрізняються від мобільних, оскільки використання клавіатури та миші відрізняється від користування сенсорним екраном. У цьому воркшопі переробимо мобільний додаток у веб/десктоп додаток, і з’ясуємо, як правильно керувати фокусом і що таке ефект наведення.

Автор Aleksandr Denisov

Реалізуємо LazyIndexedStack

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

Автор Alex Li

Flutter для iOS розробників

SwiftUI підтягнув iOS розробку на гарний рівень, ближче до Flutter, але рішення Apple зробити iOS SDK доступним лише в macOS обмежує розповсюдження SwiftUI. Таким чином, Flutter набагато гнучкіший. У цьому воркшопі я покажу Dart і Flutter тим, хто знайомий з нативною iOS розробкою, і порівняю можливості Dart і Flutter з аналогічними з Swift і SwiftUI. Моя мета — допомогти вам, як iOS розробнику, розпочати вивчення Flutter.

Автор Vandad Nahavandipoor

Портфоліо сайт на Flutter Web

В наші часи мати власне онлайн-портфоліо — це необхідність. Існують різні способи і інструменти це зробити, наприклад WordPress, WIX. Але якщо ви Flutter розробник, то найпростіший спосіб це зробити — використовувати сам Flutter. У цьому воркшопі я пояснюю, як можна легко створити власне привабливе портфоліо на Flutter, та які різні віджети та пакети можна використовувати для швидкої розробки.

Авторка Renuka Kelkar