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.

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);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Move between app screens

One route idea

Why this matters

Build two screens

Working example

Use phone back too

Common routing mistake

Do this now

Quick check