flutter – MediaQuery screen size

main.dart

import 'package:flutter/material.dart';

void main() {runApp(const MyApp());}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primarySwatch: Colors.pink),
        home: const MyHomePage()
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: const Text("Flutter - MediaQuery Screen Size")
        ),
        body: bodyContent(context)
    );
  }

  bodyContent(BuildContext context) {
    // get the screen size
    Size size = MediaQuery.of(context).size;

    return Center(
      child: Text(
          "Width : ${size.width} \n Height : ${size.height}",
          style: const TextStyle(fontSize: 26),
          textAlign: TextAlign.center
      )
    );
  }
}

More flutter tutorials

• flutter – Padding background color
• flutter – Padding percentage
• flutter – MediaQuery width and height
• flutter – Widget size in percentage
• flutter – How to use FractionallySizedBox
• flutter – How to use SizedBox
• flutter – SizedBox background color
• flutter – SizedBox padding
• flutter – SizedBox border
• flutter – SizedBox border radius
• flutter – SizedBox expand
• flutter – SizedBox from size
• flutter – SizedBox shrink
• flutter – ConstrainedBox color
• flutter – ConstrainedBox padding