System

Flutter Basic Knowledge & First Step to Coding

မဂၤလာပါ ခင္ဗ်ာ၊
ကၽြန္ေတာ့္ နာမည္ ေဌးမင္းေခါင္ ျဖစ္ၿပီး Spiceworks Myanmar ကုမၸဏီတြင္ Web Developer အျဖစ္ လုပ္ကိုင္လ်က္ ရိွပါသည္။ ဒီ တစ္ပတ္ ကၽြန္ေတာ္ မွ်ေဝမယ့္ အေၾကာင္း အရာကေတာ့ Flutter ဆိုတဲ့ Cross-Platform Library တစ္ခု ျဖစ္ပါသည္။ Flutter ဆိုတာ Google ကေန Mobile Phone မ်ားတြင္ အသံုးျပဳႏိုင္မည့္ App Development အတြက္ ထုတ္လုပ္ေပးထားေသာ Open-source Framework တစ္ခု ျဖစ္ပါတယ္။ Flutter အသံုးျပဳၿပီး Android ၊ iOS နဲ႔ Google Fuchsia OS တြင္ Run ႏိုင္မည့္ App မ်ားကို ဖန္တီးႏိုင္မွာ ျဖစ္ပါတယ္။ Flutter ဟာဆိုရင္ျဖင့္ Dart Language ကို အသံုးျပဳထားၿပီး ၎တြင္ Flutter Engine ၊ Libraries ၊ Design ေတြအတြက္ အဓိက Widgets မ်ား ပါဝင္ပါသည္။ Flutter App တခု ေရးမည္ဆိုလွ်င္ သိထားရမည့္အရာမွာ ေရးသမွ် UI အားလံုးသည္ Widget မ်ား ျဖစ္ပါသည္။ ဥပမာ TextBox, Button, TextField, Container, Divider, SizedBox အားလံုးသည္ Widget အမ်ိဳးအစား ျဖစ္ပါသည္။ ယခုကစၿပီး flutter ကို စတင္ အသံုးျပဳၾကည့္ပါမည္။

Flutter App စေရးရန္အတြက္ Flutter SDK လိုအပ္မည္ ျဖစ္ပါသည္။ ၎ကို ဤ Link တြင္ ေဒါင္းလုပ္ ရယူ ရပါမည္။ Zip ဖိုင္အေနနဲ႔ ရမွာ ျဖစ္ၿပီး ၎ ဖိုင္ကို C:\src\flutter မွာ Extract ျဖည္ရပါမယ္။ ၿပီးရင္ေတာ့ Computer ရဲ႕ Environment Variables ထဲက Path ထဲမွ Flutter Path ( ဥပမာ – C:\src\flutter\bin ) ကို ထည့္ေပးရပါမည္။ Computer Environment Variables ထဲ ထည့္ပံုထည့္နည္းကို ဤ ေနရာ တြင္ ဖတ္ရႈႏိုင္ပါသည္။ ၎ ေနာက္ Command Prompt တြင္ flutter ကို ရိုက္ထည့္ၾကည့္ပါ။

IDE အတြက္ေတာ့ VS Code ကို အသံုးျပဳပါတယ္။ ၎က အသံုးျပဳရတာ အဆင္ေျပပါတယ္။VS Code ကုိ အသံုးျပဳမယ္ဆိုရင္ေတာ့ MARKETPLACE ကေန Extensions အခ်ို႕ကို ထည့္သြင္းဖို႔ လိုမည္ ျဖစ္ပါတယ္။ Flutter, Awesome Flutter Snippets, Flutter Widget Snippets, Flutter Stateful Widget Generator စသည္တို႔ကို ထည့္သြင္းဖို႔ လိုမွာ ျဖစ္ပါတယ္။

Flutter App တစ္ခု ဖန္တီးဖို႔ အတြက္ Command Prompt ( VS Code Terminal ) ကေန flutter create myproj။ myproj သည္ မိမိစိတ္ၾကိဳက္ေပးႏိုင္ပါတယ္။ ဒါေပမယ့္ Small Letter ( a-z ႏွင့္ underscore _ ) သာ အသံုးျပဳရပါမည္။ ထိုေနာက္ Flutter Project တစ္ခုကို ရရိွမွာ ျဖစ္ပါတယ္။

၎ Project Folder Structure တြင္ lib Folder သည္ Developer မ်ား၏ Source Codes မ်ား သိမ္းထားသည့္ ေနရာျဖစ္ပါတယ္။ ၎ Folder တြင္ main.dart file သည္ App ၏ ပထမဆံုး Run မည့္ ဖိုင္ ျဖစ္ပါသည္။

ပံုထဲတြင္ ေဖာ္ျပထားေသာ အနီေရာင္ လိုင္းမ်ား၏ ရည္ညႊန္းခ်က္မ်ားကို
# 1 App ၏ Android Package နာမည္ကို ျပင္ႏိုင္ပါတယ္။
# 2 App နာမည္ကို ျပင္ရမွာ ျဖစ္ပါတယ္။

App Icon ကို ျပင္မယ္ဆိုရင္ေတာ့ ပံုပါ အတိုင္း လမ္းေၾကာင္း သြားရမွာ ျဖစ္ပါတယ္။ ပံုပါ Folder ထဲ ဝင္မယ္ဆိုရင္ေတာ့ ic_launcher.png ဆိုတဲ့ ဖိုင္ကို ေတြ႕မွာ ျဖစ္ၿပီး ပံု၏ Resolution အတိုင္း ျပင္ရမွာ ျဖစ္ပါတယ္။

ယခုလို ဖတ္ရႈ ေပးတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္။ ဆက္လက္၍လည္း Flutter ႏွင့္ ပတ္သက္၍ ဆက္လက္ မွ်ေဝ ေပးသြားမွာ ျဖစ္ပါတယ္။

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *