In many cases, when you want to build responsive UIs, you will need to know the screen size (width and/or height). In this post, let’s create simple functions to retrieve those values:

1. Get screen width

double getScreenWidth(BuildContext context) {
  return MediaQuery.of(context).size.width;
}

2. Get screen height

double getScreenHeight(BuildContext context) {
  return MediaQuery.of(context).size.height;
}

3. Get screen height and exclude SafeArea

double getScreenHeightExcludeSafeArea(BuildContext context) {
  final double height =  MediaQuery.of(context).size.height;
  final EdgeInsets padding = MediaQuery.of(context).padding;
  return height - padding.top - padding.bottom;
}

Phuc Tran

Creator of Coflutter.
Daddy at home.
Building education apps!
Follow him on Twitter, Github, StackOverflow, LinkedIn, Upwork.