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

Vývoj Android aplikací jsem opustil už před lety. Je s tím moc práce a málo zábavy. Tím spíš mě ale zaujal Flutter. Že by mě ty mobilní appky začaly zase bavit?

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:

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.

Ukázka rychlého deploye

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:

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.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 20

Přehled komentářů

Honza
Dafe Šimonek Re:
Martin Soch
Lumír
Dafe Šimonek Re:
Tomáš Zvěřina Re:
Tomáš Zvěřina Nativní API
HoBi Jednoduše: skvělý
Jindrich Sarson vždycky to bude kompromis...
Tomáš Zvěřina Re: vždycky to bude kompromis...
Martin Schayna Další Swing?
Tomáš Zvěřina Re: Další Swing?
Josef Polymer Ninja Re: Další Swing?
Tomáš Zvěřina Re: Další Swing?
FilipJirsak
Tomáš Zvěřina Re:
Tomáš Zvěřina Přístupnost "canvas" aplikací?
Milan Křepelka Dart
Tomáš Zvěřina Re: Dart
Tomáš Zvěřina Flutter v czpodcast
Zdroj: https://www.zdrojak.cz/?p=20400