How do you build responsive and adaptive Flutter layouts?

Responsive design reacts to available space, not to a device name. LayoutBuilder gives the constraints of the current box, which is more reliable than MediaQuery when a widget sits in a split view or a resizable window. MediaQuery is still useful for text scale, safe areas and orientation.

class Dashboard extends StatelessWidget {
  const Dashboard({super.key});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final wide = constraints.maxWidth >= 840;
        if (wide) {
          return Row(
            children: [
              const NavigationRail(
                destinations: [
                  NavigationRailDestination(
                    icon: Icon(Icons.home),
                    label: Text('Home'),
                  ),
                ],
              ),
              const Expanded(child: Feed()),
            ],
          );
        }
        return const Feed();
      },
    );
  }
}

• Use breakpoints from the design system rather than arbitrary pixel guesses
• Prefer LayoutBuilder for component-level decisions and MediaQuery for global context
• Respect text scaling and test at large accessibility font sizes
• Use SafeArea for notches, status bars and gesture insets
• On desktop and web, support mouse, keyboard and window resizing

Responsive versus adaptive

A responsive layout rearranges the same widgets for a narrower width. An adaptive app also changes interaction details: a date picker might become a dialog on desktop and a bottom sheet on mobile, or navigation might become a rail on tablets. Both should be driven by explicit constraints and platform capabilities.