Responsive and adaptive design

Why responsive?

One Flutter codebase can run on a 5-inch budget phone, a foldable, a 12-inch tablet, a laptop browser and a desktop window that the user resizes. A layout designed only for one phone looks stretched or cramped elsewhere. Responsive design means the layout responds to the available space; adaptive design also respects platform conventions and input methods, such as hover effects and keyboard shortcuts on desktop.

Reading the size

MediaQuery.sizeOf(context) is preferred over MediaQuery.of(context).size because it rebuilds only when the size changes, not when other MediaQuery values (like the keyboard insets) change.

Breakpoints

A breakpoint is a width at which the layout changes. Material Design's window size classes are a good guide: compact (under 600 dp wide, most phones in portrait), medium (600 to 840, small tablets and unfolded foldables) and expanded (840 and above, large tablets and desktops).

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

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.sizeOf(context).width;
    if (width < 600) {
      return const OrdersList();                          // phone: list only; tap opens details
    }
    return const Row(
      children: [
        SizedBox(width: 360, child: OrdersList()),         // tablet/desktop: list and details side by side
        VerticalDivider(width: 1),
        Expanded(child: OrderDetails()),
      ],
    );
  }
}

LayoutBuilder for reusable widgets

LayoutBuilder(
  builder: (context, constraints) {
    final columns = constraints.maxWidth > 900 ? 4 : constraints.maxWidth > 600 ? 3 : 2;
    return GridView.count(crossAxisCount: columns, children: const [/* tiles */]);
  },
)

Other helpful tools

• SafeArea: keeps content away from notches, rounded corners and system bars.
• Wrap: lets chips or buttons flow onto the next line instead of overflowing.
• Flexible and Expanded instead of fixed widths (module 5).
• ConstrainedBox(constraints: BoxConstraints(maxWidth: 600)): keeps forms and articles readable on wide screens.
• Adaptive widgets like Switch.adaptive and CircularProgressIndicator.adaptive show iOS-style controls on Apple platforms.

Text scaling and accessibility

Many users, especially older people, increase font size in system settings. Flutter scales text automatically. Test your screens at the largest text size: avoid fixed heights that cut text off, allow lines to wrap, and let buttons grow. Good contrast and large tap targets (at least 48 x 48) help everyone.

Common mistakes

• Fixed pixel widths copied from a phone design: overflow on small phones, emptiness on tablets.
• Using screen width deep inside small widgets instead of LayoutBuilder constraints.
• Forgetting SafeArea: content hidden behind the notch or the gesture bar.
• Never testing landscape, a tablet emulator, the web or large fonts.