Is home property in MaterialApp necessary to run Application? - flutter

At compile time it show no problem but after running a program, it shows following error in console.
For the "/" route, the "home" property, if non-null, is used
Here is my code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello world',
);
}
}
I am new in flutter and i want to know reasons why flutter give this error?


This error occurs because you don't have either routes or home properties in the MaterialApp class, so you can add either home property with the class that has build method that container Scaffold class.
so the easiest way, (if you don't have routes for multiple screens) is to add a home property like this:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello world',
home: YourClassName(),
);
}
}
After that, you can create YourClassName and it could be a stateless or stateful widget like this example:
class YourClassName extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(child: Text("some text")),
);
}
}
I wish that helps you

Related

Homepage - The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget

Example in Docs works.
But when I modify the code by removing MaterialApp from void main() and adding it to FirstRoute widget - I get the error mentioned in the title
Code that will generate this error:
void main() {
runApp(const FirstRoute());
}
class FirstRoute extends StatelessWidget {
const FirstRoute({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold()
)
}
}
Code that works fine:
void main() {
runApp(const MaterialApp(
title: 'Navigation Basics',
home: FirstRoute(),
));
}
class FirstRoute extends StatelessWidget {
const FirstRoute({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(.....)}}
So why is it important to have MaterialApp in void main() and not in widget?

Error when using SfDateRangePicker Flutter

This error happens as soon as I add the import statement:
import 'package:syncfusion_flutter_datepicker/datepicker.dart';
Remaining code is not needed to recreate this error
Code:
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datepicker/datepicker.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
// static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: SfDateRangePicker(),
));
}
}
Error:
../../snap/flutter/common/flutter/.pub-cache/hosted/pub.dartlang.org/syncfusion_flutter_datepicker-20.4.48/lib/src/date_picker/date_picker.dart:7596:37: Error: The argument type 'ScrollableState?' can't be assigned to the parameter type 'ScrollableState' because 'ScrollableState?' is nullable and 'ScrollableState' isn't.
- 'ScrollableState' is from 'package:flutter/src/widgets/scrollable.dart' ('../../snap/flutter/common/flutter/packages/flutter/lib/src/widgets/scrollable.dart').
scrollableState: Scrollable.of(context),

This error is mentioned on this issue.
https://github.com/syncfusion/flutter-examples/issues/730
You should fix version of syncfusion_flutter_datepicker in pubspec.yaml
Don't use version:
syncfusion_flutter_datepicker: ^20.4.48
Use like this:
syncfusion_flutter_datepicker: "20.4.44"
https://github.com/syncfusion/flutter-examples/issues/730#issuecomment-1413788831

Wrap your scaffold with MaterialApp
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SfDateRangePicker(),
));
}
}

Keep Widget always visible while changing pages in flutter

I'm currently using Navigator.pushNamed for changing the content of my app and I would like to have a persistent widget on top of every page without loading it every time I change a page. Is it possible or I have to change my entire app to use one scaffold and update the content of the scaffold? I would like to avoid this solution.

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Page1(),
builder: (context, child) {
return Scaffold(
appBar: AppBar(), // the common thing.
body: child,
);
},
);
}
}
class Page1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container();// add button to go to Page2
}
}
class Page2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container();
}
}
Description:
builder allows you to pass the different widget and each widget will be wrapped with the common widget, AppBar inside the scaffold here. Thus the scaffold and appbar is common for each page you visit.

MediaQuery.of() called with a context that does not contain a media query. visual studio Code [duplicate]

I have been trying to get the size of the whole context view in Flutter. But every time I try I'm getting the above mentioned error.
Here's my code:
import 'package:flutter/material.dart';
void main => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return new MaterialApp(
home: new Scaffold(),
);
}
}
Note: I also tried with a StatefulWidget.
Please, help me find what I'm doing wrong here.

You need a MaterialApp or a WidgetsApp around your widget. They provide the MediaQuery. When you call .of(context) flutter will always look up the widget tree to find the widget.
You usually have this in your main.dart:
void main() => runApp(App());
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Title',
theme: kThemeData,
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Container(
child: ...,
);
}
}

What works for us is using WidgetsBinding.instance.window instead of MediaQuery - also when setting the theme of the MaterialApp:
_pixelRatio = WidgetsBinding.instance.window.devicePixelRatio;
_screenWidth = WidgetsBinding.instance.window.physicalSize.width;
_screenHeight = WidgetsBinding.instance.window.physicalSize.height;
_statusBarHeight = WidgetsBinding.instance.window.padding.top;
_bottomBarHeight = WidgetsBinding.instance.window.padding.bottom;
_textScaleFactor = WidgetsBinding.instance.window.textScaleFactor;

You can access MediaQuery when you are inside MaterialApp. The place where you are accessing the media query is not correct.
Please refer below code:
import 'package:flutter/material.dart';
class CommonThings {
static Size size;
}
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'MediaQuery Demo',
theme: new ThemeData(
primarySwatch: Colors.red,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
CommonThings.size = MediaQuery.of(context).size;
print('Width of the screen: ${CommonThings.size.width}');
return new Container();
}
}
I've purposely created a class CommonThings which has static Size so that you can use it throughout the app.

I fixed it by using the following method. First I created a new class named MyWidget and returned it in MyApp within a MaterialApp's home:. Refer code below:
import 'package:flutter/material.dart';
void main => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return new MaterialApp(
home: new Scaffold(),
);
}
}
Also, declaring size as final doesn't matter. Orientation/Rotation is handled.

Solved by re-run the app(click on stop button in android studio then run again)

There is better way. Above solutions would require you to have only one screen widget or inherit all screens from parent class. But there is solution, place the media query initialization into onGenerateRoute callback function
main.dart
import 'package:flutter/material.dart';
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() => new MyAppState();
}
class MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Awesome App',
routes: NavigationUtils.routeList(),
onGenerateRoute: (routeSettings) =>
NavigationUtils.onGenerateRoute(routeSettings),
);
}
}
NavigationUtils.dart
import 'package:flutter/material.dart';
class NavigationUtils {
static onGenerateRoute(RouteSettings routeSettings) {
return new MaterialPageRoute(
builder: (context) {
WidgetUtils.me.init(context);
return StorageUtils.me.isLogged() ? HomeScreen() : ForkScreen();
},
settings: routeSettings,
);
}
}
WidgetUtils.dart
import 'package:flutter/material.dart';
class WidgetUtils {
MediaQueryData _mediaQueryData;
double _screenWidth;
double _screenHeight;
double _blockSizeHorizontal;
double _blockSizeVertical;
init(BuildContext context) {
_mediaQueryData = MediaQuery.of(context);
screenWidth = _mediaQueryData.size.width;
screenHeight = _mediaQueryData.size.height;
blockSizeHorizontal = screenWidth / 100;
blockSizeVertical = screenHeight / 100;
}
}
Warning: It is not copy & paste code, there are some singletons etc. but you should get the point ;)

Had the same error in
import 'screens/tasks_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return TasksScreen();
}
}
I solved it by:-
import 'package:flutter/material.dart';
import 'screens/tasks_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: TasksScreen(),
);
}
}

Wrap your code in a Material App widget. I also had the same issue as I forgot to use it and directly returned the scaffold.
In other words, your MediaQuery.of(context) should be inside the Material Widget.
Material app -> scaffold -> MediaQuery.of(context)

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyAppOne(),
);
}
}
class MyAppOne extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyAppOne>{
#override
Widget build(BuildContext context){
return Scaffold(
);
}
}

import 'package:flutter/material.dart';
void main() => runApp(App());
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body:HomePage(),
),
);
}
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size.height;
return Container(
height:size/2,
color:Colors.lightBlueAccent,
);
}
}
YOU SHOULD TRY THIS I HAVE DONE IT.

I was trying to change the package then this error arise,
so make sure you complete each of the following steps
https://stackoverflow.com/a/51550358/4993045

Add MaterialApp ...
void main() {
runApp(MaterialApp(
home: HomePage(),
));
}

Error -32601 received from application: Method not found

I'm getting error in this code. Any help?
import 'package:flutter/material.dart';
import './homepage.dart';
void main() => (MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "Chat",
home: HomePage(),
);
}
}
In HomePage.dart file
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Chat"
),
),
);
}
}
In Debug Console it shows:
Restarted application in 2,271ms.
Error -32601 received from application: Method not found
Reloaded 0 of 496 libraries in 237ms

The issue is with your code. Your syntax for the main method doesn't make sense for running a flutter app. You likely intended to call runApp on the widget within main.
Changed main:
import 'package:flutter/material.dart';
import './homepage.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "Chat",
home: HomePage(),
);
}
}
`