Saat saya membuat menu dashboard di flutter dalam bentuk icon yang kemudian icon tersebut bisa di klik lalu menuju kehalaman baru. terjadi error : “error Navigator operation requested with a context that does not include a Navigator” yang saya lihat di Debug Console, kemudian saya menemukan solusinya seperti berikut :
Analisa Permasalahan :
- kesalahan ini terjadi karena memasukkan widget MaterialApp atau WidgetApp ke dalam pohon widget.
- SOLUSI : Tambahkan widget MaterialApp di metode Main baik di widget stateless atau stateful maka masalah akan teratasi.
- Kesalahan ini tidak ada hubungannya dengan tujuan. Hal ini terjadi karena context yang tidak berisi “a Navigator instance as parent”
- SOLUSI : Masukkan MaterialApp atau WidgetsApp ke dalam pohon widget Anda. Walaupun bisa dilakukan secara manual dengan menggunakan Navigator secara langsung namun kurang disarankan. Kemudian, semua turunan widget tersebut dapat mengakses NavigatorState menggunakan Navigator.of(context).
Photo dibawah ini merupakan error yang terjadi :
Kode saya yang error :
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');
},
)));
}
}
Untuk memperbaiki kode diatas kita hanya perlu menambahkan MaterialApp pada kode main() seperti dibawah ini
void main() => runApp(MaterialApp(
title: "App",
home: MyApp(),
));Jadi kode lengkapnya sebagai berikut
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');
},
)));
}
}
Jika kode diatas dijalankan maka akan tampak seperti video dibawah ini dan error “error Navigator operation requested with a context that does not include a Navigator” pun tidak muncul lagi.
Sekian tutorial ini, jika anda mau mencari tutorial seputar flutter lainnya bisa cek disini, semoga dapat memberikan manfaat.