Get Device Screen Height Width Using Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 12-10-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. MediaQuery is used to get given to sub tree of view like screen width and height.

Get Device Screen Height Width Using Flutter Android App

Get Device Screen Height Width 
Complete Code For Get Device Screen Height Width  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(
            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(
      appBar: AppBar(
        backgroundColor: Colors.amberAccent,
        title: Text('Get Device Height Width'),
      ),
        body: Center(child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                  padding: EdgeInsets.fromLTRB(0, 20, 0, 10),
                  child: Text('Device Height = '+'$heightHolder',
                      style: TextStyle(fontSize: 21))),

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

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

            ]))
    );
  }
}

Related Post