Flutter: components overlap the phone's top bar

You must use SafeArea ,The SafeArea widget is used to ensure that the content of your app is visible and not obscured by device-specific elements such as the status bar, navigation bar, or any notches or cutouts on the screen.

The SafeArea widget is used to provide a padding around the content of your app, ensuring that it is visible and not hidden by any of the device-specific elements. This is particularly important on devices with notches or cutouts, where the content of your app might be obscured by the device hardware.

Here’s an example of how you might use the SafeArea widget in your code:

import 'package:flutter/material.dart';

class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Screen'),
      ),
      body: SafeArea(
        child: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

In this example, the SafeArea widget ensures that the text "Hello, World!" is not hidden by any device-specific elements, such as the status bar or navigation bar. The SafeArea widget adds padding to the top and bottom of the content, ensuring that it is visible and not obscured by any hardware.