Flutter nima va mobil dasturlashni u bilan qanday boshlash kerak

Telefoningizdagi ilovalarni bir eslang: bank, taksi, do'kon, kurslar, xabar almashish. Ularning har biri ortida mobil dasturchi turibdi. Mobil dasturlashni o'rganmoqchi bo'lgan odam esa birinchi qadamdayoq savolga duch keladi: Android uchun alohida, iPhone uchun alohida o'rganish kerakmi yoki bitta yo'l bormi?

Ana shu savolga eng ko'p beriladigan javoblardan biri Flutter. Bu maqolada Flutter nima ekanini, qanday ishlashini, boshqa variantlardan nimasi bilan farq qilishini va uni noldan o'rganishni qayerdan boshlash kerakligini sodda tilda tushuntiramiz.

Flutter nima

Flutter — Google tomonidan yaratilgan ochiq kodli vosita bo'lib, u yordamida bitta kod bazasidan bir nechta platforma uchun ilova yaratish mumkin. Asosiy maqsad mobil ilovalar: Android va iOS. Shu bilan birga Flutter'da veb-sayt hamda Windows, macOS va Linux uchun dasturlar ham yozsa bo'ladi.

Oddiy misol bilan tushuntiramiz. An'anaviy yo'lda bitta ilovani ikki marta yozasiz: Android uchun Kotlin tilida, iPhone uchun Swift tilida. Bu ikki xil jamoa, ikki xil kod va har bir o'zgarishni ikki joyda qilish degani. Flutter'da esa kodni bir marta yozasiz va undan ham Android, ham iOS uchun ilova olasiz.

Flutter'ning birinchi barqaror versiyasi 2018-yil oxirida chiqqan. O'shandan beri u faol rivojlanib kelmoqda, uni Google'ning o'zi ham ishlatadi.

Dart: Flutter'ning tili

Flutter ilovalari Dart tilida yoziladi. Dart ham Google'da ishlab chiqilgan va Flutter uchun eng qulay qilib moslashtirilgan.

Dart haqida boshlovchi bilishi kerak bo'lgan asosiy narsalar:

• Sintaksisi tanish. Java, JavaScript yoki C# ko'rgan bo'lsangiz, Dart kodini o'qish qiyin bo'lmaydi. Birinchi til sifatida ham bemalol o'rganiladi.
• Statik tipli. Har bir o'zgaruvchining turi aniq va ko'p xatolarni dastur ishga tushishidan oldin muharrirning o'zi ko'rsatadi.
• Null safety. Til qiymati bo'sh bo'lishi mumkin bo'lgan o'zgaruvchilarni alohida belgilashni talab qiladi. Bu mobil ilovalarda eng ko'p uchraydigan "ilova to'satdan yopilib qoldi" turidagi xatolarning bir qismini oldini oladi.
• Obyektga yo'naltirilgan. Klasslar, obyektlar, meros olish kabi tushunchalar Flutter'da har qadamda ishlatiladi.

Dart'ni Flutter'dan alohida, uzoq o'rganish shart emas. Asosiy sintaksis, funksiyalar, klasslar va asinxron kod (async va await) bilan tanishgach, Flutter'ga o'tib, tilni amaliyotda chuqurlashtirgan ma'qul.

Hamma narsa vidjet

Flutter'ning asosiy g'oyasi: ekrandagi hamma narsa vidjet (widget). Matn vidjet, tugma vidjet, rasm vidjet. Hatto elementlar orasidagi bo'sh joy, ularni qator yoki ustun qilib terish ham vidjet orqali qilinadi.

Ekran mana shu kichik vidjetlarni bir-birining ichiga joylashtirib quriladi. Masalan, kurslar ro'yxati ekrani taxminan shunday tuzilgan bo'lishi mumkin: sahifa, uning ichida sarlavha va ro'yxat, ro'yxat ichida kartalar, har bir kartada rasm, kurs nomi va narx. Bu "konstruktor" tamoyili boshlovchiga tez tushunarli bo'ladi: avval kichik qismlarni yasaysiz, keyin ulardan katta ekran yig'asiz.

Vidjetlar ikki asosiy turga bo'linadi:

• StatelessWidget — o'zgarmaydigan qism. Masalan, kurs nomi yozilgan sarlavha.
• StatefulWidget — foydalanuvchi harakatiga qarab o'zgaradigan qism. Masalan, bosilganda soni ortib boradigan "Savatga qo'shish" tugmasi.

Ilova kattalashgan sari "holat" (state), ya'ni ekranda ko'rsatilayotgan ma'lumotlarni boshqarish muhim mavzuga aylanadi. Oddiy holatlarda setState yetarli, kattaroq ilovalarda esa Provider, Riverpod yoki Bloc kabi yondashuvlar ishlatiladi. Boshlovchi uchun birinchi navbatda setState ni yaxshi tushunish, keyin bitta yondashuvni tanlab o'rganish kifoya.

Flutter tayyor dizayn to'plamlari bilan keladi: Google'ning Material uslubidagi va Apple uslubidagi (Cupertino) vidjetlar. Shuning uchun chiroyli interfeysni noldan chizish shart emas.

Hot reload: o'zgarishni darhol ko'rish

Flutter'ni o'rganishni yoqimli qiladigan narsalardan biri hot reload. Kodda tugma rangini yoki matnni o'zgartirib saqlaysiz va natija telefonda yoki emulyatorda deyarli darhol paydo bo'ladi. Ilova qaytadan ishga tushmaydi, siz ochib turgan ekran va kiritgan ma'lumotlar joyida qoladi.

Boshlovchi uchun bu juda muhim. Har bir kichik o'zgarishdan keyin uzoq kutish kerak bo'lmagani uchun ko'proq sinab ko'rasiz, xatoni tezroq topasiz va natijani ko'rib turish motivatsiyani saqlaydi.

Flutter, native va React Native

Mobil ilova yaratishning boshqa yo'llari ham bor. Ular bilan solishtirsak, Flutter'ning o'rni aniqroq ko'rinadi.

Native dasturlash — har bir platforma uchun uning "ona" tilida yozish: Android uchun Kotlin, iOS uchun Swift. Bu yo'l platformaning barcha imkoniyatlariga to'g'ridan-to'g'ri kirish beradi, lekin ikki platforma uchun ikki xil kod va ikki xil bilim talab qiladi.

React Native — Meta (Facebook) yaratgan vosita. Unda ham bitta kod bazasidan ikki platforma uchun ilova yoziladi, lekin til JavaScript yoki TypeScript bo'ladi. Veb-dasturlashdan, ayniqsa React'dan kelganlar uchun qulay.

Flutter esa interfeysni o'zining grafik dvigateli orqali o'zi chizadi. Shu sababli ilova Android'da ham, iOS'da ham bir xil ko'rinadi va dizaynerning maketini aniq takrorlash oson.

Bu yerda "eng yaxshi" variant yo'q. Lekin noldan boshlayotgan va ikki platforma uchun birdaniga ilova chiqarmoqchi bo'lgan odam uchun Flutter eng qulay yo'llardan biri.

Flutter qachon mos, qachon mos emas

Flutter yaxshi tanlov bo'ladigan holatlar:

• Android va iOS uchun bir vaqtda ilova kerak, jamoa esa kichik;
• ilovada chiroyli, o'ziga xos dizayn va animatsiyalar muhim;
• g'oyani tezda ishlaydigan ilova (MVP) holatiga keltirib, foydalanuvchilarda sinab ko'rish kerak;
• onlayn do'kon, yetkazib berish, ta'lim, bron qilish, ichki korporativ ilovalar kabi keng tarqalgan turdagi ilovalar.

Boshqa vosita o'ylab ko'rilishi kerak bo'lgan holatlar:

• ilova platformaning o'ziga xos imkoniyatlariga juda chuqur bog'langan bo'lsa (masalan, murakkab fon jarayonlari yoki faqat bitta platformada bor yangi funksiyalar);
• ilova hajmi har bir megabaytgacha muhim bo'lsa: Flutter ilovasi o'z dvigatelini ham birga olib yurgani uchun eng oddiy native ilovadan kattaroq bo'ladi;
• murakkab 3D o'yinlar uchun Unity kabi maxsus o'yin dvigatellari qulayroq.

Yaxshi tomoni shundaki, Flutter'da o'rgangan ko'p narsa (ekranlar tuzilishi, holatni boshqarish, API bilan ishlash, ilovani do'konga chiqarish) keyinchalik native yoki boshqa vositaga o'tsangiz ham kerak bo'ladi.

Boshlash uchun nima kerak

Texnik tomondan talablar katta emas:

• Kompyuter. Windows, macOS yoki Linux. Android uchun ilovani istalgan kompyuterda yozish va sinash mumkin.
• Kod muharriri. VS Code yoki Android Studio, ikkalasi ham bepul va Flutter uchun qo'shimchalarga ega.
• Telefon yoki emulyator. Ilovani o'z telefoningizda yoki kompyuterdagi virtual telefonda ishga tushirasiz.
• iOS uchun Mac. iPhone uchun ilovani yig'ish va App Store'ga yuklash uchun macOS va Xcode kerak. Boshlanishda bu shart emas: o'rganishni Android'da boshlab, iOS'ga keyinroq o'tish mumkin.

Ilovani do'konlarga chiqarish uchun dasturchi akkaunti ochiladi: Google Play'da bir martalik, App Store'da esa yillik to'lov bilan. O'qish davrida bunga ehtiyoj yo'q, ilovani telefonga to'g'ridan-to'g'ri o'rnatib sinaysiz.

O'rganish yo'l xaritasi

Flutter'ni noldan o'rganish uchun taxminiy ketma-ketlik:

1. Dasturlash asoslari va Dart. O'zgaruvchilar, shartlar, sikllar, funksiyalar, ro'yxatlar, klasslar. Avval oddiy konsol dasturlar bilan mashq qiling.
2. Birinchi vidjetlar. Matn, rasm, tugma, qator va ustunlar. Oddiy ekranlarni tayyor dizayn bo'yicha takrorlang.
3. Joylashuv (layout). Ekranni turli o'lchamdagi telefonlarga moslashtirish, ro'yxatlar va aylantiriladigan sahifalar.
4. Navigatsiya va holat. Bir nechta ekranli ilova, ular orasida ma'lumot uzatish, setState, keyin bitta state management yondashuvi.
5. Internet bilan ishlash. REST API'dan ma'lumot olish, JSON, yuklanish va xato holatlarini to'g'ri ko'rsatish.
6. Ma'lumotlarni saqlash. Telefon xotirasida lokal saqlash, Firebase orqali ro'yxatdan o'tish va ma'lumotlar bazasi, push-bildirishnomalar.
7. Sifat. Git, kodni tartibli yozish, oddiy testlar.
8. Do'konga chiqarish. Ilovani Google Play va App Store talablariga tayyorlash.
9. Portfolio loyihasi. Yuqoridagilarning hammasini birlashtirgan, boshqalarga ko'rsatsa bo'ladigan to'liq ilova.

Har bir bosqich oldingisiga tayanadi. Masalan, holatni boshqarishni tushunmasdan API'dan kelgan ma'lumotni ekranda to'g'ri ko'rsatish qiyin bo'ladi.

Boshlovchilarning ko'p uchraydigan xatolari

• Dart'ni o'tkazib yuborish. Tilni bilmasdan to'g'ridan-to'g'ri vidjetlarga o'tsangiz, har bir xato xabari tushunarsiz bo'lib qoladi.
• Bir vaqtda hamma state management'ni o'rganish. Provider, Riverpod, Bloc haqida bahslar ko'p. Avval setState ni tushuning, keyin bittasini tanlang va unda chuqurlashing.
• Faqat video ko'rish. Kod yozib, xato qilib, uni o'zingiz tuzatmaguningizcha bilim mustahkamlanmaydi.
• Paketlarga haddan tashqari tayanish. pub.dev'da deyarli hamma narsa uchun tayyor paket bor, lekin har birini qo'shishdan oldin u nima qilishini va qanchalik qo'llab-quvvatlanishini tekshiring.
• Dizaynga e'tiborsizlik. Mobil ilovada foydalanuvchi tajribasi juda muhim. UX va UI dizayn farqi haqidagi maqolamiz dizayner bilan bir tilda gaplashishga yordam beradi.

Mobil ilova va backend

Ko'pchilik mobil ilovalar yolg'iz ishlamaydi: foydalanuvchilar, buyurtmalar, to'lovlar haqidagi ma'lumot serverda saqlanadi va ilova unga API orqali murojaat qiladi. Kichik loyihalarda bu vazifani Firebase bajaradi. Kattaroq loyihalarda esa alohida backend yoziladi.

Flutter dasturchi uchun backend qanday ishlashini umumiy tushunish katta ustunlik: API bilan muloqot qilish, xatolarni to'g'ri talqin qilish va backend dasturchi bilan ishlash osonlashadi. Bu mavzuga qiziqsangiz, Node.js yoki Go maqolasini o'qib chiqing.

Akademiyadagi Flutter kursi

Yangi Avlod Akademiyasida mobil dasturlash uchun alohida Flutter kursi bor. Kurs dasturi yuqoridagi yo'l xaritasiga mos tuzilgan:

• dasturlash asoslari va Dart tili;
• Flutter vidjetlari va interfeys yaratish;
• navigatsiya va holatni boshqarish;
• REST API, Firebase va lokal ma'lumotlar bazasi;
• ilovani Google Play va App Store'ga chiqarish;
• portfolio uchun real mobil ilova.

Kurs 6 oy davom etadi, boshlang'ichdan o'rta darajagacha, onlayn, haftasiga 3 marta. Dasturlashni umuman noldan boshlayotgan bo'lsangiz, avval Dasturlashni noldan o'rganish maqolasini o'qib chiqing.

Xulosa

Flutter bitta kod bilan Android va iOS uchun ilova yaratish imkonini beradi. Dart tili o'rganish uchun qulay, "hamma narsa vidjet" tamoyili interfeysni tushunarli qiladi, hot reload esa o'rganish jarayonini tezlashtiradi.

Mobil dasturlash sizni qiziqtirsa, uzoq o'ylab o'tirmang: Dart asoslaridan boshlang, birinchi oddiy ilovangizni yozing va uni telefoningizda ishga tushiring. O'z qo'lingiz bilan yasagan ilovani cho'ntagingizda ko'rish keyingi qadamlar uchun eng yaxshi motivatsiya bo'ladi.