I am trying to open another activity from a button click in flutter but it is showing some error - flutter

Question

import 'package:flutter/material.dart';
main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
appBar: AppBar(
title: Text("Page 1"),
),
body: Center(
child: Column(
children: <Widget>[
MaterialButton(
child: Text("Next Page"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => nextPage()),
);
},
color: Colors.red,
)
],
),
),
),
);
}
}
class nextPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.green),
home: Scaffold(
appBar: AppBar(
title: Text("Page 2"),
),
body: Center(
child: Column(
children: <Widget>[
MaterialButton(
child: Text("Go Back!"),
onPressed: () {
Navigator.pop(context);
},
color: Colors.red,
)
],
),
),
),
);
}
}
This is the code i am using to navigate to a new page but i am facing a problem even though compiler is not throwing any error
This is the error message i am getting
Another exception was thrown: Navigator operation requested with a context that does not include a Navigator.
I am getting this error when i am clicking on the button

Answer 1

You need home : Builder( builder: (context) => and Second Page remove MaterialApp
MaterialApp(
home: Builder(
builder: (context) => Scaffold(
appBar: AppBar(
title: Text("Page 1"),
),
body: Center(
child: Column(
children: <Widget>[
MaterialButton(
child: Text("Next Page"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => nextPage()),
);
},
color: Colors.red,
)
],
),
),
),
),
full code
import 'package:flutter/material.dart';
main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Builder(
builder: (context) => Scaffold(
appBar: AppBar(
title: Text("Page 1"),
),
body: Center(
child: Column(
children: <Widget>[
MaterialButton(
child: Text("Next Page"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => nextPage()),
);
},
color: Colors.red,
)
],
),
),
),
),
);
}
}
class nextPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Page 2"),
),
body: Center(
child: Column(
children: <Widget>[
MaterialButton(
child: Text("Go Back!"),
onPressed: () {
Navigator.pop(context);
},
color: Colors.red,
)
],
),
),
);
}
}

Answer 2

try this
import 'package:flutter/material.dart';
main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
appBar: AppBar(
title: Text("Page 1"),
),
body: Center(
child: Column(
children: <Widget>[
MaterialButton(
child: Text("Next Page"),
onPressed: () {
Navigator.of(context).pushNamed(NextPage.routeName),
);
},
color: Colors.red,
)
],
),
),
),
);
}
}
class NextPage extends StatelessWidget {
static const routeName = '/next-page';
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Page 2"),
),
body: Center(
child: Column(
children: <Widget>[
MaterialButton(
child: Text("Go Back!"),
onPressed: () {
Navigator.of(context).pop();
},
color: Colors.red,
)
],
),
),
);
}
}

Answer 3

You cant use the Navigator (in MyApp class) with the context you got before creating MaterialApp(). Wrap your MaterialButton with a Builder like so:
children: <Widget>[
Builder(
builder: (BuildContext innerContext) {
MaterialButton(
child: Text("Go Back!"),
onPressed: () {
Navigator.pop(innerContext);
},
color: Colors.red,
)
}
);
],
Besides this, some more issues:
i would also think about using onWillPop property for all those android use cases.
never ever use another MaterialApp() while navigating your app, use Scaffold() for example for childs.

Answer 4

You can also just move the MaterialApp Widget to the main()
main() => runApp(
MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue),
home: MyApp(),
),
);
and remove it from the other classes.
You only need one MaterialApp widget for your app. It's like "root" widget which configures the top-level Navigator, as you can see in documentation.