Responsive Layouts

Responsive Layouts

MediaQuery gives you screen size information. LayoutBuilder lets you build different layouts based on available space. Expanded and Flexible help widgets fill available space. You can show different layouts for narrow and wide screens.

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return Row(
        children: [
          Expanded(child: Text('Wide screen')),
          Expanded(child: Text('Two columns')),
        ],
      );
    } else {
      return Column(
        children: [
          Text('Narrow screen'),
          Text('One column'),
        ],
      );
    }
  },
)