This is the default flutter application template with only some extra styling for the title.
EDIT:
Here is a better image without transparency. I am referring to the space above the Appbar
MaterialApp(
home: HomePage());
}
Use MaterialApp Not Scaffold();
This extra space is toolbar height that related to your virtual device model. please change your device and then see what happened. I guess the problem is virtual device screen.
Or you can use SafeArea Widget to solve your problem.
Related
i'm starting on flutter, already sorry if it's a noob question
Basically started with a new project and there I am getting an already applied theme
How to remove this?
Thanks
Right now, you have a completely black screen because you don't have a Scaffold widget.
The Scaffold widget is screen that will be displayed on your display.
You can add your Text widget in the body property of your Scaffold
return const MaterialApp(
home: Scaffold(
body: Text("Hello")
)
);
So I am creating a new flutter widget and I am unable to understand how my app looks because of the space on top of the screen in my emulator,
As you can see there is a shaded area on top and my widgets are under it, is there any way to remove it?
Use Safe Area.
SafeArea is basically a glorified Padding widget. If you wrap another widget with SafeArea, it adds any necessary padding needed to keep your widget from being blocked by the system status bar, notches, holes, rounded corners, and other "creative" features by manufacturers.
Check this link for more.
Wrap your code with the SafeArea.
more info about SafeArea class
I am curious if I should always use a SafeArea widget at the top level of my screen. I mean....when would I want my content blocked by things like a notch? For me it seems like the answer is never.
So should I not just use SafeArea on every page? If so, should it be above or below the Scaffold widget?
You don't have to use SafeArea on every screen. It actually depends if an AppBar is used or not, because the AppBar automatically calculates the values and adds the required padding.
If you use it above a Scaffold the area where the padding is applied would be black. On the other hand, if you use it below the Scaffold the color of the area would depend on the app theme, probably the Scaffold background color.
If you won't add an app bar or add it. if you want to adjust the screen to be responsive using MediaQuery and you don't need any scroll inside the screen use it.
Use it as the first widget in the body of the scaffold.
I'm using SafeArea to avoid my display area clashing with the latest phones statusbar and camera notch. I use Scaffold without an AppBar.
Problem
Although the display area works as expected, a side-effect happens: the statusbar becomes a single-color region and all system icons include WIFI and battery disappear.
Attempts
I've tried various tips, including
Flutter - System bar colors with SafeArea
Flutter - How to set status bar color when AppBar not present
But all they do is set the color. The icons are still missing.
Question
Is this by design or am I missing any useful properties of SafeArea?
Try this
If you are using like this
Widget build(BuildContext context) { return SafeArea(...); }
then try this
Widget build(BuildContext context) { return AnnotatedRegion( value: SystemUiOverlayStyle.light, child:SafeArea(...);
does anyone know how to use the SafeArea widget in a custom app bar. I am having a red overflow flex box appear on my custom app bar due to a notch in my emulator. I want to still show my custom app bar without the red overflow box in a way that looks presentable. When I tried surrounding my appbar in a safeArea widget I received an error in my Scaffold widget where I had placed my appBar. The code looked like this: Scaffold( appBar: customAppBar(context)). The error read: The argument type 'SafeArea' can't be assigned to the parameter type 'PreferredSizeWidget'. I believe that the Scaffold expects a PreferredSizeWidget but is receiving a safeArea widget instead. Please let me know if there are any other solutions out there other than using the SafeArea widget. Below is a photo of what my emulator looks like with the custom app bar and the red overflow box.
If you always want to make sure notches and punch holes don't get into your AppBar or UI, use the builder function from MaterialApp like this:
#override
Widget build(BuildContext context) {
return MaterialApp(
builder: (context, child) => SafeArea(child: child),
home: MyApp(),
);
}
Now every single Page/Screen will be safe from being cut on the top.