When I have an AppBar on my screen, it looks like this:
But I don't need AppBar so I removed it. As a result my screen looks like this:
As you can see, the top of my screen is in the StatusBar (where there are clock, Internet connection icon, and so on).
Please help me change my code so that my screen starts right after the StatusBar.
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Container(
child: Scaffold(
// appBar: AppBar (title: const Text(_title)),
body: const MainWidget(),
),
)
);
}
Thanks in advance.
Edit 1. Why doesn't this work for the Container case? I had this code on another screen:
#override
Widget build(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height,
...
I changed it to this:
#override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
height: MediaQuery.of(context).size.height,
...
But nothing has changed. Why?
Wrap your scaffold body with SafeArea widget
#override
Widget build(BuildContext context) {
return SafeArea(
For your case, do it on home or scaffold.
home: SafeArea(
More about SafeArea
Related
my app is working fine on android but for ios its crashing ,
if i comment the AppBar , its working in ios, but with app its not working.
appBar: AppBar(), // here is the problem
#override
Widget build(BuildContext context) {
final screenSize = MediaQuery.of(context).size;
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(), // here is the problem
backgroundColor: Colors.black,
body: SafeArea(
main.dart code,
#override
Widget build(BuildContext context) {
pushNotificationMessage();
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
return MultiProvider(
providers: [
ChangeNotifierProvider<AppData>(create: (_) => AppData()),
],
child: GetMaterialApp(
title: 'ABC App',
debugShowCheckedModeBanner: false,
I think your issue here is Appbar conflicting with the non safe area in your iOS device (upper notch for example), so you can fix that by one of two ways:
First way(encouraged), you can wrap your scaffold itself in the SafeArea widget instead of the body of the scaffold:
#override
Widget build(BuildContext context) {
final screenSize = MediaQuery.of(context).size;
return SafeArea(
Scaffold(
key: _scaffoldKey,
appBar: AppBar(), // here is the problem
backgroundColor: Colors.black,
body: Container(
Second way, you can remove AppBar() from the scaffold and add it inside your body widget, for example:
#override
Widget build(BuildContext context) {
final screenSize = MediaQuery.of(context).size;
return Scaffold(
key: _scaffoldKey,
backgroundColor: Colors.black,
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: const EdgeInsets.only(bottom: 30), child: AppBar()),
In flutter, you can for example have two pages with their own sets of widgets that when you navigate from one page to the other, the widgets on the screen will change to the other one.
But is it possible to have a completely seperate layer of widgets, that is drawn on top of all pages and it's widgets would remain when the navigation happens?
Completely possible!
Method 1: Subnavigators
Make the widget you want to stay consistent be at the same level or higher up in the widget tree than the navigator. For example (MaterialApp widget creates navigator automatically at its level)
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Column(
children: [
Container(
height: 100,
color: Colors.red,
),
Expanded(
child: MaterialApp(
home: PageOne(),
),
),
],
));
}
}
class PageTwo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
appBar: AppBar(
title: Text("Page Two"),
),
);
}
}
class PageOne extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
child: Text("Open Page Two"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => PageTwo()),
);
},
),
),
appBar: AppBar(
title: Text("Page One"),
),
);
}
}
This will keep a red container over any navigation. You could use a Stack instead of a Column if you wanted an overlay. At this point we have two navigators because we have two MaterialApps. Calling navigator.of(context) retrieves the closest one in the widget tree, which will be the subnavigator, allowing our navigation to only affect everything under the second MaterialApp widget
Method 2: Keys
I won't go too in depth on these here. But keys are a way to identify widget across rebuilds. You can give the widget you want to stay consistent a key, and it will be considered the same widget on rebuilds. Check out more information on keys in flutter: https://medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d
I am just trying to create an simple widget but it keeps showing this error what should I do?
It looks like your root widget is not MaterialApp, other widgets that you are using need to be descendants of some media query ancestor. Eg. MaterialApp.
Instead of this:
Widget build(BuildContext context) {
return Container(
child: SomeWidget(),
);
}
Make it:
Widget build(BuildContext context) {
return MaterialApp(
home: SomeWidget(),
);
}
You are getting the error because your application doesn't return a Material App. Check this code below, it works perfectly.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.redAccent,
title: Text('unit converter', textScaleFactor: 1.0,),
),
body: Container(
color: Colors.purpleAccent,
),
),
);
}
}
The output of the code:
You are getting this error because on the top of the tree a material widget should be used.
here you can use Scaffold or MaterialApp widget.
and If you are trying to paint your screen background to some color then just use the parameter backgroundColor under your Scaffold widget.
Try code shown below
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.purpleAccent,
appBar: AppBar(
backgroundColor: Colors.redAccent,
title: Text("unit converter",textScaleFactor:4.0)
),
body: yourWidget()
);
}
I use theme proviser.I try to wrap each route and dialog in ThemeConsumer, but it dont work with drower,What should i do?.
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer( child: ThemeConsumer(child: SettingsPage())),
)};
I am wanting to make my AppBar go to the top of the page and just be visible under the bar that displays the time and battery level etc.. how would I go about doing this?
What I currently have
I'd like to reduce what I currently have to just be under the status bar ^^
Thanks,
Jack
You can wrap your Scaffold with a SafeArea Widget. This will prevent the Scaffold and with this also the AppBar from overlapping the status bar (which is part of the safe area):
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
appBar: AppBar(),
body: Center(
child: Text('Foo'),
),
),
),
);
}
}