How solve problem Appbar icon clicked to navigate - flutter

Question

I try to develop flutter application. In this application I used Appbar with user icon to navigate another page.
Now I am clicked that icon(person icon) it shows error.
.
It has not proper documentation though internet. I couldn't found answer. My source code is
class MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text("Web Issue finder"),
actions: <Widget>[
new IconButton(
icon: Icon(Icons.person),
// tooltip: "Admin",
onPressed: (){
Navigator.push(
context,
MaterialPageRoute(builder: (_) => AdminAuth()),
);
}
)
],
),
body: new FutureBuilder(
future: loadStates(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return new ListView.builder(
itemBuilder: (context, index) {
if (index >= snapshot?.data?.length ?? 0) return null;
return new ListTile(
title: new Text("${snapshot.data[index]}"),
onTap: () {
debugPrint("${snapshot.data[index]} clicked");
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
IssueAddScreen(state: snapshot.data[index]),
),
);
},
);
},
);
} else {
return new Center(child: new CircularProgressIndicator());
}
})));
}
this is navigated class
import 'package:flutter/material.dart';
class AdminAuth extends StatelessWidget{
// final String state;
// IssueAddScreen({Key key, #required this.state}) : super(key: key);
#override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "iWallet",
home: Scaffold(
appBar: AppBar(title: Text("admin auth"),),
body: Text("cvgbh"),
),
);
}
}
Still I can't fix that error I am followed some documentation and stack overflow questions.
flutter documenttation
Github question and answer
Stackoverflow question and answer

Answer 1

Try to use context in your builder
Navigator.push(context,MaterialPageRoute(builder: (BuildContext context){return AdminAuth();
});

Answer 2

The issue here is with Navigator not present in the parent context.
You are using a context for the MyApp which isn't under the navigator.
MyApp <------ context
--> MaterialApp
(--> Navigator built within MaterialApp)
--> Scaffold
--> App Bar
--> ...
to solve this - Define new class that contain MaterialApp then pass MyApp() in home: of MaterialApp.
Same for the AdminAuth.
class MyAppHome extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyApp(),
);
}
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Web Issue finder"),
actions: <Widget>[
new IconButton(
icon: Icon(Icons.person),
// tooltip: "Admin",
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => AdminAuth()),
);
})
],
),
body: new FutureBuilder(
future: loadStates(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return new ListView.builder(
itemBuilder: (context, index) {
if (index >= snapshot?.data?.length ?? 0) return null;
return new ListTile(
title: new Text("${snapshot.data[index]}"),
onTap: () {
debugPrint("${snapshot.data[index]} clicked");
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
IssueAddScreen(state: snapshot.data[index]),
),
);
},
);
},
);
} else {
return new Center(child: new CircularProgressIndicator());
}
}));
}
}

Answer 3

The problem is the one explained above.
In my own words:
The context from which you are calling "Navigator" does not contain a "Navigator".
I guess the problem is that in you code you call Scaffold before MaterialApp complete the build method and get a Navigator or something like that.
If you separate the MaterialApp and the Scaffold (like below) you solve the problem.
void main() => runApp(MaterialApp(
home: MyApp())
class MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Web Issue finder"),
actions: <Widget>[
new IconButton(
icon: Icon(Icons.person),
tooltip: "Admin",
onPressed: (){
Navigator.push(
context,
MaterialPageRoute(builder: (_) => AdminAuth()),
);
}
)
],
),
body: new FutureBuilder(
future: loadStates(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return new ListView.builder(
itemBuilder: (context, index) {
if (index >= snapshot?.data?.length ?? 0) return null;
return new ListTile(
title: new Text("${snapshot.data[index]}"),
onTap: () {
debugPrint("${snapshot.data[index]} clicked");
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
IssueAddScreen(state: snapshot.data[index]),
),
);
},
);
},
);
} else {
return new Center(child: new CircularProgressIndicator());
}
})));

Answer 4

There is some issue with MateriaApp context in the library.
Your code will not work. Create a different MaterialApp and then use your widget in home: property of MaterialApp.
For example:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.lightBlue,
),
home: MyAppState(), //This is your MyAppState
);
}
}
Now you can remove MaterialApp widget in your MyAppState keeping only Scaffold Widget

Answer 5

IconButton(onPressed: () {
Navigator.of(context).push(new MaterialPageRoute(builder: (context)=> AdminAuth));
},)