You can avoid visual overlap with a notch on the flutter mobile app by using SafeArea widget.
Here is how it's going to look.
In order to achieve this, all you need to do it add Safearea immediately after scaffold.
Here is the complete code from main.dart file.
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@
override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: SafeArea(child: MyWidget()),
),
);
}
}
class MyWidget extends StatelessWidget {
const MyWidget({
super.key,
});
@
override
Widget build(BuildContext context) {
return Center(
child: Container(
color: Colors.blue,
));
}
}
Thanks,Srikanth