System

Flutter Basic Syntax

မဂၤလာပါ။
ကၽြန္ေတာ္ကေတာ့ Spiceworks Myanmar တြင္ လုပ္ကိုင္လ်က္ ရွိေသာ ေဌးမင္းေခါင္ ျဖစ္ပါတယ္။ ကၽြန္ေတာ္ ဒီေန႔ ေျပာျပခ်င္တဲ့ အေၾကာင္းအရာကေတာ့ Google ကေန Release လုပ္ထားတဲ့ Flutter အေၾကာင္းေလးႏွင့္ Basic Syntax အေၾကာင္းေလးပဲ ျဖစ္ပါတယ္။ Flutter ဆိုတာကေတာ့ Free and Open-source Mobile UI Framework တစ္ခု ျဖစ္ၿပီး Dart Language ကို အေျခခံေရးသားထားတာ ျဖစ္ပါတယ္။ Flutter 2.2 (Stable Version) ကို အသုံးျပဳၿပီး Mobile မွာဆို Android, iOS, Desktop မ်ားအတြက္ Windows, Linux, MacOS, Web Platform မ်ားအတြက္ Single codebase နဲ႔ App မ်ားကို ေရးနိုင္မွာ ျဖစ္ပါတယ္။
Flutter က ကၽြန္ေတာ္တို႔ ေရးလိုက္တဲ့ ကုတ္ကို Run မယ့္ Platform ရဲ့ Natively-compiled လုပ္ေပးတဲ့အတြက္ Native App ရဲ့ Speed ကို ရရွိမွာ ျဖစ္ပါတယ္။ Flutter မွာ ​Plugins ေတြကို ကိုယ္တိုင္ ေရးသားနိုင္သလို အျခား Developer ေတြ ေရးထားတဲ့ Plugins မ်ားလည္း ထည့္သုံးလို႔ ရပါတယ္။

Flutter ကို အခုမွ စတင္ install လုပ္မယ့္သူမ်ားအတြက္ ေအာက္က လင့္မွာ တစ္ခ်က္ ေလ့လာနိုင္ပါတယ္။ ေအာက္ပါပို႔စ္မွာဆိုရင္ App Launcher Icon ကိုလည္း ဘယ္လို ျပင္ရလဲဆိုတာ ေျပာျပေပးထားပါတယ္။
Flutter Basic knowledge First Step to Coding

ေအာက္က လင့္မွာ မိမိ ရွာေဖြခ်င္ေသာ Plugins မ်ား free ယူလို႔ ရပါတယ္။
Pub Dev

Flutter မွာ Plugin ထည့္မယ္ဆိုရင္ မိမိ App Folder ထဲက pubspec.yaml ဖိုင္ကို ဖြင့္ပါ။ အဲ့ေနာက္မွာ dependencies ေအာက္မွာ ထည့္ေပးဖို႔ လိုမွာ ျဖစ္ပါတယ္။ ထည့္တဲ့အခါ Tab တစ္ခါသာ တြန္းေပးဖို႔ လိုပါမယ္။ အဲ့ဖိုင္တြင္ ျပင္တဲ့အခါ Tab Indent Based ျဖစ္တဲ့အတြက္ ပိုတြန္းလို႔ မရပါဘူး။

Most Useful Widgets
Flutter မွာ အဓိက အမ်ားဆုံး အသုံးျပဳတဲ့ Widget မ်ားအေၾကာင္း ေျပာျပေပးပါမယ္။ Flutter မွာ UI ကို ေရးတဲ့အခါ အားလုံးသည္ Widget မ်ားသာ ျဖစ္ပါတယ္။ Widget, Color, Textfield တို႔ကို အသုံးျပဳဖို႔ဆို ကၽြန္ေတာ္တို႔က material သို႔ cupertino ကို import လုပ္ေပးဖို႔ လိုပါမယ္။ ကၽြန္ေတာ္ကေတာ့ material.dart ကို import လုပ္ပါတယ္။ Class ေတြ ေရးမယ္ဆိုရင္ေတာ့ မထည့္လည္းရပါတယ္။ Flutter မွာက import ထည့္ဖို႔ လိုအပ္လာလၽွင္ (သို႔) ေရးထားတဲ့ Function (သို႔) class ကို စက္က မသိရင္ import (သို႔) create လုပ္ခိုင္းပါတယ္။ အဲ့အတြက္ import ေတြက လိုအပ္မွ ထည့္ေပးရပါမယ္။

Widget : Container
Container ဆိုတာ UI မွ Group ဖြဲ႕တဲ့အခါ အသုံးျပဳေလ့ ရွိပါတယ္။ HTML မွာဆို DIV နဲ႔ တူပါတယ္။
Container Attribute ေတြထဲ အသုံးအမ်ားဆုံးကေတာ့ decoration, margin, padding, color မ်ားျဖစ္ပါတယ္။

Container Attribute: color
color ကေတာ့ Container ရဲ့ ေနာက္ခံ အေရာင္ေျပာင္းဖို႔အတြက္ သုံးပါတယ္။ Colors လို႔ ရိုက္ၿပီး . (dot) ရိုက္လိုက္တာနဲ႔ ရနိုင္တဲ့ အေရာင္ေတြ IDE မွ ျပေပးပါလိမ့္မယ္။ ဥပမာ Colors.black, Colors.red, Colors.blue စသည္ျဖင့္ ရွိသလို Colors.black54, Colors.red[300], Colors.blue[800] စသည္ျဖင့္ အေရာင္အတိုးအေလ်ာ့ လုပ္လို႔ ရပါမယ္။ အကယ္၍ အေရာင္ကို မိမိစိတ္ႀကိဳက္စပ္ဖို႔အတြက္လည္း Hex Color မ်ားလည္း တည္ေဆာက္လို႔ ရပါတယ္။ ဥပမာ – Color(0xffb74093) လိုမ်ိဳးပါ။
အဲ့မွာ သိထားရမွာက Container မွာ decoration ထည့္လိုက္ရင္ color code ကို container ေအာက္ တိုက္ရိုက္ သုံးလို႔ မရေတာ့ဘဲ decoration attribute ေအာက္ကို ေ႐ႊ႕ေပးရပါမယ္။

Container Attribute: decoration
decoration ဆိုတာ နာမည္အတိုင္းဘဲ container ကို ႐ုပ္လုံးႂကြေအာင္ ဖန္တီးယူတဲ့အခါ အသုံးျပဳပါတယ္။ decoration ေအာက္မွာဆိုရင္ အေပၚမွာ ေျပာခဲ့သလို color ရွိမယ္၊ shape, side, image, shadows, gradients ( 3D ေဖာင္းႂကြ Background လုပ္နိုင္တယ္။ )၊ border မ်ား ပါဝင္ပါမယ္။

decoration ေအာက္ image မွာဆိုရင္ Decoration Image ဆိုၿပီး ထပ္ခံၿပီး အဲ့ေနာက္ asset image သို႔ network image ဆိုၿပီး ေခၚနိုင္ပါတယ္။ asset image ကိုေတာ့ pubspec.yaml file ထဲက assets: ေအာက္မွာ ထည့္ထားတဲ့ဖိုင္ေတြကို ဖိုင္ လမ္းေၾကာင္းထည့္ၿပီး ေခၚသုံးလို႔ ရပါမယ္။

Container Attribute: margin
margin ကေတာ့ CSS မွာ ပါတဲ့ margin နဲ႔ အလုပ္လုပ္ပုံ တူပါတယ္။ margin: const EdgeInsets.all(10) ဆိုရင္ အနားပတ္လည္ ၁၀ point ျခားေပးပါမယ္။ သူ႔မွာ px မရွိပါ။ double value ကို ဒဲ့ထည့္ေပး႐ုံပါဘဲ။ EdgeInsets.symmetric(horizontal: 10, vertical: 5) ဆိုၿပီး အလ်ားလိုက္၊ အေပၚ၊ ေအာက္ ကိန္းဂဏန္းမ်ား အသုံးျပဳနိုင္ပါတယ္။

Container Attribute: padding
padding ကေတာ့ margin နဲ႔ ေရးပုံတူပါတယ္။ Effect ကေတာ့ margin က အျပင္ျဖစ္ၿပီး padding ကေတာ့ container အထဲကို ျခားေပးတာ ျဖစ္ပါတယ္။

Container Attribute: width/height
Container ရဲ့ အရြယ္အစားကို သတ္မွတ္တာ ျဖစ္ပါတယ္။ Screen Size အျပည့္ယူခ်င္ရင္
Width အတြက္ MediaQuery.of(context).size.width (သို႔) double.infinity
Height အတြက္ MediaQuery.of(context).size.height သတ္မွတ္နိုင္ပါတယ္။


Widget SizedBox
SizedBox ကေတာ့ နာမည္အတိုင္း အရြယ္အစားကို သတ္မွတ္တာ ျဖစ္ပါတယ္။ သူ႔မွာ Container လိုဘဲ width/height ရွိပါမယ္။ အကယ္၍ သင္က container လို decoration ေတြ color တြ မသုံးဘူးဆို SizedBox ကို အသုံးျပဳနိုင္ပါတယ္။

ဒီေန႔ကေတာ့ ကၽြန္ေတာ္ Flutter Widget မ်ားထဲက Container အၾကာင္းကို ေျပာျပထားတာ ျဖစ္ပါတယ္။ ဆက္လက္၍လည္း TextField, Image, Stack, ElevatedButton, TextButton မ်ား အသုံးျပဳပုံကို ေျပာျပေပးသြားမွာ ျဖစ္ပါတယ္။ အခုလို အခ်ိန္ေပး ဖတ္ရႈတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္။

Hello

Leave a Reply

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