Jak sestavit aplikaci ceníku cryptocurrency pomocí Flutter SDK

Flutter je nová sada nástrojů s otevřeným zdrojovým kódem od společnosti Google, která vývojářům pomáhá vytvářet aplikace pro iOS a Android pomocí jediné kódové základny. Flutterové aplikace jsou psány v programovacím jazyce Dart a kompilovány do nativního kódu, takže výkon je opravdu, opravdu skvělý.

V tomto tutoriálu vám ukážu, jak pomocí Flutter vytvořit aplikaci, která zobrazuje aktuální cenu různých kryptoměn. Projdu vás základy Flutter a Dart.

Než začneme, nainstalujte si Flutter a plugin pro Flutter editor, pokud jste tak ještě neučinili. Instalace by měla být přímá, ale pokud narazíte na problémy, můžete zanechat komentář k tomuto příspěvku a rád vám pomůžu.

V tomto tutoriálu budu používat Android Studio, ale můžete také použít IntelliJ nebo Visual Studio Code.

Vyžaduje se také určitá zkušenost s objektově orientovaným programováním (OOP). Relaxovat! Nepotřebujete roky zkušeností - pokud víte, jaké třídy a předměty jsou, měli byste být v pořádku.

Začněme

V systému Android Studio nebo IntelliJ klikněte na nabídku Soubor -> Nový -> Nový projekt Flutter. Pokud možnost New Flutter Project nevidíte, zkontrolujte, zda jste nainstalovali plugin Flutter. Pokud používáte kód Visual Studio, vytvořte nový projekt podle následujících pokynů.

Po otevření stránky vyberte Flutter Application a klikněte na tlačítko Next.

Na další stránce můžete konfigurovat projekt. Můžete použít podobnou konfiguraci jako na obrázku níže. Zajistěte, aby cesta Flutter SDK směřovala do adresáře, do kterého jste Flutter stáhli.

Poslední stránka umožňuje nakonfigurovat název vaší firemní domény a můžete jej nastavit na libovolný název domény. Poté klikněte na tlačítko Dokončit.

Vytvoření projektu by mělo začít po kliknutí na tlačítko Dokončit, což obvykle trvá několik minut.

Až bude hotovo, váš projekt by měl vypadat takto.

Ve složce lib byl vytvořen soubor main.dart. Obsahuje kód pro demo aplikaci. Protože budujeme naši aplikaci od nuly, otevřete soubor main.dart a smažte / vymažte veškerý kód v něm.

Pokud váš projekt obsahuje testovací adresář, který obsahuje soubor widget_test.dart, před pokračováním tento soubor vymažte. Obsahuje testy na kód, který jsme právě smazali.

Flutterové aplikace jsou psány v programovacím jazyce Dart. Soubor main.dart je zdrojový soubor Dart (přípona .dart). Konvence Dart je pojmenovat zdrojové soubory pomocí smallcase_with_underscores.

Začněme psát nějaký Dart kód. Začneme programovací tradicí: tisk „Hello World!“

K tomu musíme vytvořit něco, co se nazývá hlavní funkce. Hlavní funkce je funkce nejvyšší úrovně, kterou má každá aplikace Flutter a která slouží jako vstupní bod do aplikace. Myslete na to jako na vchod do domu.

Když spustíte aplikaci na zařízení, spuštění se spustí od hlavní funkce. Vytvořme jednoduchou hlavní funkci, takže do souboru main.dart zadejte následující kód.

Jak vidíte, vytvoření hlavní funkce je snadné. Druhý řádek obsahuje deklaraci hlavní funkce: její návratový typ (neplatné) a jméno (hlavní). Hlavní funkce vrací neplatné, což znamená, že nevrací nic.

Třetí řádek provádí tisk na konzoli. Zavoláme funkci tisku a předáme jí řetězcový argument. Všimněte si, že v šipce můžete při deklarování řetězcového literálu použít jednoduché uvozovky („řetězec“) nebo dvojité uvozovky („řetězec“).

Chcete-li spustit kód, klikněte na zelené tlačítko Spustit (přehrát) v horní části aplikace Android Studio nebo IntelliJ. Zkontrolujte, zda je připojeno skutečné zařízení nebo zda je spuštěn emulátor.

Po úspěšném spuštění aplikace byste na konzoli měli vytisknout „Hello World!“.

Pokud ale zkontrolujete své zařízení nebo emulátor, uvidíte něco zklamáním.

Prázdná obrazovka

To se očekávalo, protože v současné době tiskneme pouze na konzoli. Do uživatelského rozhraní aplikace nebylo nic přidáno, a proto je prázdné.

Opravme to přidáním některých prvků do uživatelského rozhraní aplikace. Naše aplikace bude používat materiálový design, takže přidáme balíček do souboru main.dart, abychom tomu pomohli.

Stejně jako jakýkoli moderní programovací jazyk můžete importovat knihovnu / balíček, který chcete použít v kódu. Zde importujeme balíček material.dart. Tento balíček obsahuje kód, který nám pomáhá vytvářet aplikaci ve stylu materiálu.

Balík material.dart má funkci nazvanou runApp. RunApp vezme widget a připojí jej k obrazovce. Co je to widget?

Widgety

Widgety můžete považovat za zobrazení nebo prvky uživatelského rozhraní. Jsou to věci, které vidíte (a některé nevidíte), když spustíte aplikaci na zařízení. Ve Flutteru budete používat widgety hodně, protože hlavní myšlenkou je, že uživatelské rozhraní aplikace je vyrobeno zcela z widgetů.

Flutter již přichází se sadou výkonných widgetů, jako je text a obrázky. Balíček material.dart, který jsme právě naimportovali, má několik widgetů pro návrh materiálu, které brzy použijeme.

Pojďme nyní pomocí metody runApp zobrazit „Hello World!“ Ve středu obrazovky zařízení. Nahraďte obsah hlavní funkce níže uvedeným kódem.

Dovolte mi vysvětlit některé nové věci ve výše uvedeném kódu

  1. nový: K vytvoření objektu obvykle používáte nové klíčové slovo s konstruktorem pro třídu. (OOP)
  2. new MaterialApp (): Zde vytváříme nový widgetový objekt s názvem MaterialApp. Widget MaterialApp vytváří řadu užitečných věcí, které aplikace pro návrh materiálu potřebuje.
  3. home :: V Dartu můžeme jasně určit název každého parametru v rámci volání funkce / konstruktoru. Widget předaný jako domovský parametr se zobrazí jako první při normálním spuštění aplikace.
  4. new Center (child: new Text ('Hello World!'))): Widget Text zabalíme do widgetu Center tak, aby se text dostal na střed obrazovky. Widget Text je podřízeným prostředkem widgetu Center. Ano, widgety lze vnořit.

Pokud znovu spustíte kód a otevřete zařízení, měli byste nyní získat o něco lepší obrazovku.

Chladný! Podařilo se nám na obrazovce zařízení zobrazit škaredě vypadající text.

Další kroky

Udělejme nyní pár kroků vpřed. Ceny kryptoměny získáme z rozhraní CoinMarketCap API. Rozhraní API vrací pole JSON. Zde je ukázka odpovědi z API:

Žádáme rozhraní CoinMarketCap API a dekódujeme JSON z aplikace. Do souboru main.dart budeme muset zahrnout několik nových balíčků.

Zde je přehled nových balíčků:

  1. dart: async: Poskytuje třídu budoucnosti, o které budu mluvit níže.
  2. dart: convert: Poskytuje proměnnou json, kterou použijeme k dekódování řetězcové odpovědi JSON.
  3. package: http / http.dart: Poskytuje funkci, kterou použijeme pro vytváření požadavků HTTP GET.

Přidáme novou funkci do souboru main.dart, který vytvoří požadavek na CoinMarketCap API.

Pojďme projít nový kód

→ Budoucnost : V zásadě říkáme, že funkce getCurrencies () v budoucnu vrátí seznam. Vyžádá HTTP požadavek na CoinMarketCap API a po dokončení vrátí seznam měn.

Funkce getCurrencies () je asynchronní. Pokud máte nějaké zkušenosti s JavaScriptem, můžete si představit Futures jako Promises. Následující obrázky jsem vytvořil, abych vám pomohl pochopit Futures in Dart.

Bob volá asynchronní funkci askKateForBalloons (), která vrací Future <Balloons>Bob může udržet budoucnost <Balónky>Bob může vědět, až bude budoucnost dokončena

→ asynchronní a čekejte:

Čekejte výrazy, které vám umožní psát asynchronní kód téměř, jako by byl synchronní. Funkce http.get (url) je asynchronní a vrátí Future okamžitě, jakmile je zavolána. Chceme čekat na odpověď, abychom mohli dekódovat řetězec JSON, ale také nechceme používat ošklivá zpětná volání.

Čekající výraz vyhodnotí http.get (url) a poté pozastaví aktuálně běžící funkci (getCurrencies ()), dokud nebude výsledek připraven - tedy dokud nebude dokončena budoucnost.

Chcete-li použít čekat, musí být kód ve funkci označené jako asynchronní. Asynchronní funkce je funkce, jejíž tělo je označeno asynchronním modifikátorem. Když zavoláte funkci async, okamžitě vrátí budoucnost. Tělo funkce je naplánováno na provedení později.

Více informací o async a čekání na Dart najdete zde.

→ http.get (url): Vykoná požadavek HTTP GET na rozhraní CoinMarketCap API. Tato funkce je asynchronní a okamžitě vrací Future.

  1. JSON.decode (response.body): Dekóduje odpověď řetězce JSON.

Vyzkoušejte funkci getCurrencies (), kterou jsme právě vytvořili. Děláme to tak, že na něj zavoláme v naší hlavní funkci a vytiskneme vrácenou hodnotu do konzole.

Pokud spustíte výše uvedený kód, měli byste vidět odpověď API vytištěnou na konzoli.

Ve skutečném světě se mohou stát špatné věci. Například nemusíte být připojeni k internetu, takže požadavek na rozhraní CoinMarketCap API selže. Pro tento tutoriál předpokládáme, že jsme ve Wakandě.

V produkční aplikaci budete muset řešit selhání sítě. To provedete vložením volání HTTP do bloku try… catch.

Vytváření uživatelského rozhraní

Nyní, když máme seznam měn, pojďme si vytvořit uživatelské rozhraní, které tento seznam zobrazí.

Při psaní aplikací Flutter obvykle vytvoříte nové třídy widgetů. Hlavním úkolem widgetu je implementovat funkci sestavení, která popisuje widget z hlediska dalších widgetů nižší úrovně.

Vytvořme nový Widget s názvem CryptoListWidget. Přidejte kód níže na konec souboru main.dart.

Projdeme si výše uvedený nový kód:

  1. StatelessWidget: Obvykle vytvoříte widgety, které jsou podtřídami StatelessWidget nebo StatefulWidget, v závislosti na tom, zda váš widget řídí jakýkoli stav. Používáme StatelessWidget, protože již máme svá data a nebudeme je v tomto tutoriálu aktualizovat.
  2. final List _colors: Proměnné v StatelessWidget by měly být konečné (což znamená, že jsou konstantní nebo nemění se). Zde deklarujeme finální proměnnou, která obsahuje seznam MaterialColors. Podtržítko (_) před názvem proměnné je soukromé (nepřístupné z jiných tříd).
  3. CryptoListWidget (this._currencies): Toto je konstruktor našeho widgetu. Přiřadí seznam měn, které předáváme konstruktoru, proměnné _currencies.
  4. Funkce build: Metoda build vrací Widget (Text) nižší úrovně, který popisuje, jak bude vypadat.

Nahraďte widget Text ve výše uvedené funkci sestavení novým widgetem nazvaným Lešení. Widget Lešení implementuje vizuální rozvržení struktury základního materiálu. Nahraďte sestavení výše uvedenou funkcí.

Třída Lešení poskytuje API pro zobrazování zásuvek, plovoucího tlačítka akce, spodní lišty, snack baru atd. Plovoucí akční tlačítko přidáme později.

Měli byste dostat varování, že _buildBody () není pro třídu CryptoListWidget definována. Pojďme vytvořit funkci _buildBody () uvnitř třídy CryptoListWidget.

Syntaxe zde by měla být známá. Používáme dva nové widgety:

  1. Widget kontejneru: Widget kontejneru je pouze kontejner :) (pro další widgety).
  2. Widget Sloupec: Widget Sloupec rozvrhuje seznam podřízených widgetů ve svislém směru. Má parametr zvaný child, který vezme seznam widgetů.

Vytvořme dvě funkce, které jsme nazvali ve funkci _buildBody (). První z nich je _getAppTitleWidget ().

Tato funkce vrací běžný textový widget se stylem, díky kterému je tučné a bílé s velikostí písma 24,0.

Text bude vypadat takto, když spustíme aplikaci.

Aplikaci zatím nemůžeme spustit, protože jsme nevytvořili další funkci nazvanou _getListViewWidget (). Pojďme rychle vytvořit pomocí níže uvedeného kódu.

_GetListViewWidget () vrací widget ListView, který je zabalen do flexibilní widgetu. Seznam snadno vytvoříme pomocí ListView.builder. Předáváme položku item, která říká staviteli, kolik měn se má zobrazit.

Pro každou položku bude vyvoláno zpětné volání itemBuilder a musíte vrátit nový widget. Ve výše uvedeném kódu voláme funkci nazvanou _getListItemWidget (), která vrací Widget.

Než vytvoříme funkci _getListItemWidget (), rychle vytvoříme jednotlivé prvky pro widget položky ListView. Chceme, aby každá položka v ListView vypadala takto:

Máme tedy tři hlavní widgety:

  1. Widget kulaté ikony s prvním znakem měny
  2. Textový widget s názvem měny
  3. Textový widget s cenou a procentuální změnou za 1 hodinu.

Vytvořme widgety. Pro jednoduchost jsem pro každou z nich vytvořil funkci. První funkce s názvem _getLeadingWidget () vrací kulatou ikonu s textem.

Widget bude vypadat takto:

Druhá funkce s názvem _getTitleWidget vrátí widget Text pro název měny.

Třetí funkce s názvem _getSubtitleWidget () vrací textový widget pro aktuální cenu měny a procentuální změnu za 1 hodinu.

Obě tyto widgety by měly vypadat takto:

Zabalíme všechny tři widgety do něčeho, co se nazývá widget ListTile. Widget ListTile je založen na dokumentaci Seznamu návrhů materiálu. Zobrazuje všechny tři widgety v tomto stylu.

Vytvoříme novou funkci nazvanou _getListTile, která vrací widget ListTile.

Nakonec vytvořme _getListItemWidget (). Vrátí se widget pro kontejnery, který má nejvyšší výplň 5,0 a má podřízené widget karty. Widget na kartě má ListTile vrácený uživatelem _getListTile jako podřízený.

Widget bude vypadat takto.

Úspěšně jsme dokončili náš CryptoListWidget. Musíme však aktualizovat hlavní funkci tak, aby zobrazovala nově vytvořený widget místo textového widgetu.

A je to. Můžete znovu stisknout tlačítko Run. Pokud vše funguje dobře a jste připojeni k internetu, měli byste obrazovku, která vypadá takto.

Opravdu v pohodě?

Aplikace, kterou vidíte, se bude mírně lišit od výše uvedeného snímku obrazovky:

  1. Vpravo dole nemá plovoucí akční tlačítko.
  2. Barva textu procentuální změny za 1 hodinu je černá.

Rozhodl jsem se je nezahrnout do výuky. Ale můžete si prohlédnout projekt úložiště Github a podívat se, jak jsem toho dosáhl.

Dokončenou aplikaci si můžete stáhnout zde.

Děkuji za čtení a doufám, že si Fluttera užíváš stejně jako já. Pokud máte nějaké problémy, návrhy atd., Můžete zanechat komentář níže.

Pokud se vám tento příběh líbil, klikněte prosím na tlačítko and a sdílejte jej, aby jej ostatní mohli najít.