Стварайце міжплатформенныя мабільныя дадаткі з дапамогай Google Flutter

Задаволены

• 01. Наладжвайцеся
• 02. Выпраўце любыя праблемы
• 03. Знайдзіце IDE і пачніце новы праект
• 04. Наладзьце віртуальныя прылады
• 04. Праверце стартавае прыкладанне
• 06. Даследуйце віджэт-сістэму Flutter
• 07. Адрэдагуйце свой змест
• 08. Загрузіце некаторыя актывы
• 09. Скончыце

На працягу многіх гадоў было створана мноства міжплатформенных мабільных фрэймворкаў, якія пастаянна ўдасканальвалі досвед распрацоўнікаў і прадукцыйнасць. Google Flutter - гэта новае дадатак да пакета, і гэта асабліва цікава, бо замест таго, каб выкарыстоўваць мост JavaScript, як гэта робяць шматлікія фрэймворкі (напрыклад, React Native), ён кампілюецца ў сапраўдны ўласны код.

Вы можаце даведацца крыху пра тое, як гэта працуе, ва ўступным відэа ніжэй, альбо прачытаць пакрокавае кіраўніцтва па пачатку працы з Flutter. Для атрымання дадатковых парад паглядзіце наш зборнік падручнікаў, якія тлумачаць, як стварыць прыкладанне. Ці, калі вы ствараеце сайт, выберыце канструктар сайтаў і паслугу вэб-хостынгу з нашых даведнікаў. Не задаволены вашым сховішчам? Вось некалькі варыянтаў воблачнага захоўвання.

У гэтым уроку мы разгледзім, як наладзіць Flutter, і вывучым асновы стварэння прыкладанняў з выкарыстаннем фреймворка, выкарыстоўваючы macOS для нашай распрацоўкі. Мы будзем лічыць, што вы запраграмавалі раней і ведаеце, як выкарыстоўваць абалонку Bash, але, магчыма, не распрацаваны для мабільных прылад.

01. Наладжвайцеся

Вам трэба будзе загрузіць і ўсталяваць некалькі рэчаў, перш чым вы зможаце выкарыстоўваць Flutter:

• Xcode для падтрымкі iOS
• Падтрымка Android Studio для Android
• Android SDK (загрузіце праз Android Studio пасля стварэння новага праекта)

Пасля таго, як вы ўсё гэта, запусціце Xcode і Android Studio, усталюйце дадатковыя кампаненты, якія яны прапануюць, і стварыце новы праект, каб пераканацца, што яны працуюць.

Цяпер вы гатовыя пачаць працу з Flutter. Загрузіце Flutter SDK. Дастаньце яго туды, куды вы хочаце, каб ён быў усталяваны. Нам трэба абнавіць наш шлях, каб macOS мог знайсці Flutter усюды, дзе вы яго выклікаеце. Адкрыць (альбо стварыць) $ HOME / .bash_profile:

атам Sudo $ HOME / .bash_profile

Цяпер дадайце каталог flutter / bin у свой $ ШЛЯХ:

экспарт PATH = / Карыстальнікі / simon / dev / flutter / bin: $ PATH

Запусціце каманду абалонкі, каб абнавіць профіль bash:

крыніца $ HOME / .bash_profile

Цяпер мы можам пачаць выкарыстоўваць CLI Flutter. Першае, што трэба зрабіць, гэта пераканацца, што ў цябе ёсць апошняя версія:

абнаўленне флаттера

02. Выпраўце любыя праблемы

Пасля гэтага Flutter прапануе зручны дыягнастычны інструмент, які праверыць, ці правільна ўстаноўлена і наладжана ўсё, што вам трэба. Гэта сапраўды карысна:

трапятанне лекара

Прыміце да ведама, што кажа вам лекар, і рэагуйце на любыя ўзнікаючыя праблемы. Магчыма, вам прыйдзецца пабегчы да ўрача пару разоў, каб атрымаць дадатковую зваротную сувязь і дзейнічаць паводле яе.

Пасля таго, як інструмент задаволены Flutter, Android Toolchain, iOS Toolchain і Android Studio, вы гатовыя пайсці. Не хвалюйцеся наконт падлучаных прылад.

Xcode можа запатрабаваць дадатковых крокаў у абалонцы, каб цалкам наладзіць яе:

sudo xcode-select --witch /Applications/Xcode.app/Contents/Developer brew install --HEAD libimobiledevice brew install ideviceinstaller brew install cocoapods pod setup

І Android Studio часта патрабуе ліцэнзійнага пагаднення:

пырханне лекара - Android-ліцэнзіі

03. Знайдзіце IDE і пачніце новы праект

Цяпер Flutter наладжаны, вам трэба будзе працаваць IDE. Ёсць плагіны, даступныя для Android Studio і IntelliJ. Мы збіраемся пайсці з VS Code, які таксама мае свой убудова Flutter.

Запусціце VS Code і націсніце View> Command Palette. Набярыце «install» і выбярыце дзеянне Extensions: Install Extension. Шукайце «flutter» і ўсталюйце убудова Flutter. Пасля завяршэння перазапусціце VS Code.

Цяпер мы гатовы пачаць распрацоўку. Пачніце новы праект праз Камандную палітру, выбраўшы параметр Flutter: New Project. Назавіце свой праект, абярыце, дзе яго захаваць, і код VS выкліча Flutter для стварэння новага праекта.

04. Наладзьце віртуальныя прылады

Каб праверыць наш праект, нам спатрэбіцца сімулятар прылад, які дазваляе нам працаваць на працоўным стале. У правым ніжнім куце VS Code (на сіняй панэлі) вы ўбачыце паведамленне "Няма прылад". Калі вы ўжо распрацоўвалі для мабільных прылад, націснуўшы гэта, вы ўбачыце свае трэнажоры, даступныя ў панэлі каманд.

Калі ў вас няма трэнажораў, запусціце ў тэрмінале наступнае, каб упершыню адкрыць сімулятар iOS:

адкрыты -сімулятар

Пасля гэтага вы ўбачыце сімулятар iOS, даступны пры перазапуску кода VS.

Android больш складаны. Загрузіце Android Studio і ў рамках Android-праекта націсніце Інструменты> Android> AVD Manager. Абярыце Стварыць віртуальную прыладу.

Выберыце прыладу для эмуляцыі - напрыклад, Google Pixel 2. Націсніце "Далей", і вы таксама можаце выбраць вобраз сістэмы (г.зн. версію АС) для загрузкі. На наступнай старонцы ў раздзеле "Эмуляваная прадукцыйнасць" выберыце Апаратнае забеспячэнне - GLES 2.0, каб уключыць апаратнае паскарэнне графікі на эмулятары. Скончыце працэс.

Пасля таго, як вы стварылі віртуальную прыладу ў Android Studio, перазапусціце VS Code, і ваш эмулятар Android з'явіцца побач з імітатарам iOS у спісе прылад VS Code.

Цяпер, калі вы націснеце "Няма прылад", вы можаце выбраць прыладу iOS або Android, і віртуальны тэлефон запусціцца на працоўным стале. Паспрабуйце з імітатарам iPhone X.

04. Праверце стартавае прыкладанне

Цяпер трэнажор працуе, вы можаце выпрабаваць стартавае прыкладанне. Націсніце F5 альбо націсніце Адладка> Пачаць адладку. Дадатак загрузіцца на трэнажоры, і вы можаце паспрабаваць узаемадзейнічаць з ім.Будзьце цярплівыя, калі гэта адбудзецца не адразу, бо яго пабудова можа заняць некаторы час.

Перш чым мы зможам зрабіць тое ж самае на Android, нам трэба ўсталяваць залежнасці gradle для нашага праекта (невялікі нюанс Flutter прама зараз). Перайдзіце ў каранёвы каталог праекта і запусціце:

android / gradlew

Тады вы можаце адкрыць эмулятар Android і запусціць праект у рэжыме адладкі, як гэта было зроблена для iOS.

Выдатнай асаблівасцю Flutter з'яўляецца тое, што ён падтрымлівае "гарачую перазагрузку" - гэта значыць вы можаце змяніць крыніцу і адразу ўбачыць змены, адлюстраваныя ў трэнажоры. У main.dart, давайце ўнясем пару змен у клас MyApp, пакуль працуе сімулятар iPhone X:

primarySwatch: Colors.green, дома: новая MyHomePage (загаловак: 'Кніга рэцэптаў'), =

Вы павінны ўбачыць, як змены ўступаюць у сілу, як толькі вы захаваеце.

06. Даследуйце віджэт-сістэму Flutter

Пра што мы яшчэ не размаўлялі, гэта мова праграмавання Dart, якую выкарыстоўвае Flutter. Dart - гэта аб'ектна-арыентаваная мова з сінтаксісам у стылі C, распрацаваная Google, і ўсе распрацоўшчыкі Flutter яе выкарыстоўваюць. Калі вы ўжо маеце пэўны досвед распрацоўкі ў Інтэрнэце або на мабільнай прыладзе, ён не павінен быць вам зусім чужым.

Усё ў Flutter заснавана на віджэтах, якія з'яўляюцца будаўнічымі блокамі прыкладання. Калі вы раней выкарыстоўвалі React, падыход Flutter вельмі падобны, а віджэты аналагічныя кампанентам. Па сутнасці, усю вашу праграму можна раскласці на іерархію фішак.

Гэта лёгка заўважыць у межах MyApp клас. MyApp гэта Віджэт без грамадзянства (гэта азначае, што ён нязменны). будаваць() метад, які мы перакрываем, кажа Flutter, як адлюстроўваць віджэт. Гэта падобна на React адлюстраваць () функцыя.

Метад вяртае a MaterialApp віджэт, які ўяўляе сабой прыкладанне, якое выкарыстоўвае Матэрыяльны дызайн Google. Гэта, у сваю чаргу, мае некалькі ўласцівасцяў, якія самі з'яўляюцца фішкамі: ThemeData вызначае візуальны стыль, які будзе выкарыстоўвацца і MyHomePage гэта спецыяльны віджэт, вызначаны далей main.dart файл, які змяшчае тэкст прыкладання.

07. Адрэдагуйце свой змест

У адрозненне ад грамадзянства без грамадзянства MyApp, MyHomePage з'яўляецца адметным віджэтам. Гэта азначае, што яго паводзіны вызначаецца _MyHomePageState класа, дазваляючы захоўваць інфармацыю і змяняць адпаведна, напрыклад, пры націску кнопкі на дадатку.

Вы бачыце, што ў цяперашні час ён выкарыстоўвае шмат убудаваных віджэтаў, якія Flutter прадастаўляе для апрацоўкі такіх агульных рэчаў, як макет, кнопкі і дысплей тэксту. Давайце ўнясем некаторыя змены ў гэты клас, каб змяніць тое, што ўяўляе наша праграма.

клас _MyHomePageState пашырае StateMyHomePage> {@override зборка віджэтаў (кантэкст BuildContext) {вярнуць новую рыштаванне (appBar: новы AppBar (загаловак: новы тэкст (віджэт.загаловак),), цела: новы кантэйнер (упрыгожванне: новы BoxDecoration (колер: колеры. карычневы [100]), дзіця: новы RecipeWidget ())); }}

Мы ўтылізавалі існуючы змест і замянілі яго карычневым віджэтам кантэйнера, але нам таксама трэба стварыць уласны віджэт RecipeWidget, які будзе змешчаны ў кантэйнер.

клас RecipeWidget пашырае StatelessWidget {@override Widget build (кантэкст BuildContext) {ListWidget> widgets = new ListWidget> (); вярнуць новы ListView (дзеці: фішкі); }}

08. Загрузіце некаторыя актывы

Далей загрузім некаторыя актывы з дадаткам, каб мы маглі дадаваць іх у ListView віджэт у RecipeWidget. Статычныя актывы для прыкладання паказаны ў pubspec.yaml у раздзеле "пырханне":

актывы: - img / breakfast.webp - img / curry.webp - img / pasta.webp

Мы таксама створым простую структуру дадзеных у main.dart, спалучыўшы выявы са радкамі, каб выконваць ролю мініяцюры і рэзюмэ для рэцэптаў.

var recepti = {'breakfast.webp': 'Пачніце дзень правільна з гэтага пажыўнага сняданку.', 'pasta.webp': 'Вашы сябры, зрабіўшы ўласную свежую макарону.', 'curry.webp': 'Паказаць вашы кулінарныя навыкі з багатым кары. ',};

09. Скончыце

Нарэшце, давайце абнавім RecipeWidget стварыць спіс фішак, якія адлюстроўваюць рэцэпты. Мы выкарыстоўваем Image.asset для загрузкі статычных актываў, якія мы ўключылі pubspec.yaml.

recipes.forEach ((thumb, caption) => widgets.add (new Container (child: new Padding (padding: new EdgeInsets.all (16.0), child: new ListTile (ведучы: Image.asset ('img /' + thumb) , шырыня: 80,0), загаловак: Тэкст (подпіс))), упрыгожванне: новы BoxDecoration (мяжа: новы Border (унізе: новы BorderSide (колер: Colors.brown)), колер: Colors.brown [200])))) ;

Спадзяюся, вы пачынаеце адчуваць, як Flutter выкарыстоўвае віджэты для стварэння прыкладанняў. Паспрабуйце выкарыстоўваць трэнажор для павароту прылады. Макет Flutter аўтаматычна ўлічвае змены. Для параўнання паспрабуйце прыкладанне на эмулятары Android.

Гэты артыкул быў першапачаткова апублікаваны ў сетка, самы прадаваны ў свеце часопіс для вэб-дызайнераў і распрацоўшчыкаў. Купляйце выпуск 310 альбо падпісацца.