Navigate to a new screen and back : Create two routes

First, create two routes to work with. Since this is a basic example, each route contains only a single button. Tapping the button on the first route navigates to the second route. Tapping the button on the second route returns to the first route.

class FirstRoute extends StatelessWidget {

 const FirstRoute({super.key});

 @override

 Widget build(BuildContext context) {

  return Scaffold(

   appBar: AppBar(

    title: const Text(‘First Route’),

   ),

   body: Center(

    child: ElevatedButton(

     child: const Text(‘Open route’),

     onPressed: () {

      // Navigate to second route when tapped.

     },

    ),

   ),

  );

 }

}

class SecondRoute extends StatelessWidget {

 const SecondRoute({super.key});

 @override

 Widget build(BuildContext context) {

  return Scaffold(

   appBar: AppBar(

    title: const Text(‘Second Route’),

   ),

   body: Center(

    child: ElevatedButton(

     onPressed: () {

      // Navigate back to first route when tapped.

     },

     child: const Text(‘Go back!’),

    ),

   ),

  );

 }

}

Leave a comment

Your email address will not be published. Required fields are marked *