When I am created a dashboard menu an icon on my application in flutter, the dashboard menu icon can be clicked and then go to a new page, but an error occurred, the error is “error Navigator operation requested with a context that does not include a Navigator” which I saw in the Debug Console, then I found the solution as follows :
Problem Analysis to handle “error Navigator operation requested with a context that does not include a Navigator”:
- this error occurs due to inserting a MaterialApp or WidgetApp widget into the widget tree.
THE SOLUTION : Add MaterialApp widget in Main method either in stateless or stateful widget then the problem will be resolved. - This error has nothing to do with the goal. This happens because the context does not contain “a Navigator instance as parent”
THE SOLUTION : Insert MaterialApp or WidgetsApp into your widget tree. Although it can be done manually using the Navigator directly, it is not recommended. Then, all children of that widget can access NavigatorState using Navigator.of(context).
The image below shows the error that occurred :
Here is my code that is show the error : “error Navigator operation requested with a context that does not include a Navigator”
import 'package:flutter/material.dart';
/////////////////////////////////////////////////////////////////////////////////
void main() {
runApp(MyApp());
}
// ignore: must_be_immutable
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(
"Flutter - error Navigator operation requested with a context that does not include a Navigator"),
),
body: Container(
child: GridView.count(
padding: const EdgeInsets.all(25),
crossAxisCount: 2,
children: <Widget>[
Card(
margin: EdgeInsets.all(8),
child: InkWell(
splashColor: Colors.blue,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const HomeRoute(),
),
);
},
child: const Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(
Icons.home,
size: 70,
color: Colors.blue,
),
Text('Home',
style: TextStyle(
fontSize: 17,
))
],
),
),
),
),
Card(
margin: EdgeInsets.all(8),
child: InkWell(
splashColor: Colors.blue,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ProfileRoute(),
),
);
},
child: const Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(
Icons.verified_user_sharp,
size: 70,
color: Colors.blue,
),
Text('Profile',
style: TextStyle(
fontSize: 17,
))
],
),
),
),
)
],
),
)));
}
}
class HomeRoute extends StatelessWidget {
const HomeRoute({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home Page'),
),
body: Container(
child: GestureDetector(
child: Container(
margin: EdgeInsets.only(top: 20),
child: Center(
child: Text('This is Home Page'),
),
),
onTap: () {
Navigator.of(context).pushNamed('medical-choose');
},
)));
}
}
class ProfileRoute extends StatelessWidget {
const ProfileRoute({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('My Profil'),
),
body: Container(
child: GestureDetector(
child: Container(
child: Text('data'),
),
onTap: () {
Navigator.of(context).pushNamed('medical-choose');
},
)));
}
}To fix the error message, we need just add MaterialApp to the main() function code, the code show as below :
void main() => runApp(MaterialApp(
title: "App",
home: MyApp(),
));Just is it, very simple and the commpleate code show as below
import 'package:flutter/material.dart';
/////////////////////////////////////////////////////////////////////////////////
void main() => runApp(MaterialApp(
title: "App",
home: MyApp(),
));
// ignore: must_be_immutable
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(
"Flutter - error Navigator operation requested with a context that does not include a Navigator"),
),
body: Container(
child: GridView.count(
padding: const EdgeInsets.all(25),
crossAxisCount: 2,
children: <Widget>[
Card(
margin: EdgeInsets.all(8),
child: InkWell(
splashColor: Colors.blue,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const HomeRoute(),
),
);
},
child: const Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(
Icons.home,
size: 70,
color: Colors.blue,
),
Text('Home',
style: TextStyle(
fontSize: 17,
))
],
),
),
),
),
Card(
margin: EdgeInsets.all(8),
child: InkWell(
splashColor: Colors.blue,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ProfileRoute(),
),
);
},
child: const Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(
Icons.verified_user_sharp,
size: 70,
color: Colors.blue,
),
Text('Profile',
style: TextStyle(
fontSize: 17,
))
],
),
),
),
)
],
),
)));
}
}
class HomeRoute extends StatelessWidget {
const HomeRoute({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home Page'),
),
body: Container(
child: GestureDetector(
child: Container(
margin: EdgeInsets.only(top: 20),
child: Center(
child: Text('This is Home Page'),
),
),
onTap: () {
Navigator.of(context).pushNamed('medical-choose');
},
)));
}
}
class ProfileRoute extends StatelessWidget {
const ProfileRoute({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Profile Page'),
),
body: Container(
child: GestureDetector(
child: Container(
margin: EdgeInsets.only(top: 20),
child: Center(
child: Text('This is Profile Page'),
),
),
onTap: () {
Navigator.of(context).pushNamed('medical-choose');
},
)));
}
}If the code above is executed, it will look like the video below and the error “error Navigator operation requested with a context that does not include a Navigator” will no longer appear.
That is the tutorial to fix error “error Navigator operation requested”, hope can helped
If you looking the tutorial about flutter, you can check the flutter tutorial here, thank u