Flutter တွင်ပါဝင်သော Keys များ

Flutter နဲ့ app တွေရေးတဲ့အခါ content ပြောင်းလဲမှုတွေ, ရှုပ်ထွေးတဲ့ UI များကို ကိုင်တွယ်ရာမှာ widget တွေရဲ့ state နှင့် identity ကို ထိန်းသိမ်းထားဖို့ဆိုတာ ခက်ခဲမှုတစ်ခုဖြစ်နိုင်ပါတယ်။ ဒီအချိန်မှာ GlobalKey, ValueKey, ObjectKey, UniqueKey ဆိုတဲ့ key တွေကို အသုံးပြုပြီးတော့ လွယ်ကူအောင် ပြုလုပ်လို့ရပါတယ်။ ဘယ်နေရာမှာ ဘယ်လို key ကို အသုံးပြုမလဲဆိုတာကို ဒီ article မှာ ဆက်ပြီး လေ့လာကြည့်ရအောင်ပါ။

1. GlobalKey

GlobalKey ဆိုတာကတော့ အထူးသီးသန့် unique key တစ်ခုဖြစ်ပြီး၊ widget tree ရဲ့ ဘယ်နေရာကမဆို widget နဲ့ သူ့ရဲ့ state ကို access လုပ်နိုင်ဖို့ရာ အသုံးပြုပါတယ်။ widget tree တခုလုံးထဲမှာလဲ သူ့ကို သတ်မှတ်ထားတဲ့ key ဟာ unique ဖြစ်နေပါလိမ့်မယ်။ widget ရဲ့ state ကို တခြားတနေရာကနေ သိချင်တဲ့အခါ၊ ပြောင်းလဲချင်တဲ့အခါ အထူးသုံးတဲ့ key ဖြစ်ပါတယ်။

သူ့ကိုတော့ form တွေကို handle လုပ်တဲ့အခါ အသုံးများပါတယ်။

MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GlobalKey Example')),
      body: Form(
        key: _formKey,
        child: Column(
          children: <Widget>[
            TextFormField(
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter some text';
                }
                return null;
              },
            ),
            ElevatedButton(
              onPressed: () {
                if (_formKey.currentState?.validate() ?? false) {
                  // Process data
                }
              },
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

2. LocalKey

LocalKey ဆိုတာကတော့ widget tree ရဲ့ တချို့နေရာတွေမှာရှိတဲ့ widget တွေကို ခွဲခြားနိုင်ဖို့အသုံးပြုတဲ့ key တွေရဲ့ base class ပဲ ဖြစ်ပါတယ်။ LocalKey ကို ValueKey, ObjectKey, နှင့် UniqueKey ဆိုပြီးတော့ အမျိုးအစားတွေ ခွဲထားပါတယ်။ သူတို့ကိုတော့ widget tree ရဲ့ နေရာတိုင်းကနေ အသုံးပြုဖို့မဟုတ်ဘဲ widget list တွေထဲမှာရှိတဲ့ widget တခုချင်းစီကို unique ဖြစ်ချင်တဲ့အခါ အသုံးပြုပါတယ်။

ValueKey

ValueKey ဆိုတာကတော့ တန်ဖိုးတစ်ခုကို အသုံးပြုပြီး widget တွေကို ခွဲခြားပါတယ်။ ဒါကို list ဒါမှမဟုတ် grid ထဲမှာရှိတဲ့ widget တွေရဲ့ state ကို ထိန်းသိမ်းထားရန်လိုအပ်တဲ့အချိန်မှာ အသုံးပြုဖို့ သင့်လျော်ပါတယ်။

List<String> items = ['Item 1', 'Item 2', 'Item 3'];

@override
Widget build(BuildContext context) {
  return ListView(
    children: items.map((item) {
      return ListTile(
        key: ValueKey(item),
        title: Text(item),
      );
    }).toList(),
  );
}

ObjectKey

ObjectKey ကတော့ value တခုချင်းဆီနဲ့ မဟုတ်ဘဲ object ကို အသုံးပြုပြီး widget များကို ခွဲခြားချင်တဲ့အခါ အသုံးပြုပါတယ်။ ဒါကိုတော့ value အားဖြင့် ထပ်ခါထပ်ခါ ပါတာတွေ ရှိတဲ့အခါ object တခုလုံးနဲ့ ခွဲခြားမှုလိုအပ်တဲ့ အခြေအနေမျိုးတွေမှာ အသုံးပြုဖို့ သင့်လျော်ပါတယ်။

class MyObject {
  final int id;
  final String name;

  MyObject(this.id, this.name);
}

List<MyObject> items = [
  MyObject(1, 'Item 1'),
  MyObject(2, 'Item 2'),
  MyObject(3, 'Item 3'),
];

@override
Widget build(BuildContext context) {
  return ListView(
    children: items.map((item) {
      return ListTile(
        key: ObjectKey(item),
        title: Text(item.name),
      );
    }).toList(),
  );
}

UniqueKey

UniqueKey ကိုတော့ ဘာကိုမှ အခြေခံတာမျိုးမဟုတ်ဘဲ unique key တစ်ခု လိုချင်တဲ့အခါ အသုံးပြုပါတယ်။ value (သို့) object တခုခုကို key အဖြစ် အသုံးပြုဖို့ မလိုအပ်တဲ့အချိန်မှာ instance တစ်ခုချင်းစီကို unique identify လုပ်ချင်တဲ့ အခြေအနေမျိုးတွေမှာ အထူးသင့်လျော်ပါတယ်။

@override
Widget build(BuildContext context) {
  return ListView(
    children: List.generate(3, (index) {
      return ListTile(
        key: UniqueKey(),
        title: Text('Item $index'),
      );
    }),
  );
}

အဆင်ပြေသော Key ရွေးချယ်ခြင်း

• GlobalKey: widget tree ရဲ့ အပြင်မှ widget ရဲ့ state ကို access လုပ်ရန်နှင့် action များကို တိုက်ရိုက်လုပ်ရန်လိုအပ်သောအချိန်တွင် အသုံးပြုပါ။
• ValueKey: value တစ်ခုအပေါ်မူတည်ပြီး widget များကို ခွဲခြားရန်လိုအပ်သော အချိန်တွင် အသုံးပြုပါ၊ အထူးသဖြင့် list (သို့) grid များတွင် အသုံးပြုပါ။
• ObjectKey: object တစ်ခုအပေါ်မူတည်ပြီး widget များကို ခွဲခြားရန်လိုအပ်သောအချိန်တွင် အသုံးပြုပါ၊ အထူးသဖြင့် object မှာ value key အသုံးပြုဖို့ duplicate value တွေပါဝင်နေသောအခါ အသုံးပြုပါ။
• UniqueKey: value (သို့) object တစ်ခုကို key အဖြစ် မရနိုင်သောအချိန်တွင် အသုံးပြုပါ၊ instance တစ်ခုချင်းစီကို unique identify လုပ်နိုင်ရန် အသုံးပြုပါ။

Flutter တွင် Key တွေဟာ widget tree အတွင်းမှာရှိတဲ့ widget တွေရဲ့ state နဲ့ identity ကို ထိန်းသိမ်းထားရန် အဓိကရည်ရွယ်ပါတယ်။ Key တွေရဲ့ ရည်ရွယ်ချက်နဲ့ ဘယ်လိုအခြေအနေမျိုးမှာ ဘယ်လို Key ကို အသုံးပြုရမယ်ကို နားလည်ခြင်းဖြင့် ပိုမို ရှင်းလင်းပြီး ကောင်းမွန်တဲ့ app တွေကို တည်ဆောက်ဖို့ အကူအညီ ဖြစ်စေနိုင်ပါတယ်။

Happy Coding 🧑🏻‍💻