Faster programming

ဒီနေ့ clientဆီက order တစ်ခုနဲ့ website အသစ်လုပ်ပေးရတယ်။ လုပ်ရင်းနဲ့ client က website လေးကို download လုပ်လို့ရအောင် button လေးတစ်ခုထည့်ပေးပါတဲ့။ အင်း.. logic ကတော့ ရိုးသားပါတယ်. client ကို website က browser ထဲမှာ runတာပါDownload လုပ်စရာမလိုပါဘူးလို့ ရှင်းပြတော့ client က မယုံသလိုဖြစ်သွားရော။ သူတို့က website ကို local machine ကို download လုပ်ပြီး run ရင် speed ပိုကောင်းမလားလို့ ထင်နေတာတဲ့။ Client တွေရဲ့ perspective နဲ့ တွေးတာကျတော့ တခါတလေ developer တွေထက် ကွဲထွက်နေတတ်သား။ Programming က code ပဲ မဟုတ်ဘူး၊ client ကို နားလည်အောင် ရှင်းပြနိုင်တဲ့ communication skill ပါ တအားအရေးကြီးတယ်ဆိုတာ ဒီနေ့ ထပ်ကို မှတ်သားလိုက်ရတယ်။ ကိုယ့် knowledge ကို client တွေ နားလည်လွယ်အောင် ဘယ်လို share မလဲဆိုတာ တွေးရဦးမယ်။ သင်တို့ရော client တွေနဲ့ communication လုပ်ရင် ဘယ်လို skill တွေ share ပေးလေ့ရှိလဲ။

ဒီနေ့ client ဆီက phone call လေးတစ်ဖုန်းဝင်လာတယ်။ "Website က ordering system မှာ click လိုက်ရင် loading တန်းလန်းကြီးဖြစ်နေလို့တဲ့"။ အင်း... 😅

ကျွန်တော်လည်း အေးဆေးပဲ... "ဟုတ်ကဲ့ client၊ ကျွန်တော် check လိုက်ပါ့မယ်" လို့ပြောပြီး ပြန်ချလိုက်တယ်။

အဲ့ဒီမှာတင် စဉ်းစားခန်း ဝင်ပါလေရော။ Loading တန်းလန်းဖြစ်တယ်ဆိုတာ browser က data တွေကို မရလို့ပဲ။ အဲ့ဒါဆို ဘာကြောင့် data မရတာလဲ။

- Client website မှာ database connection ပြဿနာလား?
- API endpoint က response ပြန်မပေးတာလား?
- Frontend က request ပို့တဲ့ logic မှားနေတာလား?
- Network issue တစ်ခုခုလား?

အဲ့ဒီလိုမျိုး အများကြီး တွေးနေရင်းနဲ့ပဲ client ဆီက website ကို သွားစစ်ကြည့်တယ်။

ထင်တဲ့အတိုင်းပဲ... Client ဘက်က server က storage ပြည့်သွားလို့ upload တင် fail နေတာ။ အဲ့ဒါကြောင့် data တွေ post မဖြစ်၊ response မပြန်နဲ့ loading တန်းလန်းဖြစ်နေတာပေါ့။

တခါတလေ အသေးအမွှားလေးတွေကြောင့် Whole system က hang သွားနိုင်တာကိုး။

Software development ဆိုတာ ဒီလိုပဲ... ဘယ်တော့မှ plan အတိုင်းကြီးဖြစ်မနေဘူး။

ဒီနေ့ client တစ်ယောက်က website မှာ order ဝင်တာကို အချိန်မှီ မသိလိုက်လို့တဲ့။ အဲဒါနဲ့ notification system ကို အမြန်ပြင်ပေးလိုက်ရတယ်။ တကယ်တော့ client က notification ကို email နဲ့ SMS နှစ်မျိုးလုံး လိုချင်တာ။ ဒါပေမဲ့ developer က email ကိုပဲ ထည့်ပေးလိုက်တယ်။ ရေရေလည်လည် အလုပ်ရှုပ်တာပေါ့။

ဒီလိုမျိုး အသေးအမွှား design mistake တွေက အလုပ်ကို ဘယ်လောက် ထိခိုက်နိုင်တယ် ဆိုတာ သေချာမြင်သွားတယ်။ အစကတည်းက client လိုချင်တာကို သေချာနားမလည်ဘဲ ကိုယ်ထင်တာနဲ့ လုပ်လိုက်ရင် နောက်မှ ပြန်ပြင်ရတာ သိပ်ကို ပင်ပန်းတယ်။

တခါတလေ ကိုယ်က developer ဆိုတော့ ကိုယ်အကောင်းဆုံးထင်တာကို client ကို တင်ပြတယ်၊ client ကလည်း လက်ခံတယ်ပေါ့။ ဒါပေမဲ့ တကယ်တမ်းကျ client က အဲဒါကို အသုံးမကျ ဘူးဆိုရင် ပြဿနာက အဲဒီမှာ စတာပဲ။

ဒီလို အဖြစ်မျိုးနဲ့ ကြုံဖူးကြလားဗျာ။ comment မှာ ပြောခဲ့ကြပါဦး။

Flutter သမားတိုင်း သိထားသင့်တဲ့ အဆင့်မြင့် Plugin (၃) မျိုး 🚀

Flutter နဲ့ App ရေးတဲ့အခါ အချိန်ကုန်သက်သာပြီး ပိုမိုအဆင်ပြေလွယ်ကူစေမယ့် Plugin တွေကို ပြောပြပေးမှာဖြစ်ပါတယ်။ ဒီ Plugin သုံးခုက သင့်ရဲ့ Flutter Development Journey ကို ပိုမိုမြန်ဆန်စေမှာ အသေအချာပါပဲ။

Flutter Riverpod Snippets - State Management ရဲ့ စွမ်းအား

🌟 **ဘာကို လုပ်ပေးလဲ?**
Riverpod state management solution အတွက် အသုံးဝင်တဲ့ code snippet တွေကို အဆင်သင့်ပေးပါတယ်။

🔥 **ဘာလို့ အသုံးဝင်လဲ?**
Provider, Notifier နဲ့ Consumer တွေအတွက် boilerplate code တွေကို စက္ကန့်ပိုင်းအတွင်း auto-generate လုပ်ပေးလို့ အချိန်အများကြီး သက်သာစေပါတယ်။

✨ **ဥပမာ:**
`statenotifierprovider` လို့ ရိုက်လိုက်ရုံနဲ့ StateNotifierProvider setup တစ်ခုလုံးကို auto-generate လုပ်ပေးသွားပါမယ်။ ခဏလေးအတွင်း complex state management ကို စတင်လို့ရပါပြီ!

🌍 Flutter Intl - ဘာသာစကားပေါင်းစုံ အလွယ်တကူ ထည့်သွင်းရန်

🌟 **ဘာကို လုပ်ပေးလဲ?**
Flutter မှာ internationalization (i18n) လုပ်ငန်းစဉ်ကို အလွန်လွယ်ကူအောင် ပြုလုပ်ပေးပါတယ်။

🔥 **ဘာလို့ အသုံးဝင်လဲ?**
arb ဖိုင်များမှ Dart localization ဖိုင်များကို အလိုအလျောက် ဖန်တီးပေးခြင်း၊ ဘာသာစကားဖိုင်များကို စီမံခန့်ခွဲပေးခြင်းနဲ့ IDE နဲ့ ပေါင်းစပ်ပေးခြင်းတွေကို လုပ်ဆောင်ပေးပါတယ်။

✨ **ဥပမာ:**
မြန်မာ၊ အင်္ဂလိပ်၊ ထိုင်း စသည့် ဘာသာစကားများကို code တစ်ကြောင်းမှ မရေးဘဲ app မှာ အလွယ်တကူ ထည့်သွင်းနိုင်ပါပြီ။ String lookup တွေကို manual ရေးစရာမလိုတော့ပါဘူး!

# # ⚡ Flutter Enhanced Snippets - Widget တွေအတွက် စူပါပါဝါ

🌟 **ဘာကို လုပ်ပေးလဲ?**
Widget များ၊ layout များနှင့် navigation စနစ်များအတွက် အချိန်ကုန်သက်သာစေသော snippet များစွာကို ပေးစွမ်းပါတယ်။

🔥 **ဘာလို့ အသုံးဝင်လဲ?**
StatelessWidget, Scaffold စသည့် Flutter code တွေကို စက္ကန့်ပိုင်းအတွင်း scaffold လုပ်ရန် ကူညီပေးပါတယ်။

✨ **ဥပမာ:**
`stl` သို့မဟုတ် `stf` လို့ ရိုက်လိုက်ရုံနဲ့ widget boilerplate တစ်ခုလုံးကို ချက်ချင်း ရရှိပါမယ်။ ဒါ့အပြင် ListView၊ GridView တို့လိုမျိုး UI components တွေကိုလည်း code အနည်းငယ်နဲ့ တည်ဆောက်နိုင်ပါပြီ!

💡 သိထားသင့်သည့်အချက်
ဒီ Plugin သုံးခုကို တစ်ခုချင်းစီ အသုံးပြုနိုင်သော်လည်း၊ သုံးခုလုံးကို တစ်ခါတည်း တွဲသုံးခြင်ဖြင့် သင့်ရဲ့ Flutter Development အတွေ့အကြုံပိုမိုရစေနိုင်ပါတယ်။ နောက်နေ့မှာလည်း knowledge လေးတွေ sharing လုပ်ပေးသွားမှာမို့ like and follow လေးလုပ်သွားဖို့ မမေ့ပါနဲ့။

Flutter beginners တွေ လုပ်လေ့ရှိတဲ့ အမှား ၁၀ ချက်

၁။ StatefulWidget နဲ့ StatelessWidget ကို မှားသုံးခြင်း

အခြေအနေ (state) မပြောင်းလဲရင် StatelessWidget ကိုသုံးဖို့ ဖြစ်ပါတယ်။ ဒါပေမဲ့ အချို့က state မလိုပဲ StatefulWidget ကိုသုံးတာမျိုးလဲရှိတတ်တယ်။ ဒါဟာ performance အနေနဲ့ ကျတတ်ပါတယ်။

၂။ UI code တွေကို logic နဲ့ ရောပြီးရေးခြင်း

Flutter မှာ UI (widget) နဲ့ business logic (data handling) ကို ခွဲရေးဖို့ အရေးကြီးပါတယ်။ Logic တွေကို Bloc, Provider, Riverpod နဲ့ ချည်းချင်းကွဲရေးဖို့လိုအပ်ပါတယ်။

၃။ Hot reload နဲ့ hot restart ကို မှားသုံးခြင်း

Hot reload က UI အပြောင်းအလဲသာ reflect လုပ်တယ်။ Initialization logic တွေကို ပြန်ဖတ်ချင်ရင် hot restart လုပ်ဖို့လိုတယ်။ တစ်ခါတစ်လေ widget behavior မှားသွားတာတွေ ဒီကနေဖြစ်တတ်ပါတယ်။

၄။ ListView.builder() နဲ့ Column+ListView ကို မှားသုံးခြင်း

Scrollable widgets တွေကို Column ထဲထည့်တာဟာ error ဖြစ်နိုင်တယ်။ Sliver, Expanded, Flexible, shrinkWrap, physics စတာတွေမသိဘဲသုံးရင် layout error တွေဖြစ်တတ်ပါတယ်။

၅။ UI တစ်ခုလုံးကို Scaffold ထဲမထည့်ပဲ ရေးခြင်း

Scaffold က app ရဲ့ structure ပေးတယ်။ AppBar, Body, Drawer စတာတွေမှာ တစ်ခုချင်းစီ Scaffold မပါဘဲရေးလို့ UI မှာ မှားတာတွေဖြစ်တတ်ပါတယ်။

၆။ async/await နဲ့ FutureBuilder ကို မသုံးပဲ Blocking code ရေးခြင်း

Flutter က UI thread ကို asynchronous ဖြစ်စေဖို့လိုတယ်။ Long task တွေကို await မသုံးပဲ ရေးမိရင် app က freeze ဖြစ်တတ်ပါတယ်။

၇။ SetState() ကို မတိကျတဲ့နေရာမှာ သုံးခြင်း

setState() ဟာ rebuild လုပ်စေတယ်။ ဒါကြောင့် ခဏခဏ မလိုအပ်တဲ့ rebuild ဖြစ်စေတယ်။ ဘယ် widgets များကို ပြန်ရေးမယ်ဆိုတာ နားလည်ဖို့လိုအပ်ပါတယ်။

၈။ Reusable Widget မသုံးဘဲ Code တွေကို Copy-Paste လုပ်ခြင်း

UI တူတူဖြစ်နေတာတွေကို တစ်နေရာတည်း Custom Widget လုပ်ထားသင့်တယ်။ Copy-paste များတယ်ဆိုရင် maintenance အခက်အခဲ ဖြစ်တတ်ပါတယ်။

၉။ Dependency တွေကို မစီမံသုံးသပ်ပဲ သုံးခြင်း

အချို့ beginners တွေက package တစ်ခုတည်းမှာ function တစ်ခုလိုလို့ import လုပ်ပြီး package တစ်ခုလုံးသုံးတာမျိုးရှိတတ်တယ်။ မလိုအပ်တဲ့ dependencies များလာရင် build time နှေးသွားတတ်ပါတယ်။

၁၀။ Null safety ကို မသိဘဲ variable များသုံးခြင်း

Flutter ရဲ့ Dart မှာ null safety ပါလာပြီးသားဖြစ်တယ်။ Variable တွေကို ?, late, ! စတဲ့ null modifier တွေကို နားမလည်ဘဲသုံးတာက crash ဖြစ်စေတတ်ပါတယ်။

ဒီအမှား ၁၀ ချက်ကို သိထားပြီး ရှောင်ရှားနိုင်ရင် Flutter Developer အနေနဲ့ သင့်ရဲ့ knowledge ကိုတဖြည်းဖြည်းပြန်မြှင့်နိုင်ပါတယ်။ နောက်နေ့မှာလည်း knowledge လေးတွေ sharing လုပ်ပေးသွားမှာမို့ like and follow လေးလုပ်သွားဖို့ မမေ့ပါနဲ့။

FutureBuilder ကို Developer တွေသိထားသင့်တဲ့ အကြောင်းအရင်းများ

၁။ Flutter မှာ asynchronous data မရှိမဖြစ်ပါဝင်တယ်

Mobile app တစ်ခုကို တည်ဆောက်တဲ့အခါ Data တွေကို Internet, Database, Firebase, local storage စတာတွေကနေ ခေါ်ရတတ်ပါတယ်။ အဲ့ဒီ data တွေဟာ သွားယူပြီး ပြန်လာဖို့အချိန်လိုတဲ့အတွက် Future အနေနဲ့ရရှိတတ်ပါတယ်။ အဲ့ဒီ Future တစ်ခုကို UI မှာ integrate ဖို့ FutureBuilder က အကြောင်းအရာအတိုင်းပြသပေးနိုင်တဲ့ အရေးကြီးသော widget ဖြစ်ပါတယ်။

၂။ UI နဲ့ async data ကို ထိထိရောက်ရောက် ချိတ်ဆက်နိုင်တယ်

Data မလာသေးခင် loading screen ပြ, error ဖြစ်ရင် error ပြ, data ရလာတဲ့အခါ ထုတ်ပြ အဲ့ဒါတွေကို တစ်နေရာထဲမှာသာ ရှင်းရှင်းလင်းလင်း ရေးနိုင်ပါတယ်။ UI Logic တွေက clear ဖြစ်သွားပြီး bugs တွေလည်း လျော့နည်းပါတယ်။

၃။ UI ကို manually rebuild လုပ်စရာမလိုတော့ဘူး

setState() ခေါ်ပြီး state ကို ကိုယ်တိုင်စီမံဖို့မလိုတော့ဘဲ၊ FutureBuilder က Future ကိုအလိုအလျှောက်ကြည့်ပြီး UI ကို ပြန်ပုံဖော်ပေးတယ်။ ဒါကြောင့် logic တွေက ပိုပြီး readable ဖြစ်တယ်၊ maintenance လုပ်ရလွယ်တယ်။

၄။ Firebase, REST API, SQLite, SharedPreferences တို့နဲ့ လွယ်လွယ်ကူကူ အသုံးပြုနိုင်တယ်

နောက်ခံ (backend) ဆက်သွယ်ရာမှာ FutureBuilder ဟာ bridge တစ်ခုအဖြစ်လုပ်ဆောင်ပေးတယ်။ Firebase မှ data ဖတ်ခြင်း, REST API မှ fetch လုပ်ခြင်းစတာတွေကို UI နဲ့ တစ်ပြိုင်နက်ချိတ်ဆက်နိုင်တဲ့အတွက် efficiency ကောင်းတယ်။

၅။ Flutter ရဲ့ idiomatic (တရားဝင်ဖော်ပြနည်း) ဖြစ်တယ်

Flutter မှာ asynchronous data ကို UI ထဲမှာ ပြသချင်ရင် FutureBuilder ဟာ အမှန်တကယ်အသုံးများပြီး၊ Developer တော်တော်များများကလည်း အသုံးပြုကြပါတယ်။ Flutter framework အတွက်တော့ ဒီဟာက go-to solution တစ်ခုပဲ ဖြစ်ပါတယ်။

တိုက်ရိုက်ကောင်းမွန်တဲ့ asynchronous UI logic တည်ဆောက်ချင်တယ်ဆိုရင် FutureBuilder ကို သိထားဖို့ မဖြစ်မနေလိုအပ်ပါတယ်။

Flutter developer တစ်ယောက်အတွက် ဒီ widget က daily life မှာ အကောင်းဆုံးလက်နက်တစ်ခုပါပဲ။ နောက်နေ့မှာလည်း knowledge လေးတွေ sharing လုပ်ပေးသွားမှာမို့ like and follow လေးလုပ်သွားဖို့ မမေ့ပါနဲ့

Flutter ၏ setState() ကို သုံးတဲ့အခါမှာ သိထားဖို့ လိုအပ်တဲ့ အရေးကြီးဆုံးအချက် ၅ ချက်ကို ရှင်းပြပါမှာဖြစ်ပါတယ်။

၁။ UI ကို ပြန်တက်အောင်လုပ်ဖို့ သုံးတာပါ

setState() ဟာ StatefulWidget ထဲက အချက်အလက် (state) ပြောင်းလဲသွားတဲ့အခါ Flutter ကို trigger လုပ်ဖို့ သုံးတာပါ။ ပြောင်းလဲမှုကို UI (User Interface) မှာ ပြထားဖို့ rebuild လုပ်ပေးပါတယ်။

၂။ StatefulWidget ထဲမှာပဲ သုံးလို့ရပါတယ်

setState() ကို StatefulWidget ထဲက State class မှာပဲ သုံးနိုင်ပါတယ်။ StatelessWidget မှာတော့ သုံးလို့မရပါဘူး၊ အဲ့မှာ state ပြောင်းလဲဖို့ Mechanism မရှိလို့ပါ။

၃။ Synchronous and Lightweight

setState() ဟာ Synchronous (အချိန်နဲ့တပြေးညီ) ဖြစ်ပြီး၊ ပြောင်းလဲမှုကို မှတ်သားပြီးနောက်တစ်ခုလှုပ်ရှားတဲ့ frame မှာ UI ကို ပြန်တက်ပေးတယ်။ ဒါကြောင့် မလှုပ်မရှားသင့်တဲ့ computation ကို ထဲမှာ မထည့်သင့်ပါ။

၄။ အသုံးပြုတဲ့ widget နှင့် UI ပဲ ပြန်တက်တယ်

setState() ဟာ ခေါ်တဲ့ widget (နဲ့သူ့ children) ပဲ အသုံးပြုပါတယ်။ App တစ်ခုလုံးကို ပြန်တက်တာ မဟုတ်လို့၊ Performance ထိခိုက်မှာ မစိုးရိမ်ရပါဘူး။

၅။ Data ကို တကယ် မပြောင်းတာ

setState() က state တစ်ခုလုံးကို ပြောင်းတာ မဟုတ်ပါ။ သင်ဟာ setState() ရဲ့ callback ထဲမှာပဲ သင်ရဲ့ data/state ကို ပြောင်းဖို့လိုပါတယ်။ setState() က UI ကိုပြန်တက်ဖို့ အသုံးပြုတာပဲဖြစ်ပါတယ်။ နောက်နေ့မှာလည်း knowledge လေးတွေ sharing လုပ်ပေးသွားမှာမို့ like and follow လေးလုပ်သွားဖို့ မမေ့ပါနဲ့။

Flutter ၏ build() Method
Flutter တွင် အရာအားလုံးသည် widget များဖြစ်ကြပြီး၊ widget များက UI မည်သို့ပုံစံရှိသင့်ကြောင် ဖော်ပြပါတယ်။ build() method က Flutter အား widget ကို screen ပေါ်တွင် ဘယ်လိုပြရမလဲဆိုတာ ပြောပြတာပါ။
🔁 build() ကို ဘယ်အချိန်မှာ ဘယ်လိုသုံးသလဲ?

Flutter သည် အောက်ပါအခြေအနေများတွင် widget များကို ပြန်လည်တည်ဆောက်ပါတယ်

setState() (for StatefulWidget) မှတဆင့် State ပြောင်းလဲမှုရှိသည့်အခါ။
Parent widget ပြန်လည်တည်ဆောက်ပြီး widget သည် tree ၏ အစိတ်အပိုင်းဖြစ်သည့်အခါ။
widget ၏ မှီခိုမှုများ (InheritedWidget ကဲ့သို့) ပြောင်းလဲသည့်အခါ။
စက်၏ orientation သို့မဟုတ် အရွယ်အစား ပြောင်းလဲသည့်အခါ ကိုယ်တိုင် build() ကိုခေါ်ဖို့မလိုအပ်ပါဘူး။ Flutter က လုပ်ဆောင်ပေးပါသည်။

🧠 ဒီလိုပုံစံစဉ်းစားလို့ရပါတယ်
build() method သည် ပုံစံငယ်လုပ်ငန်း (blueprint function) တစ်ခုဖြစ်သည်:
၎င်းသည် တစ်ကြိမ်တည်းတည်ဆောက်ပြီး ရပ်နားသွားမှာမဟုတ်ပါဘူး။ မျော်လင့်ထားတာထက်ပိုပြီးတော့ တည်ဆောက်ပေးနေတာပါ။ Flutter ၏ rendering engine သည် ဤအတွက် အကောင်းဆုံးဖြစ်အောင် optimize လုပ်ထားပါသည်။

❗️ build() တွင် ရှောင်ရှားသင့်သည့်အရာများ?

များပြားသော တွက်ချက်မှုများ (ဥပမာ၊ စာရင်းစဉ်ခြင်း၊ ဒေတာစစ်ထုတ်ခြင်း)။
async code သို့မဟုတ် FutureBuilder အလွဲသုံးခြင်းကို ရှောင်ရှားပါ။
build() အတွင်း တိုက်ရိုက် state ပြင်ဆင်ခြင်း (setState() ခေါ်ခြင်းကဲ့သို့) ကို ရှောင်ရှပါ။

🧠 အကြံပြုချက်: build() က ကောင်းမွန်ပြီး မြန်ဆန်သင့်သည်။ ၎င်းကို ပြသရမဲ့နေရာတွင်သာအသုံးပြုသင့်ပါတယ်။

🔄 Stateful vs Stateless နှင့် build()
StatelessWidget: Parent ပြောင်းလဲမှုမရှိပါက build() ကို တစ်ကြိမ်သာခေါ်ပါသည်။
StatefulWidget: setState() တိုင်းတွင် build() ကို ခေါ်ဆိုပါသည်။

🏁 အနှစ်ချုပ်:
build() method သည် ချက်ပြုတ်နည်း နှင့်တူသည် ချက်ပြုတ်ခြင်းမဟုတ်ပါ။ Flutter သည် ချက်ပြုတ်နည်းကို ဖတ်ရှုပြီး လိုအပ်သော အစိတ်အပိုင်းများကိုသာ ပါဝင်ပစ္စည်း (state) ပြောင်းလဲတိုင်း တွင် ထိရောက်စွာ ပြန်လည်ချက်ပြုတ်ပေးပါသည်။ နောက်ထပ် Tips တွေ တင်ပေးသွားဦးမှာမို့ Like and Follow လုပ်ဖိူ့မမေ့ကြပါနဲ့နော် 🙌🏻🙌🏻