Как да изградите приложение за ценоразпис на криптовалута, използвайки Flutter SDK

Flutter е новият инструментариум на Google с отворен код за подпомагане на разработчиците да създават приложения за iOS и Android само с една кодова база. Flutter приложенията са написани на езика за програмиране на Dart и се компилират в родния код, така че производителността е наистина, наистина страхотна.

В този урок ще ви покажа как да използвате Flutter за изграждане на приложение, което показва текущата цена на различните криптовалути. Ще ви преведа през основите на Flutter and Dart.

Преди да започнем, инсталирайте Flutter и приставката за редактор на Flutter, ако още не сте го направили. Инсталацията трябва да е права, но ако се сблъскате с проблеми, можете да оставите коментар на този пост и ще се радвам да ви помогна.

За този урок ще използвам Android Studio, но можете да използвате и IntelliJ или Visual Studio Code.

Също така е необходим известен обектно-ориентиран опит в програмирането (OOP). Отпуснете се! Не ви трябват години опит - ако знаете какви са класовете и обектите, трябва да сте добре.

Да започваме

В Android Studio или IntelliJ кликнете върху менюто File -> New -> New Flutter Project. Ако не виждате опцията New Flutter Project, уверете се, че сте инсталирали приставката Flutter. Ако използвате Visual Studio Code, изпълнете стъпките тук, за да създадете нов проект.

Когато страницата се отвори, изберете Flutter Application и щракнете върху бутона Next.

Следващата страница ви позволява да конфигурирате проекта. Можете да използвате подобна конфигурация като изображението по-долу. Просто се уверете, че пътят на Flutter SDK сочи към директорията, в която сте изтеглили Flutter.

Последната страница ви позволява да конфигурирате името на домейна на вашата компания и можете да го зададете на всяко име на домейн. След това кликнете върху бутона Finish.

Създаването на проекта трябва да започне след натискане на бутона за завършване, което обикновено отнема няколко минути.

Когато приключи, вашият проект трябва да изглежда така.

В папката lib беше създаден файл, наречен main.dart. Той съдържа код за демо приложение. Тъй като ние ще изграждаме нашето приложение от нулата, отворете файла main.dart и изтрийте / изчистете целия код в него.

Ако вашият проект включва тестова директория, която съдържа файла widget_test.dart, изтрийте този файл, преди да продължите. Той съдържа тестове за кода, който току-що изтрихме.

Приложенията за трептене са написани на езика за програмиране на Dart. Файлът main.dart е изходен файл на Dart (разширение .dart). Условието на Dart е да назовава изходни файлове с помощта на тестови_измерените знаци.

Нека започнем да пишем някакъв Dart код. Ще започнем с традицията на програмиране: отпечатване на "Hello World!"

За целта ще трябва да създадем нещо, наречено главна функция. Основната функция е функция от най-високо ниво, която има всяко приложение Flutter, която служи като входна точка в приложението ви. Мислете за това като за входа на къща.

Когато стартирате приложението си на устройство, изпълнението ще започне от основната функция. Нека създадем проста основна функция, така че въведете следния код във файла main.dart.

Както можете да видите, създаването на основната функция е лесно. Вторият ред съдържа декларацията на основната функция: нейния тип връщане (void) и име (main). Основната функция връща недействителност, което означава, че не връща нищо.

Третият ред прави отпечатването към конзолата. Извикваме функцията за печат и предаваме на нея аргумент на низ. Обърнете внимание, че в Dart можете да използвате единични кавички („низ“) или двойни кавички („низ“), когато декларирате буквален низ.

За да стартирате кода, кликнете върху зеления бутон за изпълнение (пускане) в горната част на Android Studio или IntelliJ. Уверете се, че имате свързано действително устройство или имате работещ емулатор.

След успешното стартиране на приложението, на конзолата трябва да видите „Hello World!“.

Но ако проверите вашето устройство или емулатор, ще видите нещо разочароващо.

Празен екран

Е, това беше очаквано, тъй като в момента печатаме само на конзолата. Не беше добавено нищо към потребителския интерфейс на приложението и затова то е празно.

Затова нека да поправим това, като добавим някои елементи към потребителския интерфейс на приложението. Приложението ни ще използва материален дизайн, така че нека добавим пакет към файла main.dart, за да помогнем за това.

Както всеки съвременен език за програмиране, можете да импортирате библиотека / пакет, който да използвате във вашия код. Тук внасяме пакета material.dart. Този пакет съдържа код, който ни помага да създадем приложение за стилен материал.

Пакетът material.dart има функция, наречена runApp. RunApp взема джаджа и я прикрепя към екрана. Е, какво е джаджа?

Widgets

Можете да мислите за джунджурии като изгледи или елементи от потребителския интерфейс. Те са нещата, които виждате (и някои, които не виждате), когато стартирате приложението си на устройство. В Flutter много ще използвате джаджи, защото основната идея е, че потребителският ви интерфейс на приложението е направен изцяло от джаджи.

Flutter вече се предлага с набор от мощни джаджи като текст и изображения. Пакетът material.dart, който току-що импортирахме, има няколко приспособления за дизайн на материали, които скоро ще използваме.

Нека сега използваме метода runApp, за да покажем „Hello World!“ В центъра на екрана на устройството. Заменете съдържанието на основната функция с кода по-долу.

Нека обясня някои от новите неща в кода по-горе

  1. ново: За да създадете обект, обикновено използвате новата ключова дума с конструктор за клас. (OOP)
  2. нов MaterialApp (): Тук създаваме нов обект на джаджа, наречен MaterialApp. Притурката MaterialApp създава редица полезни неща, необходими на приложението за дизайн на материали.
  3. начало :: В Dart можем ясно да посочим името на всеки параметър в рамките на функцията / конструктор повикване. Притурката, предадена като домашен параметър, се показва първо, когато приложението се стартира нормално.
  4. нов център (дете: нов текст („Здравей, свят!“)): Увитаме джаджата за текст вътре в джаджа „Център“, така че текстът да бъде центриран на екрана. Текстовата джаджа е дете на джаджата Center. Да, приспособленията могат да бъдат вложени.

Ако стартирате кода отново и отворите устройството си, трябва да получите малко по-добър екран сега.

Готино! Успяхме да покажем грозно изглеждащ текст, центриран на екрана на устройството.

Следващите стъпки

Нека направим няколко стъпки сега Ще получим цените на криптовалутите от API на CoinMarketCap. API връща JSON масив. Ето примерен отговор от API:

Ще отправим заявка към API на CoinMarketCap и ще декодираме JSON от приложението. Ще трябва да включим няколко нови пакета към файла main.dart.

Ето преглед на новите пакети:

  1. dart: async: Осигурява класа Future, за който ще говоря повече по-долу.
  2. dart: convert: Предоставя променливата json, която ще използваме за декодиране на низовия отговор на JSON.
  3. пакет: http / http.dart: Осигурява функцията, която ще използваме за отправяне на HTTP GET заявки.

Нека добавим нова функция към файла main.dart, който отправя заявка към API на CoinMarketCap.

Нека разгледаме новия код

→ Бъдеще <Списък>: По принцип казваме, че функцията getCurrencies () ще върне списък някъде в бъдеще. Той ще направи HTTP заявка към API на CoinMarketCap и ще върне Списък на валутите, когато е готово.

Функцията getCurrencies () е асинхронна. Ако имате известен опит в JavaScript, можете да мислите за Futures като за обещания. Създадох изображенията по-долу, за да ви помогна да разберете Futures in Dart.

Bob извиква асинхронната функция askKateForBalloons (), която връща бъдеще <Balloons>Боб може да запази бъдещето <Балони>Боб може да знае кога бъдещето завършва

→ асинхронизирайте и чакайте:

Изчакайте изразите ви позволяват да пишете асинхронен код почти така, сякаш е синхронен. Функцията http.get (url) е асинхронна и връща бъдеще веднага, когато се извика. Искаме да изчакаме отговора, за да можем да декодираме стринга JSON, но също така не искаме да използваме грозни обратни обаждания.

Изчакващият израз оценява http.get (url) и след това спира текущата изпълняваща се функция (getCurrencies ()), докато резултатът е готов - тоест, докато бъдещето приключи.

За да използвате чакате, кодът трябва да бъде във функция, маркирана като асинхронна. Функция за асинхронизация е функция, чието тяло е маркирано с модификатор на асинхронизация. Когато извикате функция за асинхронизация, тя незабавно връща бъдеще. Тялото на функцията е планирано за изпълнение по-късно.

Можете да прочетете повече за async и да чакате в Dart тук.

→ http.get (URL): отправя HTTP GET заявка към API на CoinMarketCap. Тази функция е асинхронна и незабавно връща Бъдеще.

  1. JSON.decode (response.body): Дешифрира низовия отговор на JSON.

Нека да тестваме функцията getCurrencies (), която току-що създадохме. Правим това като правим повикване към него в основната ни функция и отпечатваме върнатата стойност на конзолата.

Ако стартирате кода по-горе, трябва да видите отговора на API, отпечатан на конзолата.

Е, в реалния свят могат да се случат лоши неща. Например, може да не сте свързани с интернет, така че заявката към API на CoinMarketCap няма да успее. За този урок ще приемем, че сме във Ваканда.

В производствено приложение ще трябва да се справите с отказ на мрежата. Това правите, като поставяте HTTP обаждането в блок за опит ... улавяне.

Изграждане на потребителския интерфейс

Сега, когато имаме списък с валути, нека да разработим потребителския интерфейс, който да показва този списък.

Когато пишете Flutter приложения, обикновено ще създавате нови класове на джунджурии. Основната задача на джаджа е да реализира функция за изграждане, която описва джаджа по отношение на други джаджи от по-ниско ниво.

Нека създадем нова джаджа, наречена CryptoListWidget. Добавете кода по-долу в долната част на вашия файл main.dart.

Нека разгледаме новия код по-горе:

  1. StatelessWidget: Обикновено ще създавате Widgets, които са подкласове на StatelessWidget или StatefulWidget, в зависимост от това дали вашата джаджа управлява някое състояние. Използваме StatelessWidget, защото вече имаме своите данни и няма да ги актуализираме в този урок.
  2. final List _colors: Променливите в StatelessWidget трябва да са окончателни (което означава, че са постоянни или не се променят). Тук ние декларираме окончателна променлива, която съдържа списък на MaterialColors. Подчертаването (_) преди името на променливата я прави частна (недостъпна за други класове).
  3. CryptoListWidget (this._currencies): Това е конструкторът на нашата джаджа. Той присвоява списъка на валутите, които предаваме в конструктора на променливата _currencies.
  4. функция за изграждане: Методът на сглобяване връща Widget (Текст) от по-ниско ниво, който описва как ще изглежда.

Нека да заменим текстовата джаджа във функцията за сглобяване по-горе с нова джаджа, наречена скеле. Джаджата на скелета реализира основната структура на визуалното оформление на основния материал. Заменете функцията за сглобяване по-горе с тази по-долу.

Класът на скелета предоставя API за показване на чекмеджета, плаващ бутон за действие, долна лента, снек бар и т.н. По-късно ще добавяме плаващ бутон за действие.

Трябва да получите предупреждение, че _buildBody () не е дефиниран за клас CryptoListWidget. Нека продължим да създадем функция _buildBody () вътре в класа CryptoListWidget.

Синтаксисът тук трябва да е познат. Използваме две нови джунджурии:

  1. Контейнерна джаджа: A Container джаджа е само контейнер :) (за други джунджурии).
  2. Колонка джаджа: Колонка джаджа подрежда списък на детски джаджи във вертикална посока. Той има параметър, наречен деца, който взема списък от джаджи.

Нека създадем двете функции, които нарекохме във функцията _buildBody (). Първият е _getAppTitleWidget ().

Тази функция връща обикновен Text widget със стил, който го прави смел и бял с размер на шрифта 24.0.

Текстът ще изглежда така, когато стартираме приложението.

Все още не можем да стартираме приложението, защото не сме създали другата функция, наречена _getListViewWidget (). Нека го създадем бързо с помощта на кода по-долу.

_GetListViewWidget () връща джаджа ListView, която е обвита в гъвкава джаджа. Ние използваме ListView.builder за лесно създаване на списъка. Предаваме в itemCount, който казва на строителя колко валути да покаже.

Обратното извикване на itemBuilder ще се извиква за всеки елемент и трябва да върнете нова джаджа. В кода по-горе извикваме функция, наречена _getListItemWidget (), която връща Widget.

Преди да създадем функцията _getListItemWidget (), нека бързо създадем отделните елементи за приспособлението за елемент ListView. Искаме всеки елемент от ListView да изглежда така:

И така, имаме три основни джаджа:

  1. Джаджа с кръгла икона с първия знак на името на валутата
  2. Текстова джаджа с името на валутата
  3. Текстова джаджа с промяна на цената и процента за 1 час.

Нека създадем джаджите. За простота създадох функция за всеки от тях. Първата функция, наречена _getLeadingWidget () връща кръглата икона с текста.

Приспособлението ще изглежда така:

Втората функция, наречена _getTitleWidget, връща приспособлението Text за името на валутата.

Третата функция, наречена _getSubtitleWidget () връща текстовата джаджа за текущата цена на валутата и процентното изменение за 1 час.

И двата джаджа трябва да изглеждат така:

Нека увием и трите джаджа в нещо, наречено джаджа на ListTile. Джаджата ListTile се основава на документацията на списъка за проектиране на материали. Показва и трите джаджа в този стил.

Ще създадем нова функция, наречена _getListTile, която връща джаджа ListTile.

И накрая, нека създадем _getListItemWidget (). Ще върне приспособление Container, което има горна подложка от 5.0 и има дете на джаджа с Card. Картата джаджата ListTile се връща от _getListTile като дете.

Приспособлението ще изглежда така.

Успешно завършихме нашата CryptoListWidget. Но трябва да актуализираме основната функция, за да показваме новосъздадената джаджа вместо текстовата джаджа.

Това е. Можете отново да натиснете бутона за стартиране. Ако всичко работи добре и сте свързани с интернет, трябва да направите екран, който изглежда така.

Наистина готино нали?

Приложението, което виждате, ще бъде малко по-различно от екрана по-горе:

  1. Той няма плаващ бутон за действие в долната дясна част.
  2. Цветът на текста на процентната промяна за 1 час е черен.

Реших да не ги включвам в урока. Но можете да проверите хранилището на проекта Github, за да видите как успях да го постигна.

Завършеното приложение можете да изтеглите тук.

Благодаря за четенето и се надявам да се насладите на Flutter толкова, колкото на мен. Не се колебайте да оставите коментар по-долу, ако имате някакви проблеми, предложения и т.н.

Ако ви е харесала тази история, моля, кликнете върху бутона and и споделете, за да помогнете на другите да я намерят.