Set Up Your Project

Start by creating two new Dart files, naming them “home.dart” and “about.dart.” These will represent the two screens you’ll navigate between.

Import Dependencies

In your main.dart file, ensure you import the necessary material library and the Dart files you just created:

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("Navigation App"),
      ),
      body: Home(),
    ),
  ));
}

Implement Navigation

In your home.dart file, create a Stateful Widget named Home with a RaisedButton. This button will trigger the navigation to the “About” screen when pressed.

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

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          RaisedButton(
            onPressed: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) {
                return About();
              }));
            },
            child: Text("Go to About Screen"),
          ),
        ],
      ),
    );
  }
}

Create the About Screen

In your about.dart file, create a Stateless Widget named About with a simple Scaffold containing an AppBar and a Text widget in the body.

import 'package:flutter/material.dart';

class About extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("About Screen"),
      ),
      body: Center(
        child: Text("This is About Screen"),
      ),
    );
  }
}

With these steps completed, you’re ready to run your Flutter project.