Sign in Subscribe
100 days of flutter

Day 1: The Setup & “The Run”

Transform your computer into a professional Flutter development workstation and run your first app on a device!

Arkar Min Tun

• 5 min read

မင်္ဂလာပါ... 👋

ဒီနေ့ ပထမဆုံးနေ့ဆိုတော့ ပေ့ါပေါ့ပါးပါးလေးတွေနဲ့ စလိုက်ကြရအောင်ပါ။ ဒီနေ့ ဆွေးနွေးသွားမယ့် ခေါင်းစဥ်တွေကတော့

  • What is Flutter & Dart?
  • IDE Setups (Android Studio, VS Code)
  • Flutter SDK installation and configuration
  • First app running on the device
  • Hot reload, hot restart

တွေပဲ ဖြစ်ပါတယ်။

What is Flutter & Dart?

အခု ဒီ 100 days of Flutter ကို လိုက်လုပ်မယ့်သူတွေ Flutter အကြောင်း အနည်းနဲ့အများ သိပြီးပြီလို့ ယူဆပါတယ်။ Flutter ဆိုတာဘာလဲ သေချာ မသိသေးသူတွေအတွက် နည်းနည်းလောက် ဝေမျှပေးချင်ပါတယ်။ သိပြီးသား သူတွေကတော့ ဒီ section ကို ကျော်သွားလို့ ရပါတယ်။

Flutter is an open source framework for building beautiful, natively compiled, multi-platform applications from a single codebase.

Flutter ဆိုတာကတော့ Google ကနေ ထုတ်ထားတဲ့ framework တခုပဲ ဖြစ်ပါတယ်။ Open source ဖြစ်တဲ့အတွက် သူ့ထဲမှာ ပါသမျှ source code တွေကို ဘယ်သူမဆို ဝင်ရောက်လေ့လာပြီး အဆင်မပြေတာတွေ ကြုံခဲ့ရင်လဲ ကိုယ်တိုင်ဝင်ရောက် ပြင်ဆင်နိုင်ပါတယ်။

သူ့ရဲ့ အဓိက အားသာချက်ကတော့ code တွေကို တခါထဲရေးပြီး platform မျိုးစုံမှာ deploy လုပ်နိုင်လို့ပဲ ဖြစ်ပါတယ်။ ဆိုလိုတာကတော့ ရေးထားတဲ့ code ကို android, ios, window, linux, mac စသဖြင့် device မျိုးစုံမှာ run လို့ ရနေမှာပဲ ဖြစ်ပါတယ်။ ဒီတော့ development လုပ်ရတာကို အများကြီး အထောက်အကူ မြန်ဆန် စေပါတယ်။

ဒါ့အပြင် flutter app ကို compile လုပ်လိုက်တဲ့အခါ native code ကို ထုတ်ပေးတာ ဖြစ်တဲ့အတွက် ကိုယ့် app ရဲ့ အသုံးပြုသူတွေ သုံးတဲ့အခါ native app ရဲ့ performance နီးပါး အတော်လေး လိုက်မှီပါတယ်။ ဒါပေမယ့် device hardware တွေ (camera, bluetooth, wifi စတာတွေ)ကို အသုံးပြုဖို့လိုအပ်တဲ့အခါ native app တွေလိုမျိုး အလွယ်တကူ သုံးလို့မရနိုင်တာမျိုး ရှိတတ်ပါတယ်။ ဒီလို ကြုံလာခဲ့ရင်လဲ များသောအားဖြင့် အခြားသူတွေ လုပ်ထားတဲ့ library တွေကို အသုံးပြုပြီး ဖြေရှင်းလို့ ရပါတယ်။

နောက်တချက်အနေနဲ့ တချို့တွေက အားသာချက်လို့ ပြောကြပြီး တချို့လဲ အားနည်းချက် အနေနဲ့ ပြောတတ်ကြပါတယ်။ ဒါကတော့ Flutter က သူ run နေတဲ့ platform တွေ အရံသင့် ပေးထားတဲ့ native component တွေကို အသုံးမပြုဘဲ screen တခုလုံးကို ဆေးရောင်ခြယ် canvas အနေနဲ့ သတ်မှတ်ပြီး အပေါ်မှာမှ Flutter component တွေကို ပြပေးတာပဲ ဖြစ်ပါတယ်။ ဒီတော့ pixel perfect ဖြစ်တဲ့ app လိုမျိုးတွေ တည်ဆောက်တဲ့အခါမှာ လွယ်ကူပြီးတော့ native ui feature တွေ အသုံးပြုချင်တဲ့အခါ အခက်အခဲ ဖြစ်နိုင်ပါတယ်။ Flutter team ကနေဖြစ်ဖြစ်၊ contributor တယောက်ယောက်ကနေဖြစ်ဖြစ်၊ မိမိကိုယ်တိုင်ပဲ ဖြစ်ဖြစ် native experience တွေကိုတော့ ဖန်တီးသွားလို့ ရပါတယ်။

ဒါကတော့ Flutter ရဲ့ official website ပဲ ဖြစ်ပါတယ်။ link ကို နှိပ်ပြီးတော့ သွားရောက်လေ့လာနိုင်ပါတယ်။

Flutter - Build apps for any screen
Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.
Flutter

Flutter အကြောင်းပြောပြီးပြီဆိုတော့ dart အကြောင်းလဲ နည်းနည်းလောက် ဆက်ပြောပါမယ်။ Dart ဆိုတာကတော့ Flutter app တွေ တည်ဆောက်တဲ့အခါ အသုံးပြုတဲ့ programming language ပဲ ဖြစ်ပါတယ်။ ကျွန်တော်တို့ android native app တွေအတွက် Java/Kotlin၊ iOS app တွေအတွက် Swift/Objective C တို့ ရှိသလိုမျိုး flutter app တွေအတွက် Dart ရှိတာပဲ ဖြစ်ပါတယ်။ Flutter အတွက် Dart ကို အသုံးပြုရခြင်းကတော့ သူ့ရဲ့ JIT (Just-in-Time) နဲ့ AoT (Ahead-of-Time) support ပေးနိုင်မှုကြောင့်ပဲ ဖြစ်ပါတယ်။ အကျယ်တဝင့် စိတ်ဝင်စားရင် ဘာကြောင့် Flutter အတွက် ရှိပြီးသား တခြား programming language တွေ မသုံးဘဲ Dart ကို ရွေးချယ်ရလဲဆိုတာကို Flutter team က ရှင်းပြပေးထားတာ ရှိပါတယ်။

FAQ
Frequently asked questions and answers about Flutter.

IDE Setups (Android Studio, VS Code)

Flutter app တွေရေးတော့မယ်ဆို အဓိကအားဖြင့် Android Studio ဒါမှမဟုတ် VS Code ကို အသုံးများကြပါတယ်။ Tools, plugins, extensions တွေလဲ ဒီနှစ်ခုမှာ အစုံလင်ဆုံးလို့ ပြောလို့ရပါတယ်။

Download Android Studio & App Tools - Android Developers
Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.
Android Developers
Visual Studio Code - The open source AI code editor
Visual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
MicrosoftMicrosoft

Android Studio ကတော့ Google ရဲ့ product ဖြစ်ပြီး VS Code ကတော့ Microsoft ရဲ့ product ပဲ ဖြစ်ပါတယ်။ Flutter ကလဲ Google ရဲ့ product ဖြစ်တာကြောင့် integration အားဖြင့်တော့ Android Studio က ပိုပြီး ထဲထဲဝင်ဝင်ရှိပါတယ်။ VS Code ကတော့ ပိုပေါ့ပြီး အလုပ်လုပ်ရတာ မြန်မြန်ဆန်ဆန် ရှိပါတယ်။

ကိုယ်သုံးမယ့် IDE/Editor ပေါ်မူတည်ပြီး အောက်မှာ ပြောထားတဲ့ Android Studio/VS Code setup ကို ဆက်လက် လုပ်သွားလို့ရပါတယ်။ ကျွန်တော်ကတော့ ၂ခုလုံး သွင်းထားဖို့ အကြံပြုပါတယ်။ Android SDK တွေကို manage လုပ်ဖို့လိုတဲ့အခါ၊ emulator တွေ setup လုပ်ဖို့ လိုအပ်တဲ့အခါ Android Studio နဲ့ ပိုပြီး မြန်မြန်ဆန်ဆန်လုပ်လို့ရပါတယ်။ နေ့စဥ် code ရေးပြီး run တာတွေအတွက်တော့ VS Code က ပိုပြီး မြန်မြန်ဆန်ဆန် ရှိပါတယ်။

Android Studio Plugins

တကယ်လို့ Android Studio အသုံးပြုမယ်ဆိုရင်တော့ အပေါ်မှာ ပေးထားတဲ့ link ကနေ Android Studio ကို download ဆွဲပြီး install လိုက်လို့ ရပါတယ်။ Android Studio setup လုပ်ပြီးသွားရင်တော့ Flutter အတွက် လိုအပ်မယ့် Plugin သွင်းဖို့ လိုပါမယ်။ Android Studio မှာ Plugins tab ကိုဖွင့်ပြီး Flutter ဆိုတဲ့ Plugin ကို Marketplace မှာ ရှာပြီး Install လုပ်ပေးလိုက်ပါ။

Flutter Plugin ကို install လုပ်လိုက်တာနဲ့ Dart ဆိုတဲ့ Plugin ကိုပါ တခါထဲ install လုပ်သွားပါလိမ့်မယ်။

ဒီ Plugin ၂ခု သွင်းထားပြီးရင်တော့ နောက်အဆင့် Flutter SDK setup လုပ်တာကို ဆက်လုပ်လို့ရပါပြီ။

VS Code Extensions

တကယ်လို့ ကိုယ်က VS Code သုံးမယ်ဆိုရင်တော့ VS Code မှာ extension တချို့ သွင်းထားဖို့ လိုအပ်ပါမယ်။ VS Code ရဲ့ extension tab ကို ဖွင့်ပြီးတော့ Flutter ဆိုပြီး ရိုက်ရှာလိုက်ရင် Flutter extension ထွက်လာပါလိမ့်မယ်။ Install လုပ်လိုက်ပါ။

Flutter extension ကို install လုပ်လိုက်တာနဲ့ Dart extension ကိုပါ တခါထဲ install လုပ်သွားပါလိမ့်မယ်။

Flutter SDK installation & configuration

Flutter app တွေ ရေးဖို့အတွက်ဆို အရင်ဆုံး လိုအပ်တာကတော့ Flutter SDK (Software Development Kit) ပဲ ဖြစ်ပါတယ်။ SDK ထဲမှာ development လုပ်တဲ့အချိန်မှာ လိုအပ်မယ့် Flutter source code တွေ၊ Dart နဲ့ ပတ်သက်တာတွေ၊ Debugging Tools တွေ၊ Platform Tools တွေ စသဖြင့် ပါဝင်ပါတယ်။

Flutter SDK ကို နည်းအမျိုးမျိုးနဲ့ install လုပ်လို့ရတာ ဖြစ်တဲ့အတွက် ကိုယ်နဲ့အဆင်အပြေဆုံး နည်းလမ်းကို ရွေးပြီး လိုက်လုပ်လို့ရပါတယ်။ အဆုံးမှာတော့ ကျွန်တော် အသုံးပြုတဲ့နည်းလမ်း ဝေမျှပေးထားပါတယ်။

Install Flutter using VS Code

တကယ်လို့ ကိုယ်က VS Code သုံးမယ်ဆိုရင်တော့ SDK ကို VS Code ကနေတဆင့် သွင်းထားလို့ရပါတယ်။ Official website မှာ ပေးထားတာက တော်တော်လေး ပြည့်ဆုံနေပြီမို့ တဆင့်ချင်း လိုက်မပြတော့ပါဘူး။

Install Flutter using VS Code
Learn how to use VS Code to quickly install and set up the Flutter SDK.

Install Flutter Manually

တကယ်လို့ internet အခြေအနေကြောင့် SDK download လုပ်ရတာ အဆင်မပြေရင် SDK zip file သီးသန့် download ဆွဲပြီးတော့လဲ setup လုပ်လို့ရပါတယ်။ Official website မှာ ကိုယ်သုံးတဲ့ device window/linux/mac ပေါ်မူတည်ပြီး သူနဲ့သက်ဆိုင်ရာ install လုပ်နည်းတွေ ရှိပါတယ်။

Install Flutter manually
Learn how to install and set up the Flutter SDK manually.

Install Flutter using Flutter Version Manager (FVM)

ဒါကတော့ Flutter ကို version တခုထဲမဟုတ်ဘဲ အမျိုးမျိုးပြောင်းသုံးဖို့ လိုအပ်တဲ့အခါ အသုံးပြုကြပါတယ်။ ဘယ်လိုအချိန်မှာ လိုအပ်လဲဆိုတော့ ကျွန်တော်တို့ project တွေ အများကြီး develop လုပ်ကြ၊ maintain လုပ်ကြတဲ့အခါ project တခုနဲ့တခု flutter version မတူနေတာ့ဘဲ project အလိုက် သတ်မှတ်ထားတဲ့ flutter version ကို အသုံးပြုဖို့ လိုတဲ့အခါမှာ သုံးပါတယ်။

Index – FVM
An expressive way to build design systems in Flutter.
FVM

Install Flutter using Puro

ဒါကတော့ အပေါ်မှာ ပြောထားတဲ့ FVM လိုမျိုး tool နောက်တခုပဲ ဖြစ်ပါတယ်။ သူ့ကိုလဲ flutter version တခုထက်ပိုပြီး အသုံးပြုဖို့ လိုတဲ့အချိန်မှာ အသုံးပြုလို့ရပါတယ်။ FVM နဲ့ဆင်ပေမယ့် Flutter version တွေကို local မှာ ဘယ်လိုကိုင်တွယ်သလဲဆိုတာ နည်းနည်းး ကွဲပြားပါတယ်။ FVM ထက် installation ပိုင်း၊ network usage ပိုင်းတွေမှာ ပိုကောင်းတယ်လို့လဲ ပြောကြပါတယ်။ ဒါပေမယ့် သူ့ကို maintain လုပ်တာ သိပ်ပြီး active မဖြစ်တော့ အဆင်မပြေတာတွေ ကြုံတွေ့ရနိုင်ပါတယ်။

About - Puro
logo
💡
ကျွန်တော်ကတော့ နေ့စဥ်အလုပ်မှာ Flutter Version Manager (FVM) ကို အသုံးပြုပါတယ်။ Project တခုနဲ့တခု အပြောင်းမှာ fvm use ဆိုတာကို run လိုက်တာနဲ့ လက်ရှိ project မှာ သတ်မှတ်ထားတဲ့ flutter version ကို အလွယ်တကူပဲ ပြောင်းပေးနိုင်ပါတယ်။

Installation ပိုင်းမှာ ကိုယ်နဲ့အဆင်ပြေတဲ့နည်းလမ်းနဲ့ Flutter SDK ကို install လုပ်လို့ရပါတယ်။ Installation ပိုင်းအဆင်ပြေမပြေဆိုတာ စစ်ဖို့ terminal မှာ flutter ဆိုပြီး run ကြည့်လိုက်ပါ။

အခုလိုမျိုး flutter နဲ့ပတ်သက်တဲ့ command တွေပြပေးနေပြီဆိုရင်တော့ flutter installation အောင်မြင်စွာ ပြီးဆုံးပါပြီ။ 🎉

Install လုပ်ပြီးပြီဆိုရင်တော့ လိုအပ်တဲ့ configuration ပိုင်းလေးကို ဆက်ကြည့်လိုက်ရအောင်ပါ။ terminal မှာပဲ flutter doctor ဆိုပြီး run ကြည့်လိုက်ပါ။

တကယ်လို့ ကိုယ်က အခုမှ installation လုပ်ထားတာဆိုရင် license agreement အတွက် ပြနေတတ်ပါတယ်။ သူပြထားတဲ့အတိုင်း တခုချင်းလိုက်လုပ်သွားလိုက်ပါ။ ကိုယ်က Window machine မှာ setup လုပ်နေတာဆိုရင်တော့ XCode အဆင့်ကို ကျော်သွားလို့ရပါတယ်။ XCode က Mac မှာပဲ သုံးလို့ရတာဖြစ်ပြီးတော့ iOS အတွက် build လုပ်ချင်တဲ့အခါ သုံးတာပဲ ဖြစ်ပါတယ်။ အဆင်မပြေတာတွေ ရှိရင် discord server မှာ ဝင်ရောက်ပြီး ဆွေးနွေးနိုင်ပါတယ်။

First app running on the device

အပေါ်က setup တွေ ပြီးသွားပြီဆိုရင်တော့ terminal မှာ အောက်မှာပေးထားတဲ့ command run လိုက်ပါ။ ဒါကတော့ flutter project တခုကို တည်ဆောက်တဲ့ command ပဲဖြစ်ပါတယ်။ 

flutter create hello_world --org dev.arkar

--org dev.darkar နေရာမှာ ကိုယ်ကြိုက်တဲ့ reverse domain တခု ထည့်ပေးလိုက်လို့ရပါတယ် (ဥပမာ --org com.aungaung)။ ပုံမှန်ဆိုရင်တော့ ကိုယ်ပိုင်တဲ့ domain တခုကို ပြောင်းပြန် ထည့်ပေးကြပါတယ်။ ကျွန်တော့်ရဲ့ domain က arkar.dev ဆိုတော့ dev.arkar ဆိုပြီး ထည့်ပေးတာ ဖြစ်ပါတယ်။

Flutter project တည်ဆောက်ပြီးသွားပြီဆိုင်တော့ Android Studio မှာပဲဖြစ်ဖြစ်၊ VS Code မှာပဲဖြစ်ဖြစ် project ကို ဖွင့်လိုက်ပါ။ flutter က default အနေနဲ့ platform တွေ မသတ်မှတ်ဘူးဆို android, ios, linux, macos, web, window platform တွေအားလုံးအတွက် တည်ဆောက်ပေးထားပါလိမ့်မယ်။ မလိုအပ်ဘူးဆို folder အလိုက် ဖျက်ပစ်လိုက်လို့ ရပါတယ်။ နောက်နေ့တွေမှာတော့ platform တွေ ဘယ်လို သတ်မှတ်ရမလဲဆိုတာ ပြပေးသွားပါမယ်။

ကျွန်တော်လုပ်လေ့ရှိတာကတော့ project ကို စဖွင့်ပြီးတာနဲ့ flutter version သတ်မှတ်တာပဲ ဖြစ်ပါတယ်။ vscode ရဲ့ terminal ကိုဖွင့်ပြီးတော့ fvm use ဆိုပြီး run လိုက်ပါ။ လက်ရှိ version သတ်မှတ်ထားတာ မရှိသေးတဲ့အတွက် version ရွေးချယ်ဖို့ ပြလာပါလိမ့်မယ်။ တကယ်လို့ version တခုမှ သွင်းမထားရသေးရင်လဲ အပေါ်မှာ ပေးထားတဲ့ fvm website ထဲမှာ ဘယ်လိုသွင်းရမလဲ ရှာကြည့်လိုက်ပါ။ ဒီမှာ ကျွန်တော်ကတော့ လက်ရှိ နောက်ဆုံး version ဖြစ်တဲ့ 3.38.5 ကို ရွေးချယ်ထားလိုက်ပါတယ်။

ပြီးရင် Android Studio ရဲ့ Virtual Device Manager ထဲကိုသွားပြီးတော့ virtual device တခု create လုပ်လိုက်ပါ။

ပြီးရင်တော့ vscode ထဲပြန်လာပြီးတော့ flutter run ဆိုပြီး ရိုက်ထည့်လိုက်ပါမယ်။​ ကျွန်တော်က fvm ကို သုံးထားတာဖြစ်လို့ fvm flutter run ဆိုပြီး run လိုက်ပါမယ်။ အခုလိုမျိုး မြင်ရပြီး counter app တက်လာပြီဆိုရင်တော့ ဒီအဆင့်ပြီးဆုံးပြီပဲ ဖြစ်ပါတယ်။ app ရဲ့ အောက်ဒေါင့်နားမှာ ပြထားတဲ့ + button ကိုနှိပ်လိုက်မယ်ဆိုရင် count value တက်လာမှာပဲ ဖြစ်ပါတယ်။

Hot Reload & Hot Restart

flutter run နေတဲ့ terminal ရဲ့ အောက်နားကို ကြည့်မယ်ဆို အခုလိုမျိုး မြင်ရမှာပဲ ဖြစ်ပါတယ်။

ဒီမှာပြထားတဲ့ command တွေကတော့ app run နေတဲ့အချိန် terminal ထဲမှာ နှိပ်ပြီး run လို့ရတဲ့ command တွေပဲ ဖြစ်ပါတယ်။ ဒီထဲကမှ Hot Reload နဲ့ Hot Restart တို့အကြောင်း နည်းနည်းလေး ပြောပြချင်ပါတယ်။

ကျွန်တော်တို့ app တွေ ရေးကြတဲ့အခါ ကိုယ်ရေးလိုက်တဲ့ code ရဲ့ result ကို မြန်မြန်မြင်ရလေ develop လုပ်ရတာ ပိုမို တွင်ကျယ်လေပဲ ဖြစ်ပါတယ်။ user interface မှာ တခုခု ပြောင်းလိုက်တိုင်း app တခုလုံးကို compile လုပ်ဖို့စောင့်ရမယ်ဆို ဘယ်လိုတောင် အချိန်တွေကြာသွားမလဲ တွေးကြည့်လို့ရပါတယ်။ အရင်တုန်းက android app တွေကို xml နဲ့ ရေးခဲ့ဖူးတဲ့အချိန်တွေကို မှီတဲ့သူတွေဆို ဘယ်လိုတောင် အချိန်ပေးရလဲဆိုတာ မှတ််မိပါလိမ့်မယ်။ Flutter မှာ အဲ့လို ပြဿနာကို ဖြေရှင်းဖို့ အဓိက feature အနေနဲ့ ပါဝင်တာကတော့ hot reload နဲ့ hot restart ဆိုတာတွေပဲ ဖြစ်ပါတယ်။

ကျွန်တော်တို့ user interface တွေ တည်ဆောက်တဲ့အခါ text color တွေ၊ font size တွေ၊ button color တွေ၊ ui component တခုနဲ့တခုရဲ့ အကွာအဝေးတွေ စသဖြင့် ချိန်ညှိတဲ့အခါ တခုပြင်တိုင်း app တခုလုံးကို restart လုပ်ဖို့မလိုဘဲ လက်ရှိ screen ပေါ်မှာပဲ ပြောင်းလဲသွားတာကို မြင်နိုင်ဖို့အတွက်ဆို hot reload ကို သုံးနိုင်ပါတယ်။ Flutter SDK အနေနဲ့ ပြောင်းလဲသွားတဲ့ အစိတ်အပိုင်းကိုပဲ device ကို ပို့ပေးတာဖြစ်တဲ့အတွက် အချိန်တိုလေးအတွင်းမှာ ကျွန်တော်တို့ ပြင်လိုက်တဲ့ အပြောင်းအလဲတွေကို မြင်နိုင်ပါတယ်။​ ဒါကလဲ flutter ရဲ့ အဓိက selling point တွေထဲက တခုပဲ ဖြစ်ပါတယ်။

Hot reload ကို အသုံးပြုတဲ့အခါ လက်ရှိ state ကို သက်ရောက်တာမျိုး မရှိတဲ့အတွက် state နဲ့ ချိတ်ဆက်ထားတဲ့ value တွေကိုပါ reset သဘောမျိုးလုပ်ချင်တဲ့အခါ hot restart ကို အသုံးပြုနိုင်ပါတယ်။ Hot restart လုပ်တဲ့အခါ hot reload ထက်တော့ အနည်းငယ်ပိုကြာပေမယ့် app တခုလုံးကို clean state ကို ပြန်ရောက်သွားစေပါတယ်။

ဥပမာ အခုပြထားတဲ့ counter app မှာ အောက်မှာ ပြထားတဲ့ လိုင်းကို ပြင်လိုက်ပါမယ်။

// Before
Text(
  '$_counter',
  style: Theme.of(context).textTheme.headlineMedium,
),

// After
Text(
  '$_counter',
  style: Theme.of(context).textTheme.displayLarge,
),

ပြီးရင်တော့ save လုပ်ပြီး terminal မှာ r ကို နှိပ်လိုက်ပါ။ font size ပြောင်းလဲသွားတာကို ချက်ချင်းတွေ့နိုင်မှာပဲ ဖြစ်ပါတယ်။ တကယ်လို့ အရှေ့မှာ + ကို နှိပ်ထားလို့ value ပြောင်းနေတယ်ဆို value ကတော့ အရှိအတိုင်း ရှိနေမှာပဲ ဖြစ်ပါတယ်။

ဒီနေရာမှာ လက်ရှိ value 6 ဆိုတာကတော့ state အနေနဲ့ ရှိနေတဲ့ value ပဲ ဖြစ်ပါတယ်။ တကယ်လို့ hot restart လုပ်လိုက်တယ်ဆိုရင်တော့ value တွေပါ reset ဖြစ်သွားမှာ ဖြစ်ပါတယ်။ app တခုလုံး အစကနေ ပြန် run လိုက်တဲ့သဘောပဲ ဖြစ်ပါတယ်။ app တခုလုံးကို ရပ်ပြီး ပြန် run တာလောက်မကြာတော့ဘဲ app တခုလုံး restart လုပ်လိုက်တာပဲ ဖြစ်ပါတယ်။

ဒါဆိုရင်တော့ hot reload နဲ့ hot restart ကွာခြားချက်ကို နားလည်လောက်ပြီ ထင်ပါတယ်။

ဒီနေ့ Day 1 အတွက်ကတော့ ဒီလောက်ပဲ ဖြစ်ပါတယ်။ အဆုံးထိ ဖတ်ပေးတဲ့အတွက် အများကြီး ကျေးဇူးတင်ပါတယ်။ နားမလည်တာတွေ အဆင်မပြေတာတွေ ရှိခဲ့ရင်လဲ အောက်မှာပေးထားတဲ့ discord server ထဲမှာ လာရောက်ဆွေးနွေးနိုင်ပါတယ်။ နောက်နေ့တွေမှာလဲ ဆက်လက်ပြီး sharing လုပ်သွားပေးသွားမှာ ဖြစ်တဲ့အတွက် subscribe လုပ်ထားဖို့ ဖိတ်ခေါ်ပါတယ်။