System

Create To-Do List App using Flutter

မဂၤလာပါ။
ကြၽန္ေတာ္ကေတာ့ Spiceworks Myanmar ကုမၸဏီတြင္ အလုပ္လုပ္ကိုင္လ်က္ရွိေသာ ေဌးမင္းေခါင္ ျဖစ္ပါတယ္။ ယေန႔ ကြၽန္ေတာ္တင္ျပေပးသြားမယ့္ blog အေၾကာင္းအရာကေတာ့ Create To-Do List App using Flutter ျဖစ္ပါတယ္။ Flutter ဆိုတာကေတာ့ Google က ပိုင္ဆိုင္ထားေသာ Framework တစ္ခု ျဖစ္ၿပီး Dart Language ကို အေျခခံၿပီး လုပ္ထားတာ ျဖစ္ပါတယ္။ Flutter ကို အသုံးျပဳၿပီး Developer ေတြက Mobile App (Android/iOS), Flutter Web, Desktop (Windows/Linux/MacOS) မ်ားအတြက္ Single Code-based ျဖင့္ ဖန္တီးတည္ေဆာက္ႏိုင္မွာ ျဖစ္ပါတယ္။

ပထမအဆင့္အေနနဲ႔ Flutter App အသစ္ တည္ေဆာက္ပါမယ္။ ထိုအတြက္ မိမိ Project တည္ေဆာက္မယ့္ လမ္းေၾကာင္းကို အရင္ သြားပါမယ္။ Mac အသုံးျပဳသူအေနနဲ႔ Terminal ကေန သြားလို႔ ရသလို Windows အသုံးျပဳသူေတြက cmd ကို Run Box ကေန ေခၚလိုက္ပါမယ္။ ထို႔ေနာက္ flutter create –org com.htayminkhaung todolist လို႔ ေဆာက္ပါမယ္။ htayminkhaung ေနရာမွာ မိမိ domain (သို႔) နာမည္ ထည့္လို႔ ရပါတယ္။ command ရဲ႕ ေနာက္ဆုံးတစ္ခုျဖစ္တဲ့ todolist ကေတာ့ App Package အတြက္ နာမည္ ျဖစ္ပါတယ္။ underscore သုံးလို႔ ရပါတယ္။ သို႔ေသာ္ dash သုံးလို႔ မရပါဘူး။

အဲ့ေနာက္ Project ကို VS Code နဲ႔ ဖြင့္ဖို႔အတြက္ code todolist လို႔ Terminal မွာ ႐ိုက္ထည့္ပါမယ္။

VS Code နဲ႔ ဖြင့္ၿပီးၿပီ ဆိုလွ်င္ iPhone 13 Emulator ကို Run ပါမယ္။

ၿပီးလွ်င္ေတာ့ VS Code က Terminal မွာ flutter run ကို ႐ိုက္ထည့္ပါမယ္။ အဲ့ေနာက္ Flutter App စတက္လာပါမယ္။ ထို႔ေနာက္ lib folder ေအာက္က main.dart ဖိုင္မွာ ရွိတဲ့ Original Code ေတြကို ဖ်က္ၿပီးေတာ့ ေအာက္က screenshot ပါ codeေတြကို ထည့္ပါမယ္။

လိုင္းနံပါတ္ ၁ မွာေတာ့ import ‘package:flutter/material.dart’; သူကေတာ့ material package ကို ေခၚသုံးတာပါ။ Flutter မွာေတာ့ Material Package က widget ေတြ ေခၚသုံးတိုင္း (သို႔) colors ေခၚသုံးတိုင္း import လုပ္ရပါတယ္။ MaterialApp Widget ကို App Initialize မွာ စတင္ Run ပါမယ္။ debugShowCheckedModeBanner: false, ကေတာ့ Screen ရဲ႕ ညာဘက္မွာ debug ဆိုတဲ့ စာသားေလး ေဖ်ာက္ထားခ်င္တဲ့အတြက္ ထည့္ထားပါမယ္။ true ေျပာင္းလိုက္လွ်င္ေတာ့ debug ဆိုတဲ့ စာသားေလးက screen ညာဘက္အေပၚမွာ ေပၚေနမွာ ျဖစ္ပါတယ္။

ထို႔ေနာက္ screens folder ကို lib folder ေအာက္မွာ တည္ေဆာက္ပါမယ္။ screens folder ေအာက္မွာ edit.dart (Todo List ကို ျပင္ရန္), list.dart (Todo List ကို ၾကည့္ရန္), new.dart (Todo List အသစ္ထည့္ရန္) အတြက္ဆိုၿပီး ဖိုင္သုံးဖိုင္ တည္ေဆာက္ပါမယ္။ ထို႔ေနာက္ lib folder ေအာက္မွာ data.dart ဖိုင္တစ္ခုေဆာက္ပါမယ္။ Todo List အတြက္ data type တစ္ခု တည္ေဆာက္ရန္ အတြက္ပါ။

data.dart ဖိုင္ေအာက္မွာ ေအာက္က screenshot ထဲက code ေတြကို ထည့္ပါမယ္။ Todo List Data အတြက္ name, date နဲ႔ time တို႔ ပါဝင္ပါမယ္။ line 15 မွာေတာ့ shared variable todoList Array ခန္း တစ္ခု တည္ေဆာက္ထားပါမယ္။ Database နဲ႔ မခ်ိတ္ဘဲ ေရးမွာ ျဖစ္တဲ့အတြက္ variable ထဲမွာ Todo Task ေတြကို ထည့္မွာ ျဖစ္ပါတယ္။

ထို႔ေနာက္ screens folder ေအာက္က ခုနက create လုပ္ထားတဲ့ list.dart ဖိုင္ေအာက္မွာ ေအာက္ပါအတိုင္း StatefulWidget ကို တည္ေဆာက္ပါမယ္။ StatefulWidget ေခၚဖို႔အတြက္ VS Code ကေန stf ကို ႏွိပ္ၿပီး tab ခလုတ္ကို ႏွိပ္လိုက္လွ်င္ ရပါၿပီ။ ထို႔ေနာက္ နာမည္ကို TodoListScreen လို႔ ေပးပါမယ္။ ၿပီးေနာက္ Material Package -> import ‘package:flutter/material.dart’; ကို ထည့္ပါမယ္။

ေအာက္ကcodeကို

@override
Widget build(BuildContext context) {
return Container(

);
}

ယခု codeနဲ႔ လဲပါမယ္။

ထို႔ေနာက္ Terminal ကေန r (reload) ကို ႏွိပ္လိုက္မယ္ဆိုလွ်င္ ပုံပါအတိုင္း ေပၚလာပါမယ္။

codeမွာဆိုလွ်င္ Scafold Widget ကို ပထမဆုံးေခၚထားပါတယ္။ သူကေတာ့ Flutter မွာ အဓိက မပါမျဖစ္ ပါရမယ့္ Widget ျဖစ္ပါတယ္။ appbar : AppBar(…) ကို ထည့္ထားတဲ့အတြက္ AppBar ေခၚလိုက္ပါမယ္။ title: const Text(“To-Do List”) Title ကို To-Do List ဆိုတဲ့ နာမည္ ေပးထားပါမယ္။ centerTitle: false; App Bar Title ကို အလယ္မွာ မေပၚဘဲ ဘယ္ဘက္ ကပ္ေအာင္ လုပ္ထားပါမယ္။ အကယ္၍ true ထားမယ္ဆိုလွ်င္ Title က App Bar အလယ္မွာ ေပၚပါမယ္။ background color ကို blue[900] (အေရာင္ကို အျပာေရာင္ level 900 ထားထားတာပါ) ထားပါတယ္။ အကယ္၍ ၉၀၀ မွာ မိမိ စိတ္ႀကိဳက္ အျပာေရာင္ အႏု၊ အရင့္ကို ထားလို႔ ရပါတယ္။ ၅၀၀ ကေတာ့ အျပာေရာင္ ျဖစ္ၿပီး အဲ့ေအာက္နည္းသြားလွ်င္ အေရာင္ေဖ်ာ့သြားမွာ ျဖစ္ၿပီး ၅၀၀ ေက်ာ္လွ်င္ အေရာင္က ပိုမိုရင့္လာမွာ ျဖစ္ပါတယ္။ actions ကို Array Widget ေပးရမွာျဖစ္ၿပီး App Bar ညာဘက္မွာ ေပၚမယ့္ Action Icon Buttons မ်ားအတြက္ ျဖစ္ပါတယ္။​ IconButton ကို သုံးမွာ ျဖစ္ၿပီး onPressed လုပ္လွ်င္ setState(() {}); UI ကို update လုပ္ခိုင္းမွာ ျဖစ္ပါတယ္။ icon ကို Icons.refresh Refresh Icon ကို ထည့္ထားပါမယ္။ size: 32 ထားပါမယ္။

Center Widget ထဲမွာ ေအာက္က codeကို ထည့္ပါမယ္။

for (var item in todoList) todoList Array ရွိ TodoData အားလုံးကို loop ပတ္ၿပီး ထုတ္ပါမယ္။ Container Widget တစ္ခုကို ေခၚၿပီး decoration ကေတာ့ container widget ကိို အလွဆင္ဖို႔အတြက္ attributes ေတြကို ထည့္ၿပီး လုပ္လို႔ ရပါတယ္။ အခုက bottom: BorderSide(color: Colors.grey) border ကို ေအာက္မွာပဲ ထည့္မွာ ျဖစ္ၿပီး အေရာင္ကိုေတာ့ မီးခိုးေရာင္ထားမွာ ျဖစ္ပါတယ္။ ListTitle ကို သုံးမွာ ျဖစ္ၿပီး title ကို task name, သူ႔ေအာက္က subtitle မွာ ရက္စြဲေပၚမွာျဖစ္ၿပီး trailing ကေတာ့ item ရဲ႕ ညာဘက္မွာ Icons.edit edit ခဲတံ icon ခလုတ္ေလး ထည့္မွာ ျဖစ္ပါတယ္။

Trailing Icon ကို ႏွိပ္လိုက္လွ်င္ Edit Screen ကို သြားၿပီး ျပင္မွာပါ။ index: todoList.indexOf(item) ခဲတံႏွိပ္လိုက္တဲ့ task ကို ျပင္မွာ ျဖစ္တဲ့အတြက္ indexOf ကို ထည့္ဖို႔ လိုပါမယ္။


အေပၚcodeမွာဆိုလွ်င္ FloatingActionButton ကို ေခၚပါမယ္။ Screen ရဲ႕ ညာဘက္ ေအာက္မွာ New To-do Task ကို ထည့္ဖို႔အတြက္ ခလုတ္ထည့္မွာ ျဖစ္ပါတယ္။


icon ကို const Icon(Icons.add) အေပါင္း icon ကို ထည့္ထားပါမယ္။ backgroundColor: Colors.blue[900] ေနာက္ခံ အေရာင္ကို အျပာရင့္ကို သုံးပါမယ္။ onPressed ကေတာ့ ထိုခလုတ္ကို ႏွိပ္လိုက္လွ်င္ MaterialPageRoute(builder: (_) => const AddTaskScreen()) Add Screen ကို သြားခိုင္းမွာ ျဖစ္ပါတယ္။

list Screen က ေပၚလာမယ့္ UI ကေတာ့ ေအာက္ပါအတိုင္း ျဖစ္ပါတယ္။

ထို႔ေနာက္ screens folder ေအာက္က ခုနက create လုပ္ထားတဲ့ new.dart ဖိုင္ေအာက္မွာ AddTaskScreen ဆိုတဲ့ StatefulWidget တစ္ခုကို တည္ေဆာက္ပါမယ္။

ဘာေၾကာင့္ StatefulWidget ကို သုံးသလဲဆိုေတာ့ setState ကို သုံးမွာ ျဖစ္တဲ့အတြက္ပါ။ ဆိုလိုတာက တစ္ခုခုျပင္လိုက္တိုင္း UI ကို update လုပ္မွာ ျဖစ္တဲ့အတြက္ပါ။ အကယ္၍ GetX, Provider, Bloc စတဲ့ Statemanagement Package ေတြ သုံးမယ္ဆိုလွ်င္ေတာ့ setState တို႔ StatefulWidget တို႔ မသုံးလည္း​ ရပါတယ္။ Statemanagement Package အသုံးျပဳနဲ႔ ပတ္သက္ၿပီးေတာ့လည္း ေနာက္ပိုင္း Blog မ်ားတြင္ တင္ျပေပးသြားမွာ ျဖစ္ပါတယ္။ ယခု Blog မွာေတာ့ StatefulWidget ကို သုံးၿပီး setState နဲ႔ UI Update လုပ္ပါမယ္။

UI မွာဆိုလွ်င္ Textfield ရယ္၊ Date နဲ႔ Time ရယ္ ပါမွာ ျဖစ္တဲ့အတြက္ ေအာက္ပါ codeကို class _AddTaskScreenState extends State { ေအာက္မွာ ထည့္ပါမယ္။

Code မွာ ၾကည့္မယ္ဆိုလွ်င္ TextEditingController txtCtrl = TextEditingController(); ကေတာ့ Textfield အတြက္ TextEditingController တစ္ခုကို ေခၚပါမယ္။ variable နာမည္ကိုေတာ့ txtCtrl လို႔ ေပးပါမယ္။

@override
void initState() {

initState ကေတာ့ ယခု new screen စတက္လာမယ္ဆိုလွ်င္ မိမိ လုပ္ေစခ်င္တဲ့ Process, ေခၚမယ့္ Function အားလုံးကို ထည့္လို႔ ရပါတယ္။ TimeOfDay currentTime = TimeOfDay.now(); ကေတာ့ Time ကို အခု current time ကို ထားမွာ ျဖစ္ၿပီး DateTime today = DateTime.now(); ကလည္း Date အတြက္ ဒီေန႔ ရက္စြဲကိုပဲ သတ္မွတ္ထားမွာ ျဖစ္ပါတယ္။

@override
Widget build(BuildContext context) {
return Container(

);
}

ေအာက္က codeနဲ႔ လဲပါမယ္။

codeမွာ AppBar Widget ေအာက္မွာ title ကို Add Task ဆိုတဲ့ စာသားထားပါမယ္။ leading ကေတာ့ AppBar ရဲ႕ ဘယ္ဘက္က close ခလုတ္အတြက္ ျဖစ္ပါတယ္။ icon ကို Icons.close close icon ကို သုံးမွာ ျဖစ္ၿပီး size: 32 က အ႐ြယ္အစား ၃၂ ထားမွာ ျဖစ္ပါတယ္။ icon button widget နဲ႔ အုပ္ထားတဲ့ အတြက္ ခလုတ္ကို ႏွိပ္လိုက္တဲ့အခါ icon အနားတစ္ဝိုက္မွာ shadow ေလး ထြက္လာမွာ ျဖစ္ပါတယ္။ onPressed မွာ () => Navigator.pop(context) ကို ထည့္ထားတဲ့အတြက္ ႏွိပ္လိုက္လွ်င္ pop လုပ္ထားတဲ့အတြက္ new screen ကို ပိတ္သြားမွာ ျဖစ္ပါတယ္။

Run ၾကည့္မယ္ဆိုလွ်င္ New Screen က ေအာက္ကအတိုင္း ေပၚမွာ ျဖစ္ပါတယ္။

အခုဆိုလွ်င္ List Screen နဲ႔ New Screen အတြက္ AppBar UI ကို တည္ေဆာက္ၿပီး ျဖစ္ပါတယ္။ အခုလို အခ်ိန္ေပး ဖတ္ရႈေပးတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္။ က်န္ရွိမယ့္ New Screen နဲ႔ Edit Screen အတြက္ codeကိုလည္း ေနာက္တစ္ပတ္တြင္ Part 2 ကို ဆက္လက္ တင္ျပေပးသြားပါမယ္။

Hello

Leave a Reply

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