Using SafeArea – Sriramkota

The latest iphones have a notch design, you know the little black strip at the top of the phone.

In the screen shot below the image bleeds into the notch area.

This is an excerpt of what the code currently looks like

 Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        home: Container(            
            // more code
        ), //end home
      ), //end matertial app 
    ); //end container
} //end build

Once a fix is added this how the screen looks

The solution to fix this is quite simple, just wrap the outer most container in the snippet above inside a SafeArea widget

Widget build(BuildContext context) {
return SafeArea(
child: Container(
child: MaterialApp(
debugShowCheckedModeBanner: false,
title: ‘Flutter Demo’,
home: Container(
// more code
), //end home
), //end matertial app
),
);
} //end build

Code

You can download the code here

If you find this article useful, please consider sharing it and also giving the repo a star on github.