Home > Software engineering >  Why I can't switch pages by navigator in flutter?
Why I can't switch pages by navigator in flutter?

Time:11-27

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.

CodePudding user response:

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"),
      ),
    );
  }
}

CodePudding user response:

Use Scaffold() Widget

Your Problem Will be Solved .

  • Related