Responsive Flutter Web

Orientation Builder

OrientationBuilder is a widget that rebuilds when the screen orientation (portrait or landscape) changes. It can be used to create adaptive layouts that depend on whether the device is in portrait mode or landscape mode.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OrientationBuilder Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('OrientationBuilder Demo')),
      body: OrientationBuilder(
        builder: (context, orientation) {
          return Center(
            child: Text(orientation == Orientation.portrait
                ? 'Portrait mode'
                : 'Landscape mode'),
          );
        },
      ),
    );
  }
}

Media Query

MediaQuery is a utility that can be used to retrieve media (i.e., screen) information. The MediaQueryData it provides includes metrics and settings related to the current media, like screen size, orientation, and brightness.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MediaQuery Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    var orientation = MediaQuery.of(context).orientation;

    return Scaffold(
      appBar: AppBar(title: Text('MediaQuery Demo')),
      body: Center(
        child: orientation == Orientation.portrait
            ? Text('Portrait mode\nSize: $size')
            : Text('Landscape mode\nSize: $size'),
      ),
    );
  }
}

Layout Builder

LayoutBuilder is a widget that returns a widget based on its parent widget's constraints. It's quite useful when you need to make widget decisions based on the size of the parent widget rather than the entire screen.

The LayoutBuilder widget takes a callback function, which returns a widget. The callback function provides a BuildContext and a BoxConstraints object, the latter of which contains information about the minimum and maximum width and height the child can occupy.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'LayoutBuilder Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('LayoutBuilder Demo')),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          if (constraints.maxWidth < 600) {
            return Center(child: Text('Small Layout'));
          } else {
            return Center(child: Text('Large Layout'));
          }
        },
      ),
    );
  }
}

Constrained Box

ConstrainedBox widget is used to apply constraints to its child. It enforces its child to follow specific width and height constraints, which you can define. If the child does not have any constraints or if its constraints are looser than those defined in the ConstrainedBox, then the constraints applied by the ConstrainedBox take precedence.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ConstrainedBox Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(title: Text('ConstrainedBox Demo')),
        body: Center(
          child: ConstrainedBox(
            constraints: BoxConstraints(
              minWidth: 100,
              maxWidth: 200,
              minHeight: 100,
              maxHeight: 200,
            ),
            child: Container(
              color: Colors.red,
            ),
          ),
        ),
      ),
    );
  }
}