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.