mediaquery_example.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    final size = .of(context).size;
    return Scaffold(
      appBar: AppBar(title: const Text('MediaQuery Example')),
      body: Column(
        children: [
          if (size.width < 400) ...{
            Container(
                height: size.height,
                color: Colors.red,
                padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 16),
                child: const Center(child: Text('mobile view'))),
          } else ...{
            Row(
              children: [
                Container(
                    width: size.width / 4,
                    height: size.height,
                    color: Colors.red,
                    padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 16),
                    child: const Center(child: Text('Side navigation'))),
                Expanded(
                    child: Container(
                  width: size.width,
                  height: size.height,
                  color: Colors.blue,
                  child: const Center(child: Text('main view')),
                ))
              ],
            )
          }
        ],
      ),
    );
  }
}