Responsive Flutter layouts

Responsive UI is not simply scaling everything down. Reflow the information hierarchy based on available width.

• Use LayoutBuilder when a component needs local constraints.
• Use MediaQuery for device-level information such as padding and text scaling.
• Prefer flexible widgets over fixed widths.
• Move navigation from a bottom bar to a rail or drawer when space permits.
• Test narrow portrait, wide portrait, landscape and tablet widths.

LayoutBuilder(
  builder: (context, constraints) {
    final wide = constraints.maxWidth >= 900;
    return wide
      ? const Row(children: [NavigationRail(), Expanded(child: Content())])
      : const Column(children: [Content()]);
  },
)