Flutter - Ishni boshlash juda oson

Javascript juda yaxshi rivojlanganligi sababli, biz Ionic yordamida Angular kabi gibrid mobil ilova tizimlarini uchratdik. Keyin React Native va NativeScript sahnaga chiqdi, bu sizga Java yoki Swift bilimisiz mahalliy mobil ilovalarni yaratishga imkon beradi.

Ionion dastlab xudoga o'xshash ixtiro edi, ammo React Native buni tezda o'z qo'liga oldi. Keyin Telerik NativeScript-ni taqdim etdi, ammo bu mening fikrimga katta ta'sir ko'rsatmadi.

Bunday imkoniyatlarsiz biz mobil ilovalar yarata olamizmi? Do'zax ha! Ushbu maqola birinchi Flutter dasturini yaratishga olib keladi (agar siz hali bunday bo'lmagan bo'lsangiz).

Flutter - bu Google-ning yangi alfa loyihasi bo'lib, u sizga mahalliy ilovalarni yaratishga imkon beradi. Flutter alfa loyihasi bo'lganligi sababli uni ishlab chiqarishni rivojlantirish uchun tavsiya etilmaydi (lekin kim bunga ahamiyat beradi? ¯ \ _ (ツ) _ / ¯)

Maqsad: Flutter & Firebase yordamida xaridlar ro'yxati ilova.

O'rnatish kerak bo'lgan narsalar

Flutter: Ushbu havoladan flutterni o'rnating. O'rnatish bosqichlarini bajarishni, shuningdek, plaginlarni o'rnatishni unutmang. Agar eshitsangiz, ular eshakda og'riq bo'lishi mumkin

Xcode: Agar Mac-da bo'lsangiz, sizga Xcode kerak bo'ladi, uni bu yerdan ilova do'konidan olishingiz mumkin. Flutter ilovangizning iOS tomonini ishlab chiqish uchun sizga Xcode kerak.

Android Studio: Flutter ilovangizning Android tomonini ishlab chiqish uchun sizga albatta kerak. Bu erdan oling.

IDE: Men VSCode-ni asosiy matn muharriri sifatida ishlatganman va u uchun Flutter & Dart plaginlari mavjud, ammo men Flutterni ishlab chiqish uchun Intellij IDEA-ni tavsiya qilaman. Flutter dasturini yaratish uchun to'liq vositalar mavjud. Shunday qilib, bu erdan oling.

Namunaviy dasturni ishga tushirish

IDE-ni ishga tushiring va "Yangi loyihani yaratish" ustiga bosing, so'ng chapdan "Flutter" -ni tanlang.

Yuqorida aytib o'tganimdek, agar o'rnatish bosqichlarini o'tkazib yuborsangiz, Flutter variantini ko'ra olmasligingiz mumkin. Shunday qilib, orqaga qayting

Mening maslahatlarimni qabul qilganlar uchun davom eting!

Qolgan narsalarni xohlaganingizcha to'ldiring.

Java tili Android tili uchun odatiy hisoblanadi, ammo men iOS tilini Swift-ga o'tkazdim, chunki menda Objective-C haqida hech qanday tushuncha yo'q, shuning uchun sizning qaroringiz.

Endi siz skeletlarni tayyorlashga tayyormiz. Barcha sharh satrlarini zudlik bilan olib tashlang, chunki men ularni foydali deb bilmayman. Shuningdek, floatingActionButton, tana tarkibini va _incrementCounter usulini olib tashlang.

Endi sizda toza tokcha bor

Interfeysi yarataylik

Sinfda yangi so'nggi satr yarating va Material App sarlavhasini va uy vidjeti sarlavhasini o'zgartiring. Men shuningdek, ilovaning rang o'zgarishini qizil rangga o'zgartirdim. Menga yoqdi !
Endi sizda bu go'zallik bor running

_MyHomePageState-da tahrirlanadigan matn maydoni uchun boshqaruvchi bo'lgan yakuniy TextEditingController yarating.

yakuniy TextEditingController _textController = yangi TextEditingController ();

keyin foydalanuvchi kiritishi bilan ajoyib narsalarni qilish uchun _handleSubmissions usulini yarating

void _handleSubmissions (String text) {
    
}

va yakuniy sifatida pastki qismida kirish konteynerini yaratish uchun ushbu kodni qo'shing.

Vidjet _createInputContainer () {
        yangi konteynerni qaytarish (
          chegarasi: const EdgeInsets.simmetrik (gorizontal: 16.0),
          bola: yangi qator (
            bolalar:  [
              yangi moslashuvchan (
                bola: yangi TextField (
                    tekshirgich: _textController,
                    onSubmed: _handleSubmissions,
                    bezatish: yangi InputDecoration.collapsed (
                        hintText: "Biror narsa qo'shish"),
                ),
            ),
            yangi konteyner (
                bola: yangi IconButton (
                    rang: Colors.red,
                    belgi: yangi piktogramma (Icons.list),
                    bosilgan: () {}),
            ),
            yangi konteyner (
                bola: yangi IconButton (
                    rang: Colors.red,
                    belgi: yangi piktogramma (Icons.send),
                    bosilgan: () {}),
            ),
        ],
    ),
);
}

Hozircha yaxshilik qilyapmiz !! Input Biz kirish elementi, ro'yxat tugmasi va kinda tugmasini yuborish uchun konteyner yaratdik. onPressed funktsiyalar hozircha bo'sh, biz keyinroq ishlaymiz.

Endi keling, iskala tanamizga qaytaylik. Tana kodini quyidagicha tahrirlang:

tanasi: yangi ustun (
  bolalar:  [
      yangi moslashuvchan (
          bola: yangi ListView.builder (
              to'ldirish: yangi EdgeInsets.all (8.0),
              teskari: noto'g'ri,
              itemBuilder: (_, int indeksi) => nol,
              itemCount: 1,
          ),
      ),
      yangi Divider (balandligi: 1,0),
      yangi konteyner (
          bezatish: yangi BoxDecoration (
              rang: Theme.of (kontekst). karta rangi),
          bola: _createInputContainer (),
      ),
  ],
)

Mayli, hozir tana deyarli tayyor. Bizda ro'yxat, ro'yxat elementlari va kiritish elementlari o'rtasida bo'linuvchi mavjud. Ko'rib turganingizdek, men _createInputContainer () vidjetini idishning bolasi sifatida ishlatganman. Kodni toza va tartibli saqlashning yaxshi usuli.

Ishonamanki, barchangiz hozircha yaxshi

Rostini aytsam, bu mening birinchi darsim, shuning uchun men hayajondaman. Mening repetitorlik qilish usulim tushunarli ekanligiga ishonchim komil emas, lekin ishonaman, bu

Keling, qiladigan narsalar to'g'risida gaplashaylik

  1. _HandleSubmissions metodining ichida yarating.
  2. Taqdim etilgan matnni yangi ro'yxat elementi sifatida qo'shing va ularni namoyish eting.
  3. Bizning foydalanuvchilarimizga qulay interfaol ro'yxatni tuzing.
  4. Loyihaga Firebase ma'lumotlar bazasini qo'shing.

Kelinglar!

Agar foydalanuvchi kiritishi bilan ishlaydigan oddiy dastur haqida o'ylasak, birinchi narsa ongga tushgandan keyin kiritishni tozalaydi.

void _handleSubmissions (String newItem) {
    _textController.clear ();
}

va yuborish tugmasini quyidagicha o'zgartiring

yangi konteyner (
    bola: yangi IconButton (
        rang: Colors.red,
        belgi: yangi piktogramma (Icons.send),
        onPressed: () {
            _handleSubmissions (_textController.text) // buni o'zgartiring
        }),
),

endi foydalanuvchilar kiritishni topshirishlari mumkin, va dastur kirishni boshqarishi mumkin, asosan yuborishdan keyin kirish maydonini tozalaydi.

Endi biz ro'yxat elementlarini ko'rsatadigan vidjet yaratamiz. Avval biz bitta elementni aks ettiradigan vidjetni yaratishimiz kerak. StatsizWidget yarataylik va uni ListItem deb nomlaymiz va uni _MyHomePageState tashqarisiga qo'yamiz.

class ListItem StatelessWidget kengaytiradi {
    ListItem ({this.itemName});
    satrning oxirgi elementiName;
    @ sayohat
    Vidjetlarni yaratish (BuildContext konteksti) {
    yangi konteynerni qaytarish (
        chegarasi: const EdgeInsets.simmetrik (vertikal: 10.0),
        
    );
}
}

Yangi konteynerda biz 10.0 qiymatga ega nosimmetrik vertikal chegarani o'rnatdik, chunki aks holda list elementlari bir-biriga juda yaqin ko'rinardi. Bizga salqin qichqiriq kerakmi? Later Keyinchalik ko'proq uslubni qo'shamiz, deb tashvishlanmang.

Keyin bola elementi sifatida biz o'z farzandlarini gorizontal qatorda ko'rsatadigan Row vidjetini qo'shamiz.

bola: yangi qator (
    crossAxisAlignment: CrossAxisAlignment.start, // yaxshi;)
     bolalar:  [
         yangi ustun (
             crossAxisAlignment: CrossAxisAlignment.start,
              bolalar:  [
                  yangi konteyner (
                      bola: yangi Matn (itemName), // bu element nomi
                   ),
              ],
          ),
     ],
),

Xo'sh, ListItem vidjetining to'liq kodi quyidagicha:

class ListItem StatelessWidget kengaytiradi {
    ListItem ({this.itemName});
    satrning oxirgi elementiName;
    @ sayohat
    Vidjetlarni yaratish (BuildContext konteksti)
        yangi konteynerni qaytarish (
            chegarasi: const EdgeInsets.simmetrik (vertikal: 10.0),
            bola: yangi qator (
                crossAxisAlignment: CrossAxisAlignment.start,
                bolalar:  [
                    yangi moslashuvchan (
                        yangi ustun (
                        crossAxisAlignment: CrossAxisAlignment.start,
                        bolalar:  [
                            yangi konteyner (
                                bola: yangi Matn (element nomi),
                            ),
                    ),
                        ],
                    ),
                ],
            ),
        );
    }
}

Xo'sh, endi yana _MyHomePageState-ga qaytamiz, ushbu qatorni qo'shamiz

yakuniy ro'yxat  _shopItems =  [];

Hozirda biz xaridlar ro'yxati elementlarini List vidjetida ushlab turamiz. Ilovadan chiqqandan so'ng, ushbu ro'yxat yana bo'sh bo'ladi, shuning uchun bizda ro'yxat bo'yicha Firebase bor.

Bizning sevimli _handleSubmissions usuli bizni kutmoqda. Hozirgi paytda u biroz e'tibor talab qiladi.

void _handleSubmissions (String newItem) {
    _textController.clear ();
    if (newItem.trim (). uzunligi> 0) {
        ListItem listItem = yangi ListItem (
            itemName: newItem, // ListItem vidjetini initsializatsiya qiling va foydalanuvchining kirishini misol qiymati sifatida tayinlang.
        );
        setState (() {
            _shopItems.insert (0, listItem);
        });
        // Ushbu ob'ektning ichki holati o'zgarganligi to'g'risida freymga xabar bering.
    }
}

Va ushbu qismning yakuniy bosqichi sifatida asosiy vidjetimiz tanasidagi ListView-ga o'ting

bola: yangi ListView.builder (
    to'ldirish: yangi EdgeInsets.all (8.0),
    teskari: noto'g'ri,
    itemBuilder: (_, int indeks) => _shopItems [index], // buni o'zgartiring
    itemCount: _shopItems.length, // buni o'zgartiring
),

Ushbu modifikatsiyadan oldin bizda "elementBuilder" funktsiyasi nolga teng edi. Belgilangan _shopItems indeksida ro'yxat elementini tuzish uchun biz uni o'zgartirdik va elementning miqdorini _shopItems uzunligiga o'zgartirdik.

Buni jonli sinab ko'raylik:

Men faqat iPhone X-ni dasturni sinab ko'rish uchun ishlatganimni angladim. Bu erda Google Pixel 2 XL-ning surati. Jin ursin!

O'ylaymanki, hamma narsa juda yaxshi ishlamoqda, bundan tashqari men yangi mahsulot qo'shganda, yangi element tepaga qo'shilganda. Men buni boshqa narsalar ustida ishlayotganda aniqlayman

Men bu erda ushbu maqolada tanaffus bermoqchiman, chunki o'quvchilar hamma narsani bitta darslikda bajarishdan charchashlarini istamayman. Ishonamanki, bu erga qadar juda yaxshi ishlar qildik

Keyingi maqolada biz sana / vaqtni amalga oshiramiz, elementni o'chirib tashlaymiz, buyumni o'chirib tashlaymiz, Firebase ma'lumotlar bazasi va hammom yoki oshxona buyumlari kabi belgilangan xarid ro'yxatlarini qilamiz. Bu juda kulgili bo'ladi va siz uchun bu mening so'zim bor

Yuqorida aytib o'tganimdek, bu mening birinchi darsligim, shuning uchun iltimos, menga bu haqda sharhlaringizni va tavsiyalaringizni aytib bering. Men darslik yozishda mening kuchli yoki zaif tomonlarimni tinglashni istardim va o'zimni yaxshilayman !!

Qo'llanmani o'qish va qo'llash paytida, agar sizda yoki kodda biron bir muammoga duch kelsangiz, men bilan bog'laning va men sizga yordam berishga bor kuchimni sarflayman.

Instagram | Elektron pochta