Flutter.io – mobilní aplikace, znovu a lépe

Celý článek

Hned na začátek uvedu dvě klíčové skutečnosti, které některým ostrostřelcům ušetří pár minut čtení: Je to alfa a je to v Dartu.

Jste tu ještě? Prima!

Flutter je nový framework pro tvorbu mobilních aplikací, který funguje na Android a iOS, je hodně inspirován Reactem, aplikace se píší v Dartu a kompilují se do nativního kódu platformy (žádný Dart, žádný Java bytecode – prostě “stroják”).

Pro pochopení Flutteru je nutné vstřebat jeho základní vlastnost. Flutter aplikace není nic jiného, než obrázek na canvasu. Všechno co vidíte, je kresleno přímo na GPU. Pixel sem, čára tam, bitmapa mezi to. A je to zatraceně rychlé.

Nativní widgety platformy se nepoužívají, všechny inputy, renderování, chování, “fyzika” – všechno je napsané od píky. Díky tomu bylo možné vymyslet věci znovu a lépe. Skládání UI, události, navigace mezi obrazovkami.

To ovšem neznamená, že by Flutter nectil zvyklosti té které platformy. Např. na iOSu je zvykem na konci skrolování mírně přetáhnout a na Androidu zase zobrazit poloprůhledný “bounce effect”. Všechny tyto vlastnosti Flutter implementuje, takže aplikace pak působí velmi “nativně”.

Schválně si to zkuste:

• https://play.google.com/store/apps/details?id=io.flutter.gallery
• https://play.google.com/store/apps/details?id=com.hamilton.app

Jak se ve Flutteru píše

Postup jak začít je popsaný na webu Flutteru, ten tu opakovat nebudu. Ukážeme si ale, jak vypadá Flutter aplikace.

import 'package:flutter/widgets.dart';

void main() => runApp(new Center(child: new Text('nazDart světe!')));

To je vlastně všechno, co musíte napsat. Např. pro Android vznikne oblíbený AndroidManifest.xml a MainActivity.java, ale o ty se ve většině případů nemusíte starat, to už Flutter zařídí.

Další věc, kterou je potřeba na Flutteru pochopit, je fakt, že všechno je widget. Aplikace je widget, Center je widget, Padding, ListView, Flex, Column, Button, … všechno jsou widgety, které se řídí stejnými pravidly (pro layout, pro vykreslení, pro skládání).

Například Transform (posunutí, otočení, …) – to je widget. Takže je klidně možné, aby kořenovým widgetem mojí aplikace bylo otočení.

Pravda, v praxi to zrovna nepoužijete, ale ukazuje to, jak pěkně obecně a konzistentně Flutter funguje.

V zásadě se rozlišují dva typy widgetů – Stateless a Statefull.

Stateless – to je jednoduché, to je widget, který se nemění, jeho podoba je daná tím, jak je zavolaný jeho konstruktor. Např. takový Text.

Statefull widget už nějakým způsobem reaguje na svůj vnitřní stav, obvykle tedy poskládá svůj obsah ze Stateless widgetů naplněných daty, se kterými pracuje. Například jedna obrazovka aplikace nebo formulářík – to je statefull widget.

Ke každému Statefull widgetu existuje objekt, který jeho stav reprezentuje (jak data, tak UI). Stav musí mít metodu build, která vrací widget (obvykle celý podstrom widgetů). Tedy to, co se má v daný okamžik zobrazit. A teď přijde ta reaktivnost – kdykoliv se mění stav (zvýší se počítadlo, přijdou data ze serveru, uživatel na něco klikne), musí se změna provést pomocí funkce setState:

int _counter = 0;

void _incrementCounter() {
 setState(() {
   _counter++;
 });
}

Pro Flutter je to pokyn, aby znovu zavolal metodu build a umožnil widgetu na změnu stavu nějak zareagovat – poskládat svůj obsah jinak (kde bylo točítko, objeví se data, kde byla jednička, objeví se dvojka). O změny UI se tedy nestaráte, vždy prostě vykreslíte to, co odpovídá vašemu stavu, if-y, for cykly, … podle libosti. Flutter zařídí zbytek.

Mimo jiné to umožňuje, abyste při vývoji aktualizovali jen změněné části běžící appky. Stav zůstane zachován a pouze se překreslí. Což znamená hot-deploy (do telefonu nebo emulátoru) během pár set milisekund a UI zůstane tam kde bylo, jen se promítnou deploynuté změny.

Kudy dál

Flutter je v alfaverzi. Podle informací, které mám, se nečeká, že se bude příliš měnit API existujícího kódu a widgetů. Ale zatím nemá některé widgety, které jsou pro určité typy aplikací zásadní – mapy, video… Použít se ale dá, viz výše odkazovaný Hamilton.

Pokud Vás zajímá víc, podívejte se na:

• Officiální stránky Flutteru
• Český Dart rozcestník
• Katalog Material design widgetů

Přednáška o Flutteru z letošního Google IO:

Přednáška o Flutteru z letošního Google Developer Days:

… a nebo se ptejte v diskuzi. Hlavně se ale neptejte, jestli je Dart mrkev nebo jiná zelenina, o tom tu mám celý článek.

Obrázky jsou převzaté z webu Flutter.io pod Creative Commons Attribution 4.0 International License, ukázku kódu pod licencí BSD.