How solve problem Appbar icon clicked to navigate

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

Harsha pulikollu · Answer 1 · 2019-02-24T18:42:46.480

0

Try to use context in your builder

Navigator.push(context,MaterialPageRoute(builder: (BuildContext context){return AdminAuth();
});

edited Feb 24 '19 at 18:42

answered Feb 24 '19 at 18:36

Harsha pulikollu

2,386
15
28

No, It is not work for me. Error is same as previous – Randika Wanninayaka Feb 24 '19 at 18:59

score 0 · Answer 2 · answered Feb 25 '19 at 11:43

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());
              }
            }));
  }
}

score 0 · Answer 3 · answered Oct 24 '19 at 14:45

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());
              }
            })));

score 0 · Answer 4 · edited Oct 28 '19 at 11:36

0

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

edited Oct 28 '19 at 11:36

Taseer

3,432
3
16
35

answered Oct 28 '19 at 10:00

Z. Cajurao

357
2
12

Don't just include code, explain a little bit what the code is doing. – Taseer Oct 28 '19 at 11:35

score 0 · Answer 5 · answered Oct 28 '19 at 10:55

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

How solve problem Appbar icon clicked to navigate

5 Answers5

Linked