My text widget not showing when I use MaterialPageRoute

Question

Question When I used MaterialPageRoute my Text Widget in page 2 isn't showing. What I do here wrong?

My main page

class _MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            floatingActionButton: FloatingActionButton(
              onPressed: () {
                Navigator.push(context,
                    new MaterialPageRoute(builder: (context) => Page2()));
              },
            ),
            body: Container(
              child: Center(
                  child: Text(
                'Page 1',
                style: TextStyle(fontSize: 30.0),
              )),
            )));
  }
}

Page2 (The message that I print "Moved to page 1" printed to the screen actually.

import 'package:flutter/material.dart';

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var black = Colors.black;
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            Navigator.pop(context);
            print("Moved to page 1");
          },
        ),
        backgroundColor: Colors.blue,
        body: Container(
          child: Center(
            child: Text(
              'Page 2',
              style: TextStyle(
                fontSize: 2.0,
              ),
            ),
          ),
        ));
  }
}

Thanks

I think ur program is correct. "Page 1" and "Page 2" will be shown on the app and "Moved to page 1" will be shown on the terminal. — Mayur Agarwal, Oct 19 '20 at 16:54
You have set the font size to 2 for the text in the page 2. It's so small to be seen. Increase the font size and you'll see. Set minimum 12 — OMi Shah, Oct 19 '20 at 17:00

score 0 · Answer 1 · answered Oct 19 '20 at 17:18

Try to remove the home body and put it inside a new class like this

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Page1());
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            print('a');
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => Page2()));
          },
        ),
        body: Container(
          child: Center(
              child: Text(
                'Page 1',
                style: TextStyle(fontSize: 30.0),
              )),
        ));
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var black = Colors.black;
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            Navigator.pop(context);
            print("Moved to page 1");
          },
        ),
        backgroundColor: Colors.blue,
        body: Container(
          child: Center(
            child: Text(
              'Page 2',
              style: TextStyle(
                fontSize: 2.0,
              ),
            ),
          ),
        ));
  }
}

This is happening due to the context that you are passing to navigator. For more info you can read this Navigator operation requested with a context that does not include a Navigator

My text widget not showing when I use MaterialPageRoute

1 Answers1