Flutter'dagi 5 ta xatoliklar

Salom hammaga👋

Bugun Flutter'da dasturchilarni chalkashtirishi mumkin bo‘lgan ba’zi qiyinchiliklar va xatoliklar haqida gaplashamiz.

1. setState()dan noto‘g‘ri foydalanish

Ha bilaman, hozir aytasiz setState() oddiyku hamma biladi deb lekin ishoning 1-2 yil tajribaga ega bo'lgan Flutter dasturchilarni ham ko'rdim ishni tezroq bitirishim kerak deb samarali bo'lgan to'g'ri State Management'dan emas balki istalgan joyiga setState() dan foydalanib ketgan natijada esa dasturga katta yuklama berib qo'ygan. Dasturni keraksiz joylari ham qayta yuklanib chiziladi. Bu esa yaxshi emas.

Xato nimada?

Xato shunda yoki setState()dan bilmasdan noto'g'ri foydalanadilar yoki shoshganidan ishlasa bo'ldiku deb ketaveradi. Bu esa widget daraxtini ortiqcha qayta chizishiga olib keladi, natijada dastur samaradorligi pasayadi va kodni tushunish qiyinlashadi.

To‘g‘ri yondashuv qanday?

Ko‘proq samarali bo‘lgan state boshqaruvi uslublarini qo‘llang. Masalan, Provider yoki Riverpod kabi zamonaviy state management vositalaridan foydalanib, biznes mantiqni UI’dan ajratishingiz mumkin. Bu esa faqat kerakli qismlarni yangilashni ta’minlaydi va dastur tezligini oshiradi.

Iltimos 5 daqiqa vaqt tejayman deb butun dasturni ishlashiga yomon ta'sir qilmang

Noto‘g‘ri yondashuv:

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++; // Hisoblagichni `setState` orqali oshirish
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('$_counter'),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: Text('Oshirish'),
            ),
          ],
        ),
      ),
    );
  }
}

To‘g‘ri yondashuv (Provider yordamida):

// ChangeNotifier sinfini yaratish
class CounterModel extends ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners(); // O‘zgarishlar haqida xabar berish
  }
}

// State management uchun Provider'dan foydalanish
class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => CounterModel(),
      child: CounterScreen(),
    );
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var counter = Provider.of<CounterModel>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('${counter.counter}'),
            ElevatedButton(
              onPressed: counter.increment,
              child: Text('Oshirish'),
            ),
          ],
        ),
      ),
    );
  }
}

2. Global o‘zgaruvchilar va singletonlardan foydalanish

Xato nimada?

Global o‘zgaruvchilar va singletonlardan foydalanish dastlab qulay bo‘lib ko‘rinsa-da, ularning qator muammolari bor:

• Xotira isrof bo‘lishi: Global o‘zgaruvchilar doimiy ravishda xotirani band qiladi, bu esa xotira to'lishiga olib kelishi mumkin.
• O'zgartirish qiyinlashadi: Kod qismlari o‘rtasida mustahkam bog‘lanish yaratiladi, bu esa kodni test qilish, u bilan qayta ishlash va yangilashni qiyinlashtiradi.
• Kutilmagan xatolar: Bir vaqtning o‘zida bir nechta joyda global o‘zgaruvchidan foydalanish noto‘g‘ri xatti-harakatlarga olib kelishi mumkin.

To‘g‘ri yondashuv qanday?

GetIt kabi dependency injection vositalaridan foydalaning. Bu metodlar yordamida global o‘zgaruvchilar o‘rnini bosuvchi modulli va testga yaroqli kod yaratish mumkin.

Noto‘g‘ri yondashuv:

int globalCounter = 0;

class GlobalCounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Global Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('$globalCounter'),
            ElevatedButton(
              onPressed: () {
                globalCounter++; // Global hisoblagichni oshirish
              },
              child: Text('Oshirish'),
            ),
          ],
        ),
      ),
    );
  }
}

To‘g‘ri yondashuv (GetIt yordamida):

GetIt getIt = GetIt.instance;

class CounterService {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
  }
}

void setup() {
  getIt.registerSingleton<CounterService>(CounterService());
}

class GetItCounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    setup();
    var counterService = getIt<CounterService>();

    return Scaffold(
      appBar: AppBar(
        title: Text('GetIt Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('${counterService.counter}'),
            ElevatedButton(
              onPressed: counterService.increment,
              child: Text('Oshirish'),
            ),
          ],
        ),
      ),
    );
  }
}

3. BuildContextdan noto‘g‘ri foydalanish

BuildContextni to‘g‘ri tushunish va ishlatish muhim. Uni noto‘g‘ri ishlatish kutilmagan xatolarga olib kelishi mumkin.

Oddiy misol

Xato:

@override
void initState() {
  super.initState();
  MediaQuery.of(context).size.width; // Noto‘g‘ri joyda ishlatilgan
}

To‘g‘ri yondashuv:

@override
Widget build(BuildContext context) {
  return Text('${MediaQuery.of(context).size.width}'); // To‘g‘ri joyda ishlatilgan
}

4. Ko‘p darajali vidjetlar ( nesting widgets)

Xato nimada?

Ko‘p darajali vijdetlar kodni tushunishni qiyinlashtiradi va dastur ishlashini sekinlashtiradi.

Yechim:

• Kodni bo‘laklarga bo‘ling va alohida widgetlar yarating.
• Custom (maxsus) widgetlardan foydalaning.
• Layout’ni to‘g‘ri tashkil qilish uchun Row, Column, Wrap kabi mos widgetlardan foydalaning.

5. Tavsiya etilgan eng yaxshi amaliyotlarga rioya qilmaslik

const konstruktorlardan foydalanish:

Statik widgetlar uchun const konstruktorlardan foydalanib, Flutter dasturining samaradorligini oshiring.

Kalitlardan foydalanish:

Widgetlar holatini saqlab qolish uchun kalitlar (Key) dan foydalaning, ayniqsa ro‘yxatlar va animatsiyalar uchun.

Linting vositalaridan foydalaning:

Kod sifatini yaxshilash uchun dartfmt, dartanalyzer, pedantic kabi vositalarni qo‘llang. Ular sizga xatolaringizni aytib turadi.

Bu maslahatlar yordamida Flutter dasturlaringizni mukammal darajaga olib chiqishingiz mumkin. Agar sizga ushbu qo‘llanma yoqqan bo‘lsa, faol bo‘ling va biz bilan o‘z tajribangizni bo‘lishing! 🚀✨