Exercise: Navigation, Async & API Challenge

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

ဒီ lesson က ပထမ exercise lesson ထက် ခက်ပြီး, Navigator, named routes, FutureBuilder, http package တို့ကို တစ်ပြိုင်နက် ပေါင်းသုံးရတဲ့ task တွေဖြစ်ပါတယ်။ Real app development မှာ screen တစ်ခုကနေ တစ်ခုကူးရင်း data ကို pass/return ဖြစ်ရတာ၊ network call ရဲ့ loading/error state ကို UI မှာ ကိုင်တွယ်ရတာတွေက အရေးကြီးပါတယ်။ ဒီ task တွေကို ကိုယ်တိုင်ရေးကြည့်ခြင်းအားဖြင့် mini-project lesson မှာ တွေ့ခဲ့တဲ့ concept တွေကို ခိုင်မာအောင် ပြန်လည်လေ့ကျင့်နိုင်ပါလိမ့်မယ်။ Task တစ်ခုချင်းစီအတွက် code skeleton ကို sample အနေနဲ့ ပေးထားပေမယ့် logic အပြည့်အစုံကို ကိုယ်တိုင်ဖြည့်ရပါမယ်။

လေ့ကျင့်ခန်းများ

Task 1: Named routes ('/', '/detail') ကိုသုံးပြီး Home screen ရဲ့ ListView item တစ်ခုကို tap လိုက်တာနဲ့ Detail screen ကို Navigator.pushNamed() နဲ့ item name (argument) ပါတွဲပို့ပြီး Detail screen မှာ ပြသပါ. Task 2: Detail screen ထဲမှာ 'Confirm' button တစ်ခုထည့်ပြီး Navigator.pop(context, true) နဲ့ result ကို Home screen ကို ပြန်ပို့ပါ, Home screen က result ကို await Navigator.pushNamed() နဲ့ လက်ခံပြီး SnackBar ပြပါ. Task 3: http package သုံးပြီး public API (ဥပမာ jsonplaceholder.typicode.com/users) ကနေ user list ကို async function နဲ့ fetch လုပ်ပြီး, loading အချိန်မှာ CircularProgressIndicator, success ရင် ListView.builder, error ရင် error Text ကို ပြသအောင် FutureBuilder နဲ့ ရေးပါ.

• Named routes သုံးပြီး argument (item name) ကို Home ကနေ Detail screen ကို pass လုပ်ပြီးပြီလား
• Detail screen ကနေ pop(context, true) နဲ့ result ကို Home ကို ပြန်ပို့ပြီး SnackBar ပြပြီးပြီလား
• http fetch ကို FutureBuilder နဲ့ loading/success/error state သုံးမျိုးလုံး ကိုင်တွယ်ရေးပြီးပြီလား

Code နမူနာ

// Task 1 & 2 skeleton
class DetailScreen extends StatelessWidget {
  final String itemName;
  const DetailScreen({super.key, required this.itemName});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(itemName)),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context, true);
          },
          child: const Text('Confirm'),
        ),
      ),
    );
  }
}

// Home screen call
final result = await Navigator.pushNamed(context, '/detail', arguments: 'Item A');
if (result == true) {
  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(content: Text('Confirmed!')),
  );
}

// Task 3 skeleton
Future<List<dynamic>> fetchUsers() async {
  final res = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));
  if (res.statusCode == 200) {
    return jsonDecode(res.body);
  } else {
    throw Exception('Failed to load users');
  }
}

// FutureBuilder<List<dynamic>>(
//   future: fetchUsers(),
//   builder: (context, snapshot) {
//     if (snapshot.connectionState == ConnectionState.waiting) {
//       return const CircularProgressIndicator();
//     } else if (snapshot.hasError) {
//       return Text('Error: ${snapshot.error}');
//     } else {
//       final users = snapshot.data!;
//       return ListView.builder(...);
//     }
//   },
// )

Home screen ကနေ item တစ်ခုကို tap လိုက်ရင် Detail screen ကို argument ပါပြီး ရောက်သွားပြီး, Confirm နှိပ်ရင် Home မှာ SnackBar ပေါ်လာပြီး, user list screen က loading indicator ကနေ real API data list ကို ဖော်ပြပေးပါလိမ့်မယ်။