Přejít k navigační liště

Zdroják » Mobilní vývoj » Flutter.io – mobilní aplikace, znovu a lépe

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?

Nálepky:

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.

Komentáře

Subscribe
Upozornit na
guest
20 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Honza

Připadá mi, že ideově dosti kopírují React (což je dobře). Akorát mi tam nějak chybí obdoba JSX :D Asi jsem si na to už moc zvykl. Každopádně oproti Reactu to má nevýhodu v tom, že nejde o věc typu „learn once, write anywhere“. Podle mě si to bude jen těžko hledat vývojáře, ještě hůře než Xamarin. Protože ruku na srdce, kdo programuje v Dartu?

Dafe Šimonek

Tak třeba já :-) a hodně rád, ale uznávám je nás málo. V samotném Dartu však problém není – oproti vžitému mainstreamovému přesvědčení je to jednoduchý elegantní jazyk i platforma vhodná pro různé použití s vysokou efektivitou. Subjektivně na mé cestě přes asm, basic, pascal, c, c++, javu, js, scalu se mi líbí daleko nejvíc.

Martin Soch

Díky za react-native.

Všechny pokusy v minulosti, které renderovaly všechny samy, dopadly strašně špatně.

Nativní prvky for the win! Snad už jsme se poučili!

Lumír

Problem je, ze bez optimalizaci a vyuzivani nativnich knihoven te ci one platformy budeme casto znovu vynalezat kolo.

Toto je cesta do pekla. Je to dobre tak pro ty nejjednodussi appky, ale ne pro slozitejsi projekt. Jak bych napriklad mohl optimalizovat aplikaci pro ARKit nebo ARCore? Nemohl. Takze bych ty frameworky musel jako napsat znovu? Blbost.

L.

Dafe Šimonek

Ano Flutter není na všechno – jako vždy platí, že typ projektu by měl určovat použitou technologii a ne naopak. Mimochodem podle tvé definice mám na telefonu výhradně ty „nejjednodušší“ appky…

HoBi

Nikdy jsem mobilní appky zkoušet nedělat, ale pracovat s Flutter mi přijde stejně přirozený, jako pracovat s AngularDart.

Funguje to. Všechno je widget, a tak mohu dělat nějrůznější věci, viz rotace celé aplikace. Převod AngularDart <–> Flutter je zřejmě docela snadný. A vypadá to, že ve Fuchsia půjdou psát UI ve Flutteru.

Momentálně vyvíjím jednoduchou hru a i přes počáteční nesnáze, plynoucí z neznalosti mobilního vývoje, jsem lehce vytvořil aplikaci, která opravdu něco dělá a funguje.

A to je důvod, proč za mne jednoduše skvělý!

Jindrich Sarson

Je fakt, že Flutter je na iOS rychlý. Rychlejší než React native aplikace. A i u těch React native aplikací to s těmi nativními komponenty není zas tak slavné – někde se používají, někde ne.

Ale – furt to prostě není ono. Scrolování není stejné. A jsem moc zvědavý, jak budou pánové upravovat Hamilton na iPhone X. Výhoda nativního GUI je v tom, že s tímto počítá na úrovni knihoven.

Martin Schayna

Díky za vysvětlení o co jde. Záleží na typu aplikace, hry proč ne, ale co businessové aplikace, formuláře, propojení na systém, přístupnost, podpora správců hesel nebo třeba automatizované testování UI? To vážně máme chtít další Swing, kde systémový look and feel je spíš ukázkové uncanny valley? Jakkoliv je obtížné mapovat přenositelnou logiku na nativní UI, je to pro velkou část aplikací lepší než kreslit na canvas.

Josef Polymer Ninja

Pro formulářovou “business app-ku” tu mame PWA a Polymer. ;-)

FilipJirsak

kompilují se do nativního kódu platformy (žádný Dart, žádný Java bytecode – prostě “stroják”)

Tomuhle nerozumím. Nativní kód Androidu je Dalvik bytecode, tedy v podstatě něco jako Java bytecode. V případě Andoridu tedy Flutter.io kompiluje do Dalvik bytecode nebo do strojového kódu?

Milan Křepelka

Vypadá to jako důvod se Dartem zabývat. Na druhou stranu, takhle napsáno, nepůsobí moc důvěryhodně. Ta snaha dělat všechno od píky…. no já ti nevím ….. co čidla, specialitky dané platformy …

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.