Accessing Device Height and Width in Flutter

In this post, we’ll dive into how to access your device height and width inside a Flutter application. When developing mobile apps, adapting to different screen sizes is crucial for creating responsive designs that work seamlessly across multiple devices. By leveraging Flutter’s built-in tools, such as MediaQuery, you can easily access the dimensions of a device’s screen and apply these values to your layout. This allows you to make your app flexible and visually appealing on any screen size.

Let’s explore how we can access device dimensions and use them in our app!

Step 1: Add Variables for Device Dimensions

The first step is to create two new variables in your homepage class to hold the height and width of the device. These variables will allow you to access device dimensions throughout your class.

class HomePage extends StatelessWidget {
  late double _deviceHeight;
  late double _deviceWidth;
}

Here, _deviceHeight and _deviceWidth will hold the height and width of the device, respectively. They are marked as late because they will be initialized later, in the build method.

Step 2: Using MediaQuery to Access Device Dimensions

To access the height and width of the device, we’ll use Flutter’s MediaQuery. MediaQuery provides access to the current screen’s size and other properties. We can obtain the dimensions inside the build method:

@override
Widget build(BuildContext context) {
  _deviceHeight = MediaQuery.of(context).size.height;
  _deviceWidth = MediaQuery.of(context).size.width;

  return Container(
    height: _deviceHeight,
    width: _deviceWidth,
    color: Colors.red, // Example color to show the container size
  );
}

By calling MediaQuery.of(context).size.height and MediaQuery.of(context).size.width, we can obtain the height and width of the device in logical pixels.

Step 3: Applying the Dimensions

Once we have the device’s dimensions, we can use them to adjust the layout of the widgets accordingly. For example, we can pass these dimensions to a Container widget to ensure it covers the entire screen.

Container(
  height: _deviceHeight,
  width: _deviceWidth,
  color: Colors.red, // Full-screen red container
)

When the app runs, the container will stretch to the full height and width of the device screen.

Important Note: Safe Area and Widget Constraints

If you’re using a SafeArea widget, your container will respect its constraints and won’t grow beyond the safe bounds, even if the device’s dimensions are larger than the safe area. This is crucial to keep in mind when laying out widgets near the top or bottom of the screen.

SafeArea(
  child: Container(
    height: _deviceHeight,
    width: _deviceWidth,
    color: Colors.blue, // Within SafeArea bounds
  ),
)

Conclusion

By using MediaQuery class in Flutter, you can easily access your device height and width, ensuring that your app looks great on all screen sizes. This allows you to build flexible and responsive UIs that adapt smoothly to different devices. Whether you are developing for mobile, tablet, or even web, understanding how to work with device dimensions will improve the user experience of your Flutter apps.

Happy Coding…!!!