Tarkib
- 01. Sozlang
- 02. Har qanday muammolarni hal qiling
- 03. IDE toping va yangi loyihani boshlang
- 04. Virtual qurilmalarni o'rnating
- 04. Boshlang'ich dasturni sinovdan o'tkazing
- 06. Flutter-ning vidjet tizimini o'rganing
- 07. Tarkibingizni tahrirlang
- 08. Ba'zi aktivlarni yuklang
- 09. Tugatish
O'tgan yillar davomida ko'plab o'zaro faoliyat platformalar mobil tizimlari mavjud bo'lib, ular davomida ishlab chiquvchilar tajribasi va ishlashi barqaror yaxshilanmoqda. Google's Flutter - bu to'plamga yangi qo'shimchalar va ayniqsa qiziqarli, chunki JavaScript-ning ko'prigini ishlatishdan ko'ra (masalan, React Native), u haqiqiy mahalliy kodni tuzadi.
Qanday ishlashini quyida keltirilgan kirish videodan bilib olishingiz mumkin yoki Flutter-dan boshlash bo'yicha bosqichma-bosqich qo'llanmani o'qing. Qo'shimcha maslahat uchun dasturni qanday yaratishni tushuntirib beradigan o'quv qo'llanmalar to'plamimizni ko'rib chiqing. Yoki, agar siz sayt qurayotgan bo'lsangiz, bizning qo'llanmalarimizdan veb-sayt yaratuvchisi va veb-xosting xizmatini tanlang. Saqlashingizdan mamnun emasmisiz? Bulutli saqlash imkoniyatlari.
Ushbu qo'llanmada biz Flutter-ni qanday o'rnatishni ko'rib chiqamiz va rivojlanishimiz uchun macOS-dan foydalanib, ramka yordamida dasturlarni yaratish asoslarini o'rganamiz. Siz ilgari dasturlashtirilgansiz va Bash qobig'idan qanday foydalanishni bilasiz deb o'ylaymiz, lekin mobil uchun ishlab chiqilmagan bo'lishi mumkin.
01. Sozlang
Flutter-dan foydalanishdan oldin sizga bir nechta narsalarni yuklab olishingiz va o'rnatishingiz kerak bo'ladi:
- IOS-ni qo'llab-quvvatlash uchun Xcode
- Android-ni qo'llab-quvvatlash uchun Android Studio
- Android SDK (yangi loyiha yaratgandan so'ng Android Studio orqali yuklab oling)
Bularning barchasiga ega bo'lgandan so'ng, Xcode va Android Studio-ni ishga tushiring, ular taklif qiladigan qo'shimcha komponentlarni o'rnating va ularning ishlashiga ishonch hosil qilish uchun yangi loyiha yarating.
Endi siz Flutter bilan ishlashni boshlashga tayyormiz. Flutter SDK-ni yuklab oling. Uni o'rnatishni xohlagan joyingizga oling. Biz o'z yo'limizni yangilashimiz kerak, shunda macOS Flutterni qaerga chaqirsangiz ham topishi mumkin. Ochish (yoki yaratish) $ HOME / .bash_profile:
sudo atom $ HOME / .bash_profile
Endi flutter / bin katalogini o'zingizga qo'shing $ PATH:
export PATH = / Users / simon / dev / flutter / bin: $ PATH
Bosh profilini yangilash uchun qobiq buyrug'ini bajaring:
manba $ HOME / .bash_profile
Endi biz Flutter CLI-dan foydalanishni boshlashimiz mumkin. Birinchi narsa, eng so'nggi versiyasiga ega ekanligingizga ishonch hosil qiling:
02. Har qanday muammolarni hal qiling
Amalga oshirilgandan so'ng, Flutter sizga kerakli bo'lgan barcha narsalar to'g'ri o'rnatilganligini va o'rnatilishini tekshiradigan qulay diagnostika vositasini taklif qiladi. Bu juda foydali:
chayqaladigan shifokor
Shifokor sizga aytadigan narsalarga e'tibor bering va yuzaga kelgan muammolarga javob bering. Qo'shimcha mulohazalarni olish va unga muvofiq harakat qilish uchun sizga shifokorni bir necha marta ishlatishingiz kerak bo'lishi mumkin.
Asbob Flutter, Android Toolchain, iOS Toolchain va Android Studio-dan mamnun bo'lganidan so'ng, siz borishingizni xohlaysiz. Hozircha ulangan qurilmalar haqida tashvishlanmang.
Xcode uni to'liq sozlash uchun qobiqda qo'shimcha qadamlarni talab qilishi mumkin:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer brew install --HEAD libimobiledevice brew o'rnatish ideviceinstaller brew install cocoapods pod setup
Android Studio ko'pincha litsenziya shartnomasini qabul qilishi kerak:
flutter shifokor - android-litsenziyalari
03. IDE toping va yangi loyihani boshlang
Endi Flutter o'rnatildi, siz IDE-ning ishlashini xohlaysiz. Android Studio va IntelliJ uchun plaginlar mavjud. Biz VS kodi bilan boramiz, u ham o'zining Flutter plaginiga ega.
VS kodini ishga tushiring va Ko'rish> Buyruqlar palitrasi-ni bosing. "O'rnatish" yozing va kengaytmalarni tanlang: Kengaytmani o'rnating. "Flutter" ni qidiring va Flutter plaginini o'rnating. Tugatgandan so'ng, VS kodini qayta ishga tushiring.
Biz endi rivojlanishni boshlashga tayyormiz. Buyruqlar palitrasi orqali yangi loyihani Flutter: New Project opsiyasini tanlab boshlang. Loyihangizga nom bering, uni qaerda saqlashni tanlang va VS Code yangi loyihani yaratish uchun Flutter-ga murojaat qiladi.
04. Virtual qurilmalarni o'rnating
Loyihamizni sinab ko'rish uchun biz ish stoliga ruxsat beradigan qurilma simulyatorini xohlaymiz. VS kodining pastki o'ng burchagida (ko'k satrda) siz "Qurilmalar yo'q" degan narsani ko'rasiz. Agar siz ilgari mobil telefoningiz uchun ishlab chiqilgan bo'lsangiz, buni bosganingizda, simulyatorlaringizni Buyruqlar palitrasida ko'rasiz.
Agar sizda simulyatorlar bo'lmasa, birinchi marta iOS simulyatorini ochish uchun terminalda quyidagilarni bajaring:
simulyatorni oching
VS kodini qayta ishga tushirishda siz iOS simulyatorini ko'rishingiz kerak.
Android yanada murakkab. Android Studio-ni yuklang va Android loyihasida Asboblar> Android> AVD menejeri-ni bosing. Virtual qurilmani yaratish-ni tanlang.
Taqlid qilish uchun qurilmani tanlang - masalan, Google Pixel 2. Keyingiga bosing va yuklab olish uchun tizim tasvirini (ya'ni OS versiyasini) tanlashingiz mumkin. Keyingi sahifada taqlid qilingan ishlash ostida, emulyatorda apparat grafik tezlashishini yoqish uchun Hardware - GLES 2.0 ni tanlang. Jarayonni tugating.
Android Studio-da virtual qurilmani yaratganingizdan so'ng, VS kodini qayta ishga tushiring va Android emulyatoringizni VS Code qurilmalar ro'yxatida iOS simulyatori bilan birga ko'rinishini ko'rasiz.
Endi "Qurilmalar yo'q" tugmachasini bosgan bo'lsangiz, siz iOS yoki Android qurilmasini tanlashingiz mumkin, shunda virtual telefon ish stolingizda yonib ketadi. Buni iPhone X simulyatori yordamida sinab ko'ring.
04. Boshlang'ich dasturni sinovdan o'tkazing
Endi simulyator ishlaydi, boshlang'ich dasturini sinab ko'rishingiz mumkin. F5 tugmachasini bosing yoki disk raskadrovka> disk raskadrovka qilishni boshlang. Ilova simulyatorga yuklanadi va siz u bilan ishlashni sinab ko'rishingiz mumkin.Agar bu darhol ro'y bermasa, sabr qiling, chunki uni qurish biroz vaqt talab qilishi mumkin.
Android-da xuddi shunday qilishdan oldin, biz loyihamiz uchun gradga bog'liqliklarni o'rnatishimiz kerak (hozirda Flutterning kichik nuansı). Loyiha ildiz katalogiga o'ting va ishga tushiring:
Android / gradlew
Keyin Android emulyatorini ochishingiz va iOS uchun bo'lgani kabi loyihani disk raskadrovka rejimida boshqarishingiz mumkin.
Flutter-ning ajoyib xususiyati shundaki, u "issiq qayta yuklashni" qo'llab-quvvatlaydi - ya'ni siz o'zingizning manbangizni o'zgartirishingiz va simulyatorda aks etgan o'zgarishlarni darhol ko'rishingiz mumkin. In main.dart, iPhone X simulyatori ishlayotganda MyApp sinfiga bir nechta o'zgartirish kiritamiz:
primarySwatch: Colors.green, uy: yangi MyHomePage (sarlavha: 'Retseptlar kitobi'), =
Saqlashingiz bilanoq o'zgarishlarning kuchga kirishini ko'rishingiz kerak.
06. Flutter-ning vidjet tizimini o'rganing
Biz hali gaplashmagan narsa - Flutter foydalanadigan Dart dasturlash tili. Dart - bu Google tomonidan ishlab chiqilgan va barcha Flutter ishlab chiqarishda foydalaniladigan C uslubidagi sintaksisga ega ob'ektga yo'naltirilgan til. Agar siz allaqachon veb yoki mobil aloqani rivojlantirish tajribasiga ega bo'lsangiz, unda bu sizga mutlaqo begona bo'lmasligi kerak.
Flutter-dagi hamma narsa dasturning asosiy bloklari bo'lgan vidjetlarga asoslangan. Agar siz ilgari React-dan foydalangan bo'lsangiz, Flutterning yondashuvi juda o'xshash va vidjetlar komponentlarga o'xshashdir. Aslida sizning butun ilovangiz vidjetlar ierarxiyasiga aylanishi mumkin.
Buni osongina ko'rish mumkin MyApp sinf. MyApp a DavlatsizVidjet (bu o'zgarmas degan ma'noni anglatadi). The qurmoq() biz bekor qilgan usul Flutter-ga vidjet qanday ko'rsatilishi kerakligini aytadi. Bu Reactnikiga o'xshaydi render () funktsiya.
Usul qaytaradi MaterialApp Google-ning Material Design-dan foydalanadigan dasturni ifodalovchi vidjet. Bu o'z navbatida vidjet bo'lgan bir nechta xususiyatlarga ega: ThemeData ishlatiladigan vizual uslubni belgilaydi va MyHomePage pastga qarab belgilangan maxsus vidjetdir main.dart dasturning asosiy qismini o'z ichiga olgan fayl.
07. Tarkibingizni tahrirlang
Fuqaroligi yo'qlardan farqli o'laroq MyApp, MyHomePage shtat vidjeti. Bu shuni anglatadiki, uning xatti-harakati _MyHomePageState ma'lumotni saqlashi va shunga mos ravishda o'zgarishi uchun, masalan, ilovadagi tugmani bosganingizda, sinf.
Siz hozirda Flutter-ning joylashtirilgan, tugmachalar va matnli displey kabi keng tarqalgan ishlarni bajaradigan ko'plab o'rnatilgan vidjetlaridan foydalanayotganini ko'rishingiz mumkin. Keling, bizning ilovamiz taqdim etadigan narsalarni o'zgartirish uchun ushbu sinfga biroz o'zgartirish kiritaylik.
class _MyHomePageState StateMyHomePage> {@override Widget build (BuildContext context) {return new Scaffold (appBar: new AppBar (title: new Text (widget.title),), body: new Container (bezak: new BoxDecoration (rang: Ranglar). jigarrang [100]), bola: yangi RecipeWidget ())); }}
Biz mavjud tarkibni yo'q qildik va uni jigarrang Container vidjeti bilan almashtirdik, lekin biz idishga solinadigan maxsus RecipeWidget vidjetini yaratishimiz kerak.
sinf RecipeWidget StatelessWidget-ni kengaytiradi {@override Vidjet qurilishi (BuildContext konteksti) {ListWidget> widgets = new ListWidget> (); yangi ListView-ni qaytarish (bolalar: vidjetlar); }}
08. Ba'zi aktivlarni yuklang
Keyin, ba'zi aktivlarni dasturga yuklaymiz, shunda ularni qo'shib qo'yamiz ListView ichida vidjet RecipeWidget. Ilova uchun statik aktivlar pubspec.yaml "chayqalish" bo'limi ostida:
aktivlar: - img / breakfast.webp - img / curry.webp - img / pasta.webp
Bundan tashqari, main.dart-da oddiy rasmlar tuzilishini yaratamiz, rasmlarni simvollar bilan birlashtiramiz, retseptlar uchun eskiz va xulosa.
var recipes = {'breakfast.webp': 'Kunni mana shu to'yimli nonushta bilan boshlang.', 'pasta.webp': 'O'zingizning yangi makaron tayyorlashingiz bilan do'stlaringizni hayratga soling.', 'curry.webp': 'Ko'rgazma boy oshpazlik bilan sizning oshxona mahoratingiz. ',};
09. Tugatish
Nihoyat, yangilaymiz RecipeWidget retseptlarini ko'rsatadigan vidjetlar ro'yxatini tuzish. Biz foydalanamiz Image.asset biz kiritgan statik aktivlarni yuklash uchun pubspec.yaml.
recipes.forEach ((thumb, caption) => widgets.add (yangi Container (bola: yangi Padding (to'ldirish: yangi EdgeInsets.all (16.0)), bola: yangi ListTile (etakchi: Image.asset ('img /' + thumb) , kengligi: 80.0), sarlavha: Matn (sarlavha))), bezak: yangi BoxDecoration (chegara: yangi Border (pastki: yangi BorderSide (rang: Colors.brown)), color: Colors.brown [200])))) ;
Umid qilamanki, siz Flutter dasturlarni yaratish uchun vidjetlardan qanday foydalanishi haqida fikr yurita boshlaysiz. Qurilmani aylantirish uchun simulyatordan foydalanib ko'ring. Flutter sxemasi o'zgarishlarni avtomatik ravishda joylashtiradi. Taqqoslash uchun Android emulyatoridagi dasturni sinab ko'ring.
Ushbu maqola dastlab nashr etilgan to'r, veb-dizaynerlar va ishlab chiquvchilar uchun dunyodagi eng ko'p sotiladigan jurnal. Sotib oling 310-son yoki obuna bo'lish.
