how to add navigation (second screen), so when you click “Hire Me” button, it opens a new page with more details

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?

  1. BusinessCard Page → first screen
    • When you tap Hire Me, it opens HireMePage.
  2. 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.




Leave a Reply