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()
);
}
Related
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
This class in main.dart won't work.
import 'package:flutter/material.dart';
void main() {
runApp(new MyFlutterApp()
);
}
class MyFlutterApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
MaterialApp(
title: "My Flutter Application",
home: Scaffold(
appBar: AppBar(title: Text("hello"),),
body: Material(
color: Colors.lightBlueAccent,
child: Center(
child: Text(
"Hello Flutter",
textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.white, fontSize: 40.0,),
)
)
) ,
)
);
}
}
That's it. The entire main.dart.
The class won't work.
It shows:
Error: A non-null value must be returned since the return type 'Widget' doesn't allow null.
- 'Widget' is from 'package:flutter/src/widgets/framework.dart' ('../../flutter_projects/flutter/packages/flutter/lib/src/widgets/framework.dart').
Widget build(BuildContext context) {
build method has to return a widget. Try
class MyFlutterApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "My Flutter Application",
home: Scaffold(
appBar: AppBar(title: Text("hello"),),
body: Material(
color: Colors.lightBlueAccent,
child: Center(
child: Text(
"Hello Flutter",
textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.white, fontSize: 40.0,),
)
)
) ,
)
);
}
}
The issue is in the lines:
#override
Widget build(BuildContext context) {
MaterialApp(
title: "My Flutter Application",
The problem is that the line
Widget build(BuildContext context) {}
is a function and as pretty much in any language function signature the return type of function is the very first part which here is Widget.
As dart is a statically typed language and if some method/function has a return type you need to return is else it throws compile time error.
Whereas in you function you do not return anything you are just declaring the MaterialApp instance. What exactly should have be done was either to user return before MaterialApp which should look like:
#override
Widget build(BuildContext context){
return MaterialApp();//please not these semicolons are must if using return keyboard
}
or
The second work around is to use fat arrow operator => for inline returns. Which looks like:
#override
Widget build(BuildContext context) => MaterialApp()
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'm trying to set a drawer size dynamically.
import 'package:flutter/material.dart';
import './screens/tab_screen.dart';
//widgets
import './widgets/main_drawer.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: TabWidget(),
endDrawer: Container(
width: MediaQuery.of(context).size.width * 0.65,
child: MainDrawer(),
),
),
title: "Ali Azad",
// routes: {
// '/': (_) => TabWidget(),
// },
);
}
}
but I have got this error = MediaQuery.of() called with a context that does not contain a MediaQuery.;
If you take a look better in your code, you will see that your build method is called with a context and by the time of that call, there isn't any previous Widget, which mean that your MaterialApp doesn't exist yet when your build is called, so that BuildContext doesn't have any previous MaterialApp, you can solve this just by splitting your code like this:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
title: "Ali Azad",
);
}
}
// This Home Widget will be a child of MaterialApp, and the BuildContext has access to this Material widget.
class Home extends StatelessWidget{
#override
Widget build(BuildContext context){
return Scaffold(
body: TabWidget(),
endDrawer: Container(
width: MediaQuery.of(context).size.width * 0.65,
child: MainDrawer(),
)
);
}
}
Or if you don't want to create another Widget, then you should use a Builder widget that will generate a new BuildContext for you. Your Widget would look like this:
MaterialApp(
home: Builder(
build: (BuildContext context) {
return Scaffold(
body: TabWidget(),
endDrawer: Container(
width: MediaQuery.of(context).size.width * 0.65,
child: MainDrawer(),
)
);
}
),
title: "Ali Azad",
);
put your Container widget inside a Builder widget or create a separate widget an assign it to MaterialApp home parameter, this way you get the context of MaterialApp widget, the context you are now using doesn't have a MaterialApp.
I am learning flutter. i have made one app name chat x(title). the code is below
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Chat X'),
),
body: Card(child: Column(children: <Widget>[
Text('hey! this one is new');
],),),
),
);
}
}
when ever i want to debug this code i get this error
Expected to find ']'.
Remove ; from Text('hey! this one is new'); or you can place a , if you want to have more widgets inside Column
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Chat X'),
),
body: Card(child: Column(children: <Widget>[
Text('hey! this one is new'),
Text('hey! this one is second new'),
],),),
),
);
}
}
You shoud not have the ; after the Text widget. Like this:
Text('hey! this one is new')