Why I can't switch pages by navigator in flutter?

exadur
November 27, 2022
278 views
0 votes
2 Answers

What I want to do is switch between my pages by using BottomAppBar in my app but it doesn’t work. what make it worse is that it doesn’t show me any error so I don’t know where is the problem.
Thank you for your help 🙂

import 'package:flutter/material.dart';
import 'package:testing/SecondPage.dart';

void main() {
  runApp(const MaterialApp(
    title: 'MyApp',
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 5,
        child: Scaffold(
          body: Icon(Icons.rice_bowl,size:100,color: Colors.blue,),
            floatingActionButton: FloatingActionButton(
              hoverElevation: 50,
              onPressed: () {},
              child: const Icon(Icons.mic),
            ),
            floatingActionButtonLocation:
            FloatingActionButtonLocation.centerDocked,
            bottomNavigationBar: BottomAppBar(
              //color: Colors.blue,
              notchMargin: 10,
              shape: const CircularNotchedRectangle(),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  IconButton(
                      onPressed: () {},
                      icon: const Icon(
                        Icons.contact_mail_outlined,
                        color: Colors.grey,
                      )),
                  IconButton(
                      onPressed: () {},
                      icon: const Icon(
                        Icons.local_activity,
                        color: Colors.grey,
                      )),
                  Container(
                    height: 1,
                  ),
                  IconButton(
                      onPressed: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => secondPage()));
                      },
                      icon: const Icon(
                        Icons.safety_check,
                        color: Colors.grey,
                      )),
                  IconButton(
                      onPressed: () {},
                      icon: const Icon(
                        Icons.read_more,
                        color: Colors.grey,
                      )),
                ],
              ),
            )),

      ),
    );
  }
}

here is second page:

import 'package:flutter/material.dart';

class secondPage extends StatefulWidget {
  const secondPage({Key? key}) : super(key: key);

  @override
  State<secondPage> createState() => _secondPageState();
}

class _secondPageState extends State<secondPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Icon(Icons.rice_bowl,size: 200,),
    );
  }
}

I did everything I found in flutter docs but still doesn’t work.

Tags: dart flutter

Answers

- MendelG
- November 27, 2022 at 6:05 am
- 0 votes
0
I am able to navigate to a new page. However, I am not able to go back (pop) to the previous page.

Since you’re pushing a completely new page, you should use a Scaffold() with an AppBar which will provide you with an option to go back to the previous screen.

You’re secondPage Widget should look like this:
```
class secondPage extends StatefulWidget {
  const secondPage({Key? key}) : super(key: key);

  @override
  State<secondPage> createState() => _secondPageState();
}

class _secondPageState extends State<secondPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: Text("second page"),
      ),
    );
  }
}
```
Login or Signup to reply.