How To Add Device Screen Height&Width In Flutter App

admin_img Posted By Bajarangi soft , Posted On 10-09-2020

The default flutter mobile application screen size comes with combining Status bar height + App Bar height and Remaining screen height. Width has no parts it is simple in one count. In this tutorial we would calculate the device screen dimensions according to height and width using MediaQuery package.

How To Add Device Screen Height&Width In Flutter App

Complete Code For Device Height&Width Dynamically In Flutter
main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            backgroundColor: Colors.deepPurple[400],
            title: Text("Device Height Width Dynamically"),
          ),
            body: Center(
                child: GetDimension()
            )
        )
    );
  }
}

class GetDimension extends StatefulWidget {

  GetDimensionState createState() => GetDimensionState();

}

class GetDimensionState extends State {

  double heightHolder = 0.0 ;
  double widthHolder = 0.0 ;

  getHeightWidth(context){

    double width = MediaQuery.of(context).size.width;

    double height = MediaQuery.of(context).size.height;

    setState(() {
      heightHolder = height.roundToDouble();
      widthHolder = width.roundToDouble() ;
    });

  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        body: Center(child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                  padding: EdgeInsets.fromLTRB(0, 20, 0, 10),
                  child: Text('Height = '+'$heightHolder',
                      style: TextStyle(fontSize: 21))),

              Container(
                  padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
                  child: Text('Width = '+'$widthHolder',
                      style: TextStyle(fontSize: 21))),

              RaisedButton(
                onPressed: () => getHeightWidth(context),
                child: Text('Get Device Height Width Dynamically'),
                textColor: Colors.white,
                color: Colors.deepPurple[400],
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
              )

            ]))
    );
  }
}

Related Post