How to use MediaQuery in Flutter to determine responsiveness

layoutbuilder_example.dart

import 'package:flutter/material.dart';

class LayoutBuilderExample extends StatelessWidget {
  const LayoutBuilderExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('LayoutBuilder Example')),
      body: LayoutBuilder(builder: (context, constraints) {
        if (constraints.maxWidth > 400) {
          return Center(
            child: Row(
              children: [
                Container(
                  height: constraints.maxHeight,
                  width: constraints.maxWidth / 4,
                  color: Colors.red,
                  child: const Center(child: Text('Side navigation')),
                ),
                Expanded(
                    child: Container(
                  height: constraints.maxHeight,
                  color: Colors.blue,
                  child: const Center(child: Text('Main view')),
                ))
              ],
            ),
          );
        } else {
          return Center(
            child: Container(
              height: constraints.maxHeight,
              width: constraints.maxWidth,
              color: Colors.red,
              child: const Center(
                child: Text('Mobile view'),
              ),
            ),
          );
        }
      }),
    );
  }
}