Exercise: Widget, Layout & State Warm-up

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

ဒီ lesson ကတော့ အသစ်ဘာမှ မသင်ပါဘူး၊ Basic နဲ့ Intermediate chapter တွေမှာ သင်ခဲ့တဲ့ Column/Row layout, ElevatedButton, GestureDetector, TextField, StatefulWidget နဲ့ setState() ကို ပေါင်းသုံးပြီး self-practice လုပ်ဖို့ပါ။ Task တစ်ခုချင်းစီက widget tree ကို လက်တွေ့ရေးကြည့်စေပြီး, state ပြောင်းလဲမှုကို UI ပေါ်မှာ real-time မြင်ရအောင် လေ့ကျင့်ပေးပါတယ်။ ကုဒ်ကို ကူးရေးရုံနဲ့မလုံလောက်ဘဲ ကိုယ်တိုင် logic ကို စဉ်းစားပြီး ဖြည့်ရေးဖို့ လိုပါတယ်။ ဒါကြောင့် answer ကို တန်းမကြည့်ဘဲ ကိုယ်တိုင်အရင်ကြိုးစားကြည့်ပါ။

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

Task 1: Counter app တစ်ခုကို StatefulWidget နဲ့ ဆောက်ပြီး, increment button နဲ့ decrement button နှစ်ခုစလုံးထည့်ပါ (count က 0 အောက်မကျအောင် ကန့်သတ်ပါ). Task 2: Row နဲ့ Column ကို ပေါင်းသုံးပြီး profile card layout တစ်ခု (avatar circle, name Text, description Text) ကို CrossAxisAlignment, MainAxisAlignment သုံးပြီး alignment ညီအောင် စီပါ. Task 3: GestureDetector ကို သုံးပြီး Container box တစ်ခုကို tap လုပ်တိုင်း background color ကို color list ထဲက အလှည့်ကျ ပြောင်းအောင် ရေးပါ. Task 4: TextField တစ်ခုနဲ့ 'Show' button ကို ပေါင်းပြီး, user ရိုက်ထည့်တဲ့ text ကို button နှိပ်လိုက်တာနဲ့ အောက်က Text widget မှာ ပြသအောင် setState() သုံးပါ.

• Counter app ကို increment/decrement button နှစ်ခုနဲ့ 0 အောက်မကျအောင် ကန့်သတ်ရေးပြီးပြီလား
• Row/Column ပေါင်းထားတဲ့ profile card layout ကို alignment ညီအောင် စီပြီးပြီလား
• GestureDetector နဲ့ color-cycle box၊ TextField+Show button task နှစ်ခုစလုံးကို setState() နဲ့ အလုပ်လုပ်အောင် ရေးပြီးပြီလား

Code နမူနာ

// Task 1 skeleton - Counter with limit
class CounterBox extends StatefulWidget {
  const CounterBox({super.key});
  @override
  State<CounterBox> createState() => _CounterBoxState();
}

class _CounterBoxState extends State<CounterBox> {
  int count = 0;

  void increment() {
    setState(() {
      count++;
    });
  }

  void decrement() {
    setState(() {
      if (count > 0) count--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('$count', style: const TextStyle(fontSize: 32)),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(onPressed: decrement, child: const Text('-')),
            const SizedBox(width: 12),
            ElevatedButton(onPressed: increment, child: const Text('+')),
          ],
        ),
      ],
    );
  }
}

// Task 3 hint - color cycle
final colors = [Colors.blue, Colors.green, Colors.orange, Colors.purple];
int colorIndex = 0;
// GestureDetector onTap: setState(() { colorIndex = (colorIndex + 1) % colors.length; });

Counter widget က 0 အောက် မကျဘဲ +/- button နှစ်ခုနဲ့ အလုပ်လုပ်ပြီး, profile card, color-cycle box, TextField+Show button task တွေအားလုံး setState() ခေါ်တိုင်း UI ကို correct ပြောင်းပြပေးပါတယ်။