Flutter

Příklady z praxe

1. 01

   Jednoduchá obrazovka s počítadlem

   Základní ukázka ukazuje deklarativní princip: metoda build popisuje, jak má obrazovka vypadat pro aktuální hodnotu proměnné. Volání setState nezmění tlačítko ani text ručně, jen oznámí frameworku, že se stav změnil, a Flutter build spustí znovu. Hot reload přitom udrží aktuální hodnotu počítadla.

   class Counter extends StatefulWidget {
     const Counter({super.key});
     @override
     State<Counter> createState() => _CounterState();
   }
   
   class _CounterState extends State<Counter> {
     int _count = 0;
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Center(child: Text('Kliknutí: $_count')),
         floatingActionButton: FloatingActionButton(
           onPressed: () => setState(() => _count++),
           child: const Icon(Icons.add),
         ),
       );
     }
   }

2. 02

   Interní aplikace pro terénní techniky

   Servisní firma potřebuje aplikaci pro Android i iOS s formuláři, fotkami zakázek a offline režimem. Tým o třech lidech nemá kapacitu na dvě nativní kódové základny, vzhled si navrhl vlastní a nativní look nepotřebuje. Flutter tu dává smysl: jedna aplikace, sdílená logika, přístup ke kameře a lokálnímu úložišti přes ověřené balíčky. Nativní kód by byl potřeba jen u napojení na konkrétní čtečku čárových kódů.

Časté omyly

MýtusFlutter aplikace jsou jen webview zabalené do appky.

Ve skutečnostiFlutter nepoužívá webview ani HTML. Dart kód se pro release kompiluje AOT do nativního strojového kódu a rozhraní vykresluje grafický engine přímo přes GPU.

MýtusFlutter vypadá na iOS jako Android, takže bude uživatelům vadit.

Ve skutečnostiFlutter nabízí kromě Material knihovnu Cupertino s iOS vzhledem a chování lze rozlišit podle platformy. Většina produktů dnes stejně používá vlastní design system, kde je jednotný vzhled záměr.

MýtusFlutter je dobrá volba i na běžný web.

Ve skutečnostiFlutter web kreslí obsah na plátno, takže text a odkazy nejsou standardní DOM. Pro obsahové a marketingové weby, kde záleží na SEO a přístupnosti, je vhodnější klasický HTML framework.

Časté dotazy

Jaký jazyk je potřeba umět pro Flutter?

Flutter se programuje výhradně v jazyce Dart, který vyvíjí rovněž Google. Dart je staticky typovaný objektový jazyk se syntaxí blízkou Javě, C# a TypeScriptu, takže přechod z těchto jazyků bývá otázkou několika dní. Znalost Kotlinu, Swiftu nebo C++ není pro start nutná, hodí se až ve chvíli, kdy aplikace potřebuje vlastní platform channel k systémovému API, které nepokrývá žádný balíček z pub.dev.

Kdy zvolit Flutter místo nativního vývoje?

Flutter se vyplatí tam, kde má tým jednu menší kapacitu a potřebuje aplikaci na Android i iOS zároveň, kde je hodně vlastního UI a animací a kde produkt stojí na vlastním design systemu místo nativního vzhledu. Nativní vývoj zůstává lepší volbou u aplikací silně závislých na nových systémových API, u náročné práce s kamerou nebo senzory, u widgetů na plochu a všude, kde je kritická minimální velikost instalačního balíčku.

Co je hot reload a proč se u Flutteru tolik zmiňuje?

Hot reload je funkce Flutteru, která po uložení souboru vloží změněný Dart kód do už běžící aplikace a překreslí rozhraní, aniž by se aplikace restartovala a ztratila stav. Vývojář tak vidí úpravu odsazení nebo barvy během okamžiku, i když je zanořený deset obrazovek hluboko. Hot reload funguje díky JIT kompilaci v debug režimu; release build se kompiluje AOT a hot reload v něm dostupný není.

Kolik platforem Flutter opravdu pokrývá v produkční kvalitě?

Flutter oficiálně podporuje Android, iOS, web, Windows, macOS a Linux. V praxi jsou nejvyzrálejší mobilní platformy, na kterých framework vznikl a kde má největší nasazenou základnu. Desktopové cíle jsou použitelné, ale ekosystém balíčků je slabší a část knihoven má implementaci jen pro mobil. Web je funkční pro aplikační rozhraní za přihlášením, nikoli pro veřejné obsahové stránky, kde vadí vykreslování na plátno.

Zdroje

1. Flutter(otevře se v novém okně)Wikipedia
2. Dart (programming language)(otevře se v novém okně)Wikipedia
3. Skia Graphics Library(otevře se v novém okně)Wikipedia
4. Flutter(otevře se v novém okně)Wikidata

Související pojmy

• React NativeReact Native je open-source framework pro tvorbu mobilních aplikací, ve kterém se rozhraní a aplikační logika píší hlavně v JavaScriptu nebo TypeScriptu nad Reactem. Aplikace přitom používá nativní prvky iOS a Androidu, takže může sdílet část kódu mezi platformami bez čistě webového webview přístupu.
• AndroidAndroid je operační systém postavený nad linuxovým jádrem, který vyvíjí Google a otevřeně uvolňuje jako projekt AOSP. Android pohání převážnou většinu chytrých telefonů, dále tablety, televize, hodinky i palubní systémy aut. Aplikace se pro něj píší hlavně v Kotlinu nebo Javě a distribuují přes Google Play i alternativní obchody.
• A/B testováníA/B testování je řízený experiment, který porovnává dvě varianty stránky, funkce, ceny nebo sdělení na podobných skupinách uživatelů. Měří předem zvolenou metriku, například konverzi nebo retenci, a pomáhá rozhodnout, zda změna skutečně zlepšuje výsledek, nebo zda pozorovaný rozdíl mohl vzniknout náhodou.
• ACIDACID je sada čtyř vlastností databázové transakce: atomicity, consistency, isolation a durability. Zaručuje, že skupina zápisů proběhne jako jeden celek, neporuší definovaná pravidla databáze, nebude se nebezpečně míchat s jinými transakcemi a po potvrzení přežije pád systému, například při převodu peněz.
• Adaptive IconAdaptivní ikona je formát ikony aplikace na Androidu, který se místo jedné hotové bitmapy skládá z oddělených vrstev: pozadí a popředí. Systém výsledný tvar sám ořízne podle masky výrobce zařízení a může vrstvy animovat nebo přebarvit. Vývojář tak dodá jeden zdroj a launcher z něj vytvoří kruh, čtverec i squircle.
• Adresa v pamětiAdresa v paměti je číslo, kterým procesor jednoznačně označuje konkrétní buňku operační paměti, obvykle jeden bajt. Program pomocí adresy říká, odkud má data načíst nebo kam je zapsat. Adresy tvoří souvislý číselný rozsah, jehož velikost určuje šířka adresní sběrnice a architektura, typicky 32 nebo 64 bitů.
• AI agentAI agent je softwarový systém, který pomocí modelu umělé inteligence vnímá zadaný kontext, plánuje další kroky a samostatně volá nástroje nebo služby k dosažení cíle. Na rozdíl od jednorázového promptu udržuje stav úlohy, vyhodnocuje výsledky akcí a může opakovat postup, dokud nesplní zadání nebo nenarazí na limit.
• Alfa kanálAlfa kanál je složka obrazových dat, která u pixelu určuje míru neprůhlednosti nebo průhlednosti. Doplňuje barevné kanály, typicky RGB, a umožňuje plynulé okraje, stíny, překryvy, masky i skládání vrstev. Hodnota alfa sama neurčuje barvu, ale říká, jak se barva pixelu promíchá s pozadím.