Safearea widget - How to avoid visual overlap with Notch on flutter mobile app?

<p>You can avoid visual overlap with a notch on the flutter mobile app by using SafeArea widget.</p> <p>Here is how it's going to look.</p> <p>![](../../../Uploads/7c4ee92a-2f18-4b82-8e50-aee5a31e7ad0.pngwidth="50%height="auto](</p> <p>In order to achieve this, all you need to do it add Safearea immediately after scaffold.</p> <p>Here is the complete code from main.dart file.</p> <p id="4ec9b0;](MyApp());" color:="" color:=>color: #9cdcfe;](args) </p> <p id="9cdcfe;](key" color:= color:=>color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget ); color: #9cdcfe;](@ color: #9cdcfe;](override</p> <p>color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext color: #9cdcfe;](context) { color: #c586c0;](return color: #569cd6;](const color: #4ec9b0;](MaterialApp( color: #9cdcfe;](home: color: #4ec9b0;](Scaffold( color: #9cdcfe;](body: color: #4ec9b0;](SafeArea(color: #9cdcfe;](child: color: #4ec9b0;](MyWidget()), ), ); } }</p> <p id="9cdcfe;](key," color:= color:="" color:="">color: #569cd6;](class color: #4ec9b0;](MyWidget color: #569cd6;](extends color: #4ec9b0;](StatelessWidget ); color: #9cdcfe;](@ color: #9cdcfe;](override</p> <p>color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext color: #9cdcfe;](context) { color: #c586c0;](return color: #4ec9b0;](Center( color: #9cdcfe;](child: color: #4ec9b0;](Container( color: #9cdcfe;](color: color: #4ec9b0;](Colors.color: #9cdcfe;](blue, )); } } ` Thanks,Srikanth</p>