proper way to get widget height in SafeArea

Question

I\'m trying to get the height of widget but it prints the same values

I/flutter (19253): full height: 976.0
I/flutter (19253): safe height: 976.0


        

Answer 1

Flutter 1.7.4

Add this at top level of Widget...and you can get exact SafeArea height.

final availableHeight = MediaQuery.of(context).size.height -
    AppBar().preferredSize.height -
    MediaQuery.of(context).padding.top -
    MediaQuery.of(context).padding.bottom;

Answer 2

You can always use LayoutBuilder for such cases.

child: SafeArea(
        child: new LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              // constraints variable has the size info
              return Container();
            }
        ),
      ),

for more info: https://www.youtube.com/watch?v=IYDVcriKjsw

Answer 3

I know that there is right answer, but maybe someone is looking for safe area height, not height of safe area widget child, but only safe area top padding:

var safePadding = MediaQuery.of(context).padding.top;

Answer 4

to get the size of the SafeArea, you need to encapsulate inside a LayoutBuilder , and use constraints.maxHeight

look at your own example modified:

I/flutter (20405): full Screen height: 683.4285714285714
I/flutter (20405): Screen height: 683.4285714285714
I/flutter (20405): Real safe height: 659.4285714285714

class _MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(body: _Body()),
    );
  }
}

class _Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('full Screen height: ${MediaQuery.of(context).size.height}');
    return Container(
      constraints: BoxConstraints.expand(),
      decoration: BoxDecoration(color: Colors.red),
      child: SafeArea(
        child: _SafeHeightWidget(),
      ),
    );
  }
}

class _SafeHeightWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        print('Screen height: ${MediaQuery.of(context).size.height}');
        print('Real safe height: ${constraints.maxHeight}');
        return Container(
          color: Colors.lightBlue,
        );
      },
    );
  }
}