EXPERIMENT-4

Navigating between screens:

• To navigate between screens in Flutter, you can use the Navigator class. The Navigator class is responsible for managing the stack of screens that are currently displayed.
• To navigate to a new screen, you can use the push() method. The push() method takes a Route object as a parameter. It requires a BuildContext and a Route.
• To navigate back to the previous screen, you can use the pop() method. The pop() method removes the top screen from the navigation stack usually without any arguments.

 4 a)setup navigation between different screens using navigator

import 'package:flutter/material.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: HomeScreen(),

    );

  }

}

class HomeScreen extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Home Screen'),

      ),

      body: Center(

        child: ElevatedButton(

          onPressed: () {

            Navigator.push(

              context,

              MaterialPageRoute(builder: (context) => SecondScreen()),

            );

          },

          child: Text('Go to Second Screen'),

        ),

      ),

    );

  }

}

class SecondScreen extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Second Screen'),

      ),

      body: Center(

        child: ElevatedButton(

          onPressed: () {

            Navigator.pop(context);

          },

          child: Text('Back to Home Screen'),

        ),

      ),

    );

  }

}

MaterialPageRoute is a class that represents a modal route that replaces the entire screen. It is a type of PageRoute and is commonly used to transition between different screens or pages in a Flutter application.

builder: (context) => SecondScreen(): This is a named parameter of the MaterialPageRoute constructor, which is a function that builds the content of the page route. In this case, the function takes a BuildContext parameter (which represents the current location in the widget tree) and returns a Widget that will be displayed as the content of the page route.

When this MaterialPageRoute is pushed onto the navigation stack, it will replace the entire screen with the content of the SecondScreen widget.

MaterialApp

└── HomeScreen (StatelessWidget)

    └── Scaffold

        ├── AppBar

        │    └── Text('Home Screen')

        └── Body

            └── Center

                └── ElevatedButton

                    ├── onPressed: navigator.push (to SecondScreen)

                    └── Text('Go to Second Screen')

SecondScreen (StatelessWidget)

└── Scaffold

    ├── AppBar

    │    └── Text('Second Screen')

    └── Body

        └── Center

            └── ElevatedButton

                ├── onPressed: navigator.pop (back to HomeScreen)

                └── Text('Back to Home Screen')

4b)implement navigation with named routes

Named routes:

• You can also define named routes in your Flutter app. Named routes are a convenient way to navigate to screens without having to create a Route object each time.
• To define a named route, you can use the routes property of the MaterialApp
• Once you have defined a named route, you can navigate to it using the Navigator.pushNamed() method. The Navigator.pushNamed() method takes the name of the route as a parameter.
• To define a named route, you need to add a routes property to your MaterialApp widget. The routes property is a map of route names to routes.
• Each route is a function that takes a BuildContext object and returns a Widget.

import 'package:flutter/material.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      initialRoute: '/home',

      routes: {

        '/home': (context) => HomeScreen(),

        '/second': (context) => SecondScreen(),

        '/third': (context) => ThirdScreen(),

      },

    );

  }

}

class HomeScreen extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text('Home Screen')),

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            ElevatedButton(

              onPressed: () => Navigator.pushNamed(context, '/second'),

              child: Text('Go to Second Screen'),

            ),

            ElevatedButton(

              onPressed: () => Navigator.pushNamed(context, '/third'),

              child: Text('Go to Third Screen'),

            ),

          ],

        ),

      ),

    );

  }

}

class SecondScreen extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text('Second Screen')),

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            ElevatedButton(

              onPressed: () => Navigator.pop(context),

              child: Text('Go Back'),

            ),

            ElevatedButton(

              onPressed: () => Navigator.pushNamed(context, '/third'),

              child: Text('Go to Third Screen'),

            ),

          ],

        ),

      ),

    );

  }

}

class ThirdScreen extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text('Third Screen')),

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            ElevatedButton(

              onPressed: () => Navigator.pop(context),

              child: Text('Go Back'),

            ),

            ElevatedButton(

              onPressed: () => Navigator.pushNamed(context, '/home'),

              child: Text('Go to Home Screen'),

            ),

          ],

        ),

      ),

    );

  }

}

Navigator.pushNamed: This method is used to push a named route onto the navigator stack. It takes the BuildContext and a string that represents the route name.

'/second': This is the name of the route that has been defined in the app's route table (usually in the MaterialApp widget).

MaterialApp

 ├── routes:

 │     ├── '/home' → HomeScreen

 │     ├── '/second' → SecondScreen

 │     └── '/third' → ThirdScreen

 └── initialRoute: '/home'

HomeScreen (Widget)

 └── Scaffold

      ├── AppBar

      │     └── Text('Home Screen')

      └── Body

            └── Center

                  └── Column (mainAxisAlignment: center)

                        ├── ElevatedButton

                        │     └── Text('Go to Second Screen')

                        └── ElevatedButton

                              └── Text('Go to Third Screen')

SecondScreen (Widget)

 └── Scaffold

      ├── AppBar

      │     └── Text('Second Screen')

      └── Body

            └── Center

                  └── Column (mainAxisAlignment: center)

                        ├── ElevatedButton

                        │     └── Text('Go Back')

                        └── ElevatedButton

                              └── Text('Go to Third Screen')

ThirdScreen (Widget)

 └── Scaffold

      ├── AppBar

      │     └── Text('Third Screen')

      └── Body

            └── Center

                  └── Column (mainAxisAlignment: center)

                        ├── ElevatedButton

                        │     └── Text('Go Back')

                        └── ElevatedButton

                              └── Text('Go to Home Screen')