, ,

How to Make Navigation from One Screen to Other in Flutter.

Posted by

Simply follow the steps below to navigate from one screen to the next:-

Step 1: Create two new files with the name “home” as the first step.Dart and elsewhere.

Step 2: Import the material into main.dart now.Dart package library and home.dart are both used. See the photo below.

Step 3: We now call the main() function, which calls runApp() and the MaterialApp() widget.
Currently, we call Scaffold in the home widget’s appBar. Our app title is passed into the Text Widget we refer to as Title in the appBar. Following appBar, we use Body Widget and pass our own widget’s home() method.

See the Below code of main.dart :-

import 'package:flutter/material.dart';
import 'home.dart';

void main() {
    home: Scaffold(
      appBar: AppBar(
        title: Text("Naviagtion App"),
      body: Home(),

Step 4:Import the material now into home.dart.Additionally to about.dart, the dart package library. See the photo below.

Step 5:

Following import, we’ll create a Stateful Widget with the name Home and a return container that contains a Child widget. We refer to the column in child widget as children widget. Call RaisedButton() in the Children Widget now, and it will call navigation push when it is pressed and return our custom About() widget. We call a Text widget called Child after the onPressed() widget and write “Go to About Screen” in it.

See the Below code of home.dart :-

Step 6: Now let’s move on to the first import, about.dart.package library for dart.

Step 7: Create a Stateless Widget after that, then return scaffold(). Create an appBar Widget in the scaffold where you may write the title of the new screen and pass the Title widget. Create a body widget that is in the centre and passes a Text widget as a child with the text “This is About Screen” after the appBar widget.

See the Below code of about.dart :-

Now We are Ready to Run our Project.

Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x