Get Device Screen Height Width in Flutter Dart Android iOS Example

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.

2. Create void main runApp() method and call our main Parent view class MyApp here.

3. Create our main MyApp class extends with State less widget. In this class we would call our GetDimension() class.

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.

5. Create our main GetDimensionState class extends with 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.

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.

8. Create 2 Text widget and 1 Raised Button widget in Widget build area of GetDimensionState class.

9. Complete source code for main.dart file:

Screenshot in Android device:

Get Device Screen Height Width in Flutter Dart Android iOS ExampleScreenshot in iOS device:

Leave a Reply

Your email address will not be published. Required fields are marked *