Let’s add Navigation in Flutter so your “Hire Me” button opens a new page.
In Flutter, we use Navigator.push
to move to another screen and Navigator.pop
to go back.
Step 1: Create a Second Screen
We’ll make a new class HireMePage
for the second page.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: const BusinessCard(),
);
}
}
// First Screen
class BusinessCard extends StatelessWidget {
const BusinessCard({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueGrey[900],
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const CircleAvatar(
radius: 60,
backgroundImage: NetworkImage("https://picsum.photos/200"),
),
const SizedBox(height: 20),
const Text(
"Aditya Kumar Singh",
style: TextStyle(fontSize: 28, color: Colors.white, fontWeight: FontWeight.bold),
),
const Text(
"Flutter Developer",
style: TextStyle(fontSize: 18, color: Colors.white70, letterSpacing: 2.0),
),
const SizedBox(height: 30),
// Button with navigation
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const HireMePage()),
);
},
child: const Text("Hire Me"),
),
],
),
),
);
}
}
// Second Screen
class HireMePage extends StatelessWidget {
const HireMePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Hire Me")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
"Thank you for your interest!",
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
),
const SizedBox(height: 20),
const Text("Email: adityaypi@yahoo.com"),
const Text("Phone: +91 9555699081"),
const SizedBox(height: 30),
ElevatedButton(
onPressed: () {
Navigator.pop(context); // Go back
},
child: const Text("Go Back"),
),
],
),
),
);
}
}
What Happened Here?
- BusinessCard Page → first screen
- When you tap Hire Me, it opens
HireMePage
.
- When you tap Hire Me, it opens
- HireMePage → second screen
- Has a “Go Back” button → returns to first screen.
Run this → Now your app behaves like a real professional app with multiple pages.