Home > database >  Back to view in flutter
Back to view in flutter

Time:03-26

i have a little problem with the Navigator in flutter. I have 3 windows: (Login -> Home -> Orders). But when I go from Login to Home, everything works fine, but if I go from Home to Orders and use the android back button, it returns me to the Login window, that is, until the first view, not the second.

My code Navigation of Login:

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => HomeScreen(),
  ),
);

My Code Navigation of HomeScreen

Navigator.push(this.context,
  MaterialPageRoute(
    builder: (context) =\> Orders(
      numTable: numTable,
    ),
  )
);

CodePudding user response:

Solution : use pushAndRemoveUntil or pushReplacement at the LoginPage

  class LoginPage extends StatelessWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
  return Scaffold(
    body: InkWell(
        onTap: ()=>Navigator.of(context).pushAndRemoveUntil(
          MaterialPageRoute(
            builder: (context) => HomePage(),
          )
        ,(Route<dynamic> route) => false), child: Center(child: Text("LoginPage"),)),

    );

}
}
  ------------
class HomePage extends StatelessWidget {
 const HomePage({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   return Scaffold(
   body: InkWell(
      onTap: ()=>Navigator.of(context).push(
          MaterialPageRoute(
            builder: (context) => OrdersPage(),
          ))
          , child: Center(child: Text("HomePage"),)),

  );
 }
}
---------------
class OrdersPage extends StatelessWidget {
  const OrdersPage({Key? key}) : super(key: key);

  @override
   Widget build(BuildContext context) {
    return Scaffold(
  body: Center(child: Text("OrdersPage"),),
);
}
  }

CodePudding user response:

if users login successfully use in Login pushReplacement

Navigator.of(context).pushReplacement(
  MaterialPageRoute(
    builder: (context) => HomeScreen(),
  ),
);

in HomeScreen

Navigator.push(this.context,
  MaterialPageRoute(
    builder: (context) =\> Orders(
      numTable: numTable,
    ),
  )
);

when click android back button will go window HomeScreen

CodePudding user response:

You can follow this approach which does what you want, just do Navigator.of(context).push(route) on each page:

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

  @override
  State<Login> createState() => _LoginState();
}

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Login'),
      ),
      body: Center(
        child: Column(
          children: [
            TextButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => const Home(),
                  ),
                );
              },
              child: const Text('HOME'),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Column(
        children: [

          TextButton(onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => const Orders(),
              ),
            );
          }, child: const Text('Orders'))

        ],
      ),
    );
  }
}

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

  @override
  State<Orders> createState() => _OrdersState();
}

class _OrdersState extends State<Orders> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Orders'),
      ),
      body: Column(
        children: [
          TextButton(onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => const Home(),
              ),
            );
          }, child: const Text('Home'))

        ],
      ),
    );
  }
}

CodePudding user response:

Although there are answers to your question using the Navigator from the Material package, I would like to provide you with a tip for much simpler navigation in Flutter: Use the Get package.

With Get, this code:

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => HomeScreen(),
  ),
);

can be replaced with this code:

Get.to(() => HomeScreen());

In your example, you will then use the following code to go from Login to Home when a user has been authenticated:

Get.offAll(() => HomeScreen());

After that, you can move from screen to screen like this:

Get.off(() => [targetscreen]());
Get.to(() => [targetscreen]());
  • Related