SafeArea widegt and Attributes,
"Hello World, I'm Vinit Mepani, a coding virtuoso driven by passion, fueled by curiosity, and always poised to conquer challenges. Picture me as a digital explorer, navigating through the vast realms of code, forever in pursuit of innovation.
In the enchanting kingdom of algorithms and syntax, I wield my keyboard as a magical wand, casting spells of logic and crafting solutions to digital enigmas. With each line of code, I embark on an odyssey of learning, embracing the ever-evolving landscape of technology.
Eager to decode the secrets of the programming universe, I see challenges not as obstacles but as thrilling quests, opportunities to push boundaries and uncover new dimensions in the realm of possibilities.
In this symphony of zeros and ones, I am Vinit Mepani, a coder by passion, an adventurer in the digital wilderness, and a seeker of knowledge in the enchanting world of code. Join me on this quest, and let's create digital wonders together!"
The SafeArea widget in Flutter is used to automatically adjust its child widgets to avoid overlapping with system overlays such as the status bar, bottom bar, or notch area. It ensures that the content within it is visible and does not get obstructed by the device's hardware features.
Attributes:
top (bool):
- Whether to include padding to avoid the status bar area. The default value is true.
bottom (bool):
- Whether to include padding to avoid the bottom navigation bar or device's bottom insets. The default value is true.
left (bool):
- Whether to include padding to avoid the left edge of the screen. The default value is true.
right (bool):
- Whether to include padding to avoid the right edge of the screen. The default value is true.
minimum (EdgeInsets):
- The minimum padding to apply around the child. It overrides the default behavior of automatically calculating padding based on system overlays.
Example:
import 'package:flutter/material.dart';
class SafeAreaExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SafeArea Widget Example'),
),
body: SafeArea(
top: true,
bottom: true,
left: true,
right: true,
minimum: EdgeInsets.all(16.0),
child: Container(
color: Colors.blue,
child: Center(
child: Text(
'SafeArea Example',
style: TextStyle(color: Colors.white),
),
),
),
),
);
}
}
void main() {
runApp(MaterialApp(
home: SafeAreaExample(),
));
}
Explanation:
In this example, a SafeArea widget is used to ensure that its child widget is padded to avoid overlapping with system overlays.
The top, bottom, left, and right properties are set to true to include padding to avoid the respective edges of the screen.
The minimum property is set to EdgeInsets.all(16.0) to provide a minimum padding of 16.0 around the child widget.
Inside the SafeArea, there's a Container with a blue background color and centered text saying "SafeArea Example".
When you run this code, the content inside the SafeArea will be padded to ensure it is not obstructed by system overlays like the status bar or bottom navigation bar.
