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. So in this tutorial we would Get Device Screen Height Width in Flutter Dart on Button click event dynamically Android iOS Example Tutorial.
Contents in this project Get Device Screen Height Width in Flutter Dart on Button Click Android iOS Example:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and call our main Parent view class MyApp here.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with State less widget. In this class we would call our GetDimension() class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: GetDimension() ) ) ); } } |
4. Create a class named as GetDimension extends with StatefulWidget. In this class we would make pass our next GetDimensionState class using createState() method to enable mutable state.
|
1 2 3 4 5 |
class GetDimension extends StatefulWidget { GetDimensionState createState() => GetDimensionState(); } |
5. Create our main GetDimensionState class extends with State.
|
1 2 3 4 |
class GetDimensionState extends State { } |
6. Create 2 float double variable named as heightHolder and widthHolder in GetDimensionState class. We would use these two to store retrieved screen width and height.
|
1 2 |
double heightHolder = 0.0 ; double widthHolder = 0.0 ; |
7. Create function named as getHeightWidth() with Context argument in GetDimensionState class. In this class we would get the complete screen size using MediaQuery and store in double variables using State. We would call this function on button click event.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
getHeightWidth(context){ double width = MediaQuery.of(context).size.width; double height = MediaQuery.of(context).size.height; setState(() { heightHolder = height.roundToDouble(); widthHolder = width.roundToDouble() ; }); } |
8. Create 2 Text widget and 1 Raised Button widget in Widget build area of GetDimensionState class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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('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('Click Here To Get Device Height Width Dynamically'), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ) ])) ); } |
9. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( 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( 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('Click Here To Get Device Height Width Dynamically'), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ) ])) ); } } |
Screenshot in Android device:
Screenshot in iOS device:
Thank you very much, this method can be used to automate alot of things on a layout of an app, Thank you alot
Welcome 🙂 .