Flutter App Height Constraints

From this article I am going to explain you about flutter app height of status bar, app bar and the body. Then I will show you how can you calculate them.

First Look at this diagram.

Ok now you can get good idea about the flutter apps height constraints.

Then how to calculate them to create responsive UIs.

Status Bar Height

double statusBarHeight = MediaQuery.of(context).padding.top;

Calculate AppBar Height

Get AppBar to a variable like this. And then you can calc its height.

final appBar = AppBar();
double appBarHeight = appBar.preferredSize.height;

Body Height

double bodyHeight = MediaQuery.of(context).size.height -        statusBarHeight - appBarHeight;

Ok this is the way how you can calculate the height in various body aspects in flutter. Now think you have to calculate the height of a wight inside a body. How to calculate it ?.

For this wrap your widget inside the LayoutBuilder Widget. Then you can calculate it like this.

You can get constraints from the layout builder and then you can get maxHeight from the cons variable. So then you can decide the height that widget want.

LayoutBuilder(
 builder: (context, cons) {
  return Container();
}
);
To get the height cons give you the way.
// height = cons.maxHeight
// please consider you can use value between 0 and 1 to use it like below full code.

Full examples.

import 'package:flutter/material.dart';
class CustomCard extends StatelessWidget {
 const CustomCard({Key? key}) : super(key: key);
 @override
 Widget build(BuildContext context) {
  return LayoutBuilder(
   builder: (context, cons) {
    return Column(
     children: [
      SizedBox(
        width: double.infinity,
        height: cons.maxHeight * 0.3,
        child: const Card(
         color: Colors.green,
         child: Text('one'),)),
],);},);}}

I think this will help you to get good idea about the f lutter app heights. Thank you for reading.