#Onam

Ertalabdan Onam telefon qilib yig'lamsirab gapirdi, nima bo'ldi ekan deb o'ylandim. So'rasam "Seni sog'indimda bolam, tushumga kirib qolibsan" dedi. Ichimda bir nima uzulib bo'g'zimga kelib, ko'zimdan yosh chiqdi. O'zi nima qilib yuribman bu yerlarda degan savol keldi. Onamga har kuni telefon qilaman. Lekin baribir yuzma-yuz diydorni sog'inadi odam. Balki rostdan bag'ritoshdirman. Uzoqda yashash, ishlash yaxshi lekin Ota-ona ichida nimalar yutib sog'inib o'tirganini biz sezmaymiz. Ularga pul topsam bo'ldida deyish mumkin lekin ularga endi pul emas ko'proq e'tibor kerakligini bilmay qolamiz... bilganimizda kech bo'lib qolmasa deyman.

#savol

Nega flutter 3 layoutga bo'lingan widget, element, render tree ?

- Bu bo'linish fluttering samarador ishlashi va UI yangilanishlarni optimallashtirishga yordam beradi. Har biri bilan qisqacha:

Widget tree (WT) - dasturchi tomondan yoziladigan barcha kodlar bo'lib UI tuzulishni ifodalaydi, bunda UI mavjud yoki mavjudmasligi bilinmaydi. build() metodi chaqirilganda har doim yangi widget hosil qilinadi. WT faqat deklarativ bo'lib, UI ning haqiqiy holatini saqlamaydi.

Element tree(ET) - WT ning real ishlov berilgan versiyasi, bunda flutter qaysi widgetlar mavjud va qanday bog'langanligini aniqlaydi.
- ET WT va Render tree (RT) o'rtasida ko'prik vazifasini bajaradi; - UI ning stateini saqlaydi;
- statelessElement va StatefulElement obyektlari mavjud;
- agar build() chaqirilsa, WT yangilanadi lekin faqat kerakli qismlar ET da o'zgaradi;
- kerakli qismlarni eslab qolishi va qayta ishlatishi mumkin;
❓ Nega kerak ? Agar har safar butun UI qayta chizilsa, u juda sekin ishlaydi. Element Tree esa faqat kerakli qismlarni o‘zgartirishga imkon beradi, bu esa samaradorlikni oshiradi.

Render tree (RT) - ekranda ko'ringan haqiqiy UI qismlarni hosil qiladi va chizadi;
- UI ning fizik tasvirlarini saqlaydi (size, position, paint);
- RenderObject larni boshqaradi ;
- Flutter SKIA orqali GPU yordamida RT elmentlarini ekranga chizadi;
❓Nega kerak ? RT UI ni qanday chiziqsh kerakligini optimallashtiradi va keraksiz qayta chizishlarni oldini oladi;

⚠️ Hot reload qilganda WT qayta yangilandi lekin ET va RT o'zgarishlarni minimallashtiradi;

#savol

Widget lifecycle ni hamma biladi lekin Element lifecycle nima ?

Element lifecycle quydagicha ishlaydi:
1️⃣ createElement() – widget birinchi martta chizilganda flutter ushubu metodni chaqiradi va widget uchun yangi element hosil qiladi;
2️⃣ mount() – element yaratilgach, u element tree ga qo'shiladi, agar statefulElement bo'lsa initState() chaqiriladi;
3️⃣ update() – agar setState() chaqirilsa yoki o'rniga boshqa o'xshash widget kelsa ushbu metod chaqiriladi. Bunda flutter widget tree ning eski va yangi versiyasini solishtiradi:
- agar widget o'zgarmagan bo'lsa elementni qayta ishlatadi;
- agar widget o'zgargan bo'lsa update() ni chaqiradi;
- agar turlar har hil bo'lsa (ya'ni Text o'rniga Container) unmount() -> createElement() ishlaydi;
4️⃣ deactivate() – agar widget WT dan olib tashlansa va qayta ishlatilishi mumkin bo'lsa ushbu metod chaqiriladi;
❓Qachon ishlaydi ? agar widget key bilan ishlatilgan bo'lsa flutter uni saqlaydi va qayta ishlatadi. Masalan ListView.builder() dagi elementlar deactivate bo'lib qayta ishlatiladi;
5️⃣ unmount() – agar element kerak bo'lmasa flutter ushnu metodni chaqiradi va uni butunlay o'chirib tashlaydi; dispose() oxirgi chaqiriladigan metod bo'lib barcha resuslarni tozalaydi va xotirani bo'shatadi;

Element Lifecycle haqida Qiziqarli Faktlar

✅ Element UI ning haqiqiy holatini saqlaydi, Widget esa faqat deklarativ UI modelidir.
✅ StatelessWidget har safar yangidan yaratiladi, lekin Element qayta ishlatilishi mumkin.
✅ dispose() har doim unmount() chaqirilishidan oldin chaqiriladi.
✅ ListView.builder() kabi widgetlar Element va RenderObjectlarni qayta ishlatadi, bu esa samaradorlikni oshiradi;

#thoughts

They say: “If you truly love someone, fight for them”. But they also say: “If you truly love someone you have to let them go”.

#flutter
Flutter 3.29 foydalanishga chiqdi. Shu bilan birgalikda Dart 3.7.0 ham chiqdi.

Flutterda ko'pgina yangilikar bor:
- Cupertino Widgetlarning ishlash samaradorligi oshirilgan va yangi widgetlar qo'shilgan;
- Impller engine ishlashi stabillashdi;
- Material uchun yangi page transition qo'shilibdi;
- Material 3 ning so'ngi dizaynlari kirtildi;
- Yangi DevTool inspektor;
Va boshqa yangiliklar taqdim etildi.

P.s/. Yangilashga arziydimikin nima deysizlar ?

Qo'lim qichib 😄 flutterni 3.29 yangiladim. iOS da chiroyli ishlamoqda lekin Androidda build qilish jarayonida

import io.flutter.plugin.common.PluginRegistry.Registrar

xatolik sodir bo'ldi, boshida bu packagelarni eskirganidan deb o'ylab barchasini eng so'ngi versiyaga yangiladim lekin bu xato barataraf qilinmadi. So'ngra bir yechim chiqdi ya'ni Flutter va Android Studio ni butunlay o'chirib fayllarni tozalab qayta o'rnatish tanlovi berilgan va bu ishlagan lekin menda hozir bunga vaqt bo'lmagani uchun eng yaxshi yo'li pastroq versiyaga downgrade qilish bo'ldi.

Endi buni flutter team hal qiladi yoki barcha packagelar flutterning yangi versiyasiga moslab yangi versiya chiqaradi.

P.s/ Men 3.24.5 verisyadaman va stabil ishlab kelyapman 3.27 da nima gaplar ishlatganlar bormi ?

Nimasi bu azoblash hizmatimi bu ? 🤣🤣

🐱 - Qarada, o’sha paddingni olib containerni o’zini paddingidan foydalansak bo’ladimi ?

P.s/ Baxt - u bilan birga ko’d yozish 😅😅.

Assalomu alekum hammag hayrli kun.

#savol

Flutterda Platform Channellar ?

- Flutterda Platform Channellar flutter ilovalari va native (Android va iOS) o'rtasida aloqa o'rnatish uchun ishlatiladi. Bu bilan Dart qismidan Androidning Kotlin/Java, iOS'ning esa Swift/Objectiv-C qismiga so'rov jo'natish va javob olish mumkin.

Platform Channellar 3 ga bo'linadi:

1. Method Channel - Bir marttalik so'rov berish va javob qabul qilish uchun ishlatiladi. Flutter native qismga so'rov jo'natadi va protses qilingan datani qaytib oladi;

2. Event Channel - native qismdan flutter codega malumotlarni doimiy ravishda uzatish uchun ishlatiladi. Bu native tomondan dart qismga bir tomonlama chanel yaratadi va dart qismga event yoki oqimni asinxron tarzda jo'natishga yordam beradi. Bu native tomondan doimiy tarzda sensor malumot, wi-fi holati yoki shunga o'xshash doimiy uzatiladigan data uchun ishlatiladi;

3. BasicMessageChannel - Dart va native kod o'rtasida ikki tomonlama asinxron messagelarni jo'natish va qabul qilish uchun ishlatiladi. Bu doimiy ravishda ikki tomonlama malumot almashish uchun ishlatiladi.

#savol

Flutter arxitekturasi qanday ?

- Flutter arxitekturasi uch qismga bo'linadi:
1. Flutter Framework;
2. Flutter Engine;
3. Embedder (Platform Specific Code);
Va bularning o'z vazifasi bor :

1. Flutter Framework (Dart)

Flutter-ning yuqori darajadagi qismi bo‘lib, u Dart tilida yozilgan. Asosan uchta qatlamdan iborat:
• Material/Cupertino → UI komponentlari (Material yoki Cupertino vidjetlari).
• Widgets → Flutter-ning UI qurish uchun ishlatiladigan asosiy qatlami. Stateless va Stateful Widget-lar shu yerda joylashgan.
• Rendering, Gestures, Animation → UI ni chizish, animatsiyalar va foydalanuvchi harakatlariga javob berish.

2. Flutter Engine (C/C++)

Bu Flutter-ning “dvigateli”. Ushbu qism:
• Impeller grafik kutubxonasi yordamida UI ni chizadi.
• Dart kodini nativeda ishlashga aylantiradi (Dart VM yoki AOT - Ahead of Time Compilation orqali).
• Animatsiyalar va shriftda ishlashni optimallashtiradi.

3. Embedder (Platform Specific Code)

Bu qism Flutter ilovasini Android yoki iOS kabi platformalarda ishlashiga moslashtiradi.
• Android → MainActivity.kt yoki MainActivity.java (Kotlin/Java).
• iOS → AppDelegate.swift yoki AppDelegate.m (Swift/Objective-C).
• Linux, macOS, Windows → Tegishli native kodlar bilan ishlaydi.

Flutter Engine va Embedder birgalikda Flutter ilovasini platformada ishga tushirishga yordam beradi.

#savol

Ushbu dart code run qilingach nima bo'ladi ?

- Avvalambor hashCode nima ekanini ko'ramiz - Dartda har bir obektning hashCode bo'lib, u obektning identifikatsiya yoki kontentini ifodalovchi butun son hisoblanadi. U Set va Map collectionlarda lookuplar tezligni oshirish uchun ishlatiladi.

- interger'lar uchun hashCode ularning qiymatiga teng;
- string'lar uchun esa Dart hashing funksyalarni ishlatadi;

demak quyidagicha javob olish mumkin:

12345
12345
12345
123456712345 // "12345" string uchun chiqishi mumkin bo'lgan hashCode;
123456712345
123456712345

#savol

Flutterda KEY lar qaysilar va nima vazifani bajaradi ?

Flutterda KEY — bu widgetlarni identifikatsiya qilish va ularning holatini boshqarish uchun ishlatiladigan maxsus obyekt.
Key asosan:
1. Widgetlarni identifikatsiya qilish – Agar bir xil turdagi bir nechta widget bo‘lsa, Flutter ularni Key yordamida ajratib oladi.
2. Holatni saqlash (State Preservation) – StatefulWidget lar qayta qurilganida, ularning oldingi holatini yo‘qotmasligi uchun Key ishlatiladi.
3. Animatsiyalar va o‘tishlar (Transitions) – Key yordamida widgetlar orasida silliq animatsiyalar amalga oshiriladi.
4. ListView, GridView va boshqa ro‘yxatlar bilan ishlash – Key ro‘yxat elementlarini aniq aniqlash va optimallashtirish uchun ishlatiladi.

Key'ning turlari:

1️⃣ ValueKey - bu kalit qiymat asosida yaratiladi. Agar qiymat o‘zgarmasa, Flutter widgetni qayta yaratmaydi.

 Widget myWidget = Container(key: ValueKey('my_key'), child: Text("Salom")); 

2️⃣ ObjectKey - bu kalit obyektlar orqali ishlaydi. Obyektning hashCode yoki == operatori orqali solishtiriladi.

 class User {
  final String name;
  User(this.name);
}

User user = User('Isroiljon');
Widget myWidget = Container(key: ObjectKey(user), child: Text(user.name));

3️⃣ UniqueKey -bu har safar yangi kalit yaratadi va widgetni har doim yangilashga majbur qiladi.

 Widget myWidget = Container(key: UniqueKey(), child: Text("Salom"));

☝️ Eslatma: UniqueKey bir xil widgetlar uchun har safar yangi identifikator yaratib, ularning qayta ishlatilishiga yo‘l qo‘ymaydi.

4️⃣ GlobalKey - bu StatefulWidget lar uchun eng kuchli Key bo‘lib, u nafaqat widgetni identifikatsiya qiladi, balki uning State obyektiga ham murojaat qilish imkonini beradi.

 final GlobalKey<FormState> formKey = GlobalKey<FormState>();

Form(
  key: formKey,
  child: TextFormField(
    validator: (value) => value!.isEmpty ? "Majburiy maydon" : null,
  ),
); 

📌 Key larni noto‘g‘ri ishlatish ortiqcha resurs sarfiga olib kelishi mumkin. Eng yaxshi usul – faqat kerakli joylarda ishlatish.

#situation

Sizlarni bilmadimu, men uchun bugungi kun anchagina og'ir o'tadiganga o'xshaydi 😉.

Something new 🙃

Day11 - Ozgina tanaffusdan keyin qayta faolyatdaman. Bu yerga joylash esimdan chiqibdi 😁