Flutter - lesson 3 | HackIndia Skills

Key point

One route idea

In Flutter, a screen is called a route. A route is just a widget that fills the phone screen.

For simple app demos, use Navigator.push() to open a route and Navigator.pop() to go back.

Why this matters

Your project should not feel like one long page. Recruiters expect common flows like home to details, list to item, or login to dashboard.

In this lesson, keep routing simple. Use Navigator for normal screen changes. Save go_router for apps that need deep links, web URLs, or multiple navigation stacks.

Your to-do

Build two screens

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Create a HomeScreen widget for the first screen.
Create a DetailScreen widget for the second screen.
Place a button on HomeScreen.
Call Navigator.push() when the button is tapped.
Call Navigator.pop() from DetailScreen to return.

0 of 5 done

Example

Working example

Replace your lib/main.dart with this small app. It opens a details screen and sends one string to it.

This pattern is enough for a product page, event page, hostel listing, or internship details page.

import 'package:flutter/material.dart';

void main() {
  runApp(const DemoApp());
}

class DemoApp extends StatelessWidget {
  const DemoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    const eventName = 'College Tech Fest';

    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          child: const Text('View event details'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const DetailScreen(title: eventName),
              ),
            );
          },
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  final String title;

  const DetailScreen({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Details')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 12),
            const Text('Registration closes this Friday.'),
            const SizedBox(height: 24),
            ElevatedButton(
              child: const Text('Back to home'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Tip

Use phone back too

On Android, the system back button also pops the current route in this simple setup.

Still add a visible back action when it helps the demo. A judge or recruiter should not have to guess how to return.

Common mistake

Common routing mistake

Do not rebuild the whole app just to change screens. Keep each screen as its own widget and push the next route.

Also avoid adding a routing package only because a tutorial uses one. For a two or three screen demo, Navigator is easier to read in your public repo.