Question 274347 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Navigator operation requested with a context that does not include a Navigator, move to another screen button

I’m trying to make a button that will take me from one screen to another. Second one is titled "Note taking screen", sadly when I did it this way as below I get the following error: "Navigator operation requested with a context that does not include a Navigator."

I’ve tried to follow:
https://docs.flutter.dev/cookbook/navigation/navigation-basics

Any ideas what I did wrong?

import 'package:flutter/material.dart';

class Note extends StatelessWidget {
  const Note({super.key});

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text("Note taking screen")),
          body: Container(),
        );
      }
    }

ssss

 import 'package:flutter/material.dart';
 import 'package:notepad/screens/Note.dart';

 class TextFieldExampleApp extends StatelessWidget {
  const TextFieldExampleApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () {
              Navigator.push(
                  context, MaterialPageRoute(builder: (context) => Note()));
            }),
        appBar: AppBar(
          leading: Icon(Icons.search),
          title: TextField(
            //No const because it changes
            onChanged: (String value) {
              if (value == '13') {
                print("Right number entered");
              }
            },
          ),
          backgroundColor: Colors.yellow,
        ),
        body: const Center(
          child: ListOfNotes(),
        ),
      ),
    );
  }
}

void main() => runApp(const TextFieldExampleApp());
Tags:

2

Answers


  1. 0

    I think issue is in Material Widget. You are using context without Material Widget. Because Navigation flow created from Material Widget.

    Remove Material widget inside the TextFieldExampleApp. And Wrap TextFieldExampleApp.

    void main() => runApp(MaterialApp(home: const TextFieldExampleApp())); <====== Added MaterialApp here.

    TextFieldExampleApp code

    class TextFieldExampleApp extends StatelessWidget {
  const TextFieldExampleApp({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(          <===========   Remove MaterialApp From Here
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => Note()));
          }),
      appBar: AppBar(
        leading: Icon(Icons.search),
        title: TextField(
          //No const because it changes
          onChanged: (String value) {
            if (value == '13') {
              print("Right number entered");
            }
          },
        ),
        backgroundColor: Colors.yellow,
      ),
      body: const Center(
        child: Text('List OF notes'),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    The problem is in how you’ve structured your widget tree.

    You should return a MaterialApp widget as the root widget of your app. This way, the Navigator will be available in the widget tree. Also, remove the MaterialApp from the TextFieldExampleApp.

    void main() => runApp(MaterialApp(home: const TextFieldExampleApp()));

    class TextFieldExampleApp extends StatelessWidget {
  const TextFieldExampleApp({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => Note()));
          }),
      appBar: AppBar(
        leading: Icon(Icons.search),
        title: TextField(
          //No const because it changes
          onChanged: (String value) {
            if (value == '13') {
              print("Right number entered");
            }
          },
        ),
        backgroundColor: Colors.yellow,
      ),
      body: const Center(
        child: Text('List OF notes'),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search