Flutter safearea height

by

SafeArea Height in Flutter

The SafeArea widget in Flutter is used to create a padding around the content that avoids certain areas like notches, status bars, and device navigation bars. It ensures that your app’s content is visible and not obstructed by these areas in various devices.

To determine the height of the SafeArea in Flutter, you can use the MediaQuery class. MediaQuery is a class that provides access to various parameters of the current device, including the size and orientation of the screen.

Here’s an example of how you can use the MediaQuery class to get the height of the SafeArea:

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double safeAreaHeight = MediaQuery.of(context).padding.top;
    
    return Container(
      child: Text('SafeArea height: $safeAreaHeight'),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: MyWidget(),
    ),
  ));
}

In this example, we are using the MediaQuery.of(context).padding.top property to get the height of the SafeArea. The padding.top value represents the height of the safe area at the top of the screen.

You can also use other properties of the MediaQuery class like padding.bottom, padding.left, or padding.right to get the respective safe area heights.

By using the SafeArea and MediaQuery together, you can ensure that your app’s content is displayed within the safe area and not hidden behind notches or navigation bars.

Leave a comment