You can achieve this using the media query. Alternatively, you can also check this article to achieve this, Safearea widget - How to avoid visual overlap with Notch on flutter mobile app? - FlutterCentral
Here is the output of this example.
Here is the 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: MyWidget(),
),
);
}
}
class MyWidget extends StatelessWidget {
const MyWidget({
super.key,
});
@
override
Widget build(BuildContext context) {
var notchPadding = MediaQuery.of(context).padding;
return Center(
child: Container(
color: Colors.red,
margin: notchPadding,
child: Center(
child: Text(
'$notchPadding
',
style: const TextStyle(fontSize: 30.0),
),
),
),
);
}
}
Thanks,Srikanth