How to use Flutter screen width and height with MediaQuery | Flutter Screen Size

In Flutter, you can use the MediaQuery class to obtain information about the current screen, such as its width and height. The MediaQuery class is often used in conjunction with the MediaQueryData class to access information about the device’s screen size.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height;

    return Scaffold(
            appBar: AppBar(
              title: Text('Flutter ListView Example'),
            ),
      body: Center(
        child: Container(
          width: screenWidth * 0.8, // 80% of the screen width
          height: screenHeight * 0.5, // 50% of the screen height
          color: Colors.blue,
          child: Center(
            child: Text(
              'Responsive Container',
              style: TextStyle(fontSize:20, fontWeight:FontWeight.bold,color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }