Responsive UI & Accessibility

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

Responsive UI & Accessibility ရဲ့ widget, state နဲ့ lifecycle behavior ကိုရှင်းပြနိုင်ရန်

Responsive, failure နဲ့ interaction cases စမ်းနိုင်ရန်

Accessible, testable, performant Flutter code ရေးနိုင်ရန်

Responsive UI & Accessibility ကို widget syntax အဖြစ်သာမမြင်ဘဲ constraints, size, position, rebuild scope, semantics နဲ့ platform adaptation contract အဖြစ်နားလည်ပါ။ Widget tree ကိုသေးသေးခွဲပြီး const widgets, lazy builders နဲ့ responsive constraints ကိုဦးစားပေးပါ။

ပိုပြီးနားလည်ထားရမယ့် အချက်

လက်တွေ့မှာ ဘယ်လိုအသုံးချမလဲ

Responsive UI & Accessibility example ကို small/large screen, text scaling, empty/loading/error, rapid interaction, navigation restore နဲ့ disposal cases ဖြင့် run/test လုပ်ပါ။ flutter analyze, widget tests နဲ့ profile mode ကိုလိုအပ်သလိုသုံးပါ။

ဒီသင်ခန်းစာပြီးရင်

Constraints, state ownership နဲ့ lifecycle ကိုရှင်းပြနိုင်ခြင်း
flutter analyze အောင်သော example ရေးနိုင်ခြင်း
Widget interaction သို့ failure state ကို test လုပ်နိုင်ခြင်း

dart

LayoutBuilder(
  builder: (context, constraints) {
    final wide = constraints.maxWidth >= 700;
    return Semantics(
      label: 'Task list',
      child: wide
          ? const Row(children: [Expanded(child: TaskList()), Expanded(child: TaskDetails())])
          : const TaskList(),
    );
  },
)

You should see

700px တွင် layout ပြောင်းပြီး semantic label ပါဝင်မည်

ကိုယ်တိုင်စမ်းကြည့်ရန်

Lifecycle/Performance သတိပေးချက်

Screen တစ်မျိုးတွင် sample output မှန်ရုံဖြင့် rebuild, overflow, accessibility, async နဲ့ lifecycle paths အားလုံးမှန်ပြီဟုယူဆခြင်း။

Accessibility — Flutter