Understanding three-page flutter app with navigation

This time focus primarily on the comments around Navigator.

import 'package:flutter/material.dart';
void main() {
  // Start application.
  runApp(const MyApp());
}
// Root application widget.
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // Page 1 is our starting page.
      home: const HomePage(),
    );
  }
}
// ======================================================
// PAGE 1 - HOME PAGE
// ======================================================
class HomePage extends StatelessWidget {
  const HomePage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Open Products'),
          onPressed: () {
            // PUSH means:
            // "Open a new page on top of the current page."
            Navigator.push(
              // context helps Flutter find the Navigator.
              context,
              // MaterialPageRoute creates the new page/route.
              MaterialPageRoute(
                // Tell Flutter which page to open.
                builder: (context) => const ProductsPage(),
              ),
            );
          },
        ),
      ),
    );
  }
}
// ======================================================
// PAGE 2 - PRODUCTS PAGE
// ======================================================
class ProductsPage extends StatelessWidget {
  const ProductsPage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Flutter automatically displays a Back button here
        // because we arrived using Navigator.push().
        title: const Text('Products'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('View Laptop'),
          onPressed: () {
            // Add ProductDetailsPage on top of ProductsPage.
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) =>
                    const ProductDetailsPage(),
              ),
            );
          },
        ),
      ),
    );
  }
}
// ======================================================
// PAGE 3 - PRODUCT DETAILS PAGE
// ======================================================
class ProductDetailsPage extends StatelessWidget {
  const ProductDetailsPage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Product Details'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text(
              'Laptop',
              style: TextStyle(
                fontSize: 28,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 10),
            const Text(
              'Price: ₹75,000',
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // POP means:
                // "Remove this page and return to previous page."
                Navigator.pop(context);
              },
              child: const Text('Go Back'),
            ),
          ],
        ),
      ),
    );
  }
}

The only navigation code you need to remember initially

Go to another page

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const ProductsPage(),
  ),
);

Think:

PUSH = Go forward

Return to previous page

Navigator.pop(context);

Think:

POP = Go back

Mental model

When you navigate:

Home
 ↓ PUSH
Products
Home
 ↓ PUSH
Product Details
Products
Home
 ↓ POP
Products
Home

Tip: Don't jump into named routes or advanced routing packages yet. Become comfortable with Navigator.push(), MaterialPageRoute, Navigator.pop(), and BuildContext first.

Comments

Post a Comment

Popular posts from this blog

Files in your Flutter Project

  In a Flutter project , the files are organized so that your Dart application code , UI resources , platform-specific Android/iOS code , dependencies , and build configuration remain separated. A typical project looks like this: my_flutter_app/ ├── lib/ │   └── main.dart ├── test/ ├── android/ ├── ios/ ├── web/ ├── windows/ ├── macos/ ├── linux/ ├── pubspec.yaml ├── pubspec.lock ├── analysis_options.yaml ├── .gitignore └── README.md 1. lib/ ⭐ Most important This is where almost all of your Flutter application code lives . lib/ ├── main.dart ├── screens/ ├── widgets/ ├── models/ ├── services/ └── utils/ For most day-to-day Flutter development, you spend the majority of your time here. main.dart The entry point of the Flutter application. A minimal example: import 'package:flutter/material.dart'; void main() {   runApp(const MyApp()); } class MyApp extends StatelessWidget {   const MyApp({super.key});   @override   Widget build(BuildContext context) ...
Read more

Flutter setup on Windows 11 using VS Code + Android Emulator

For Windows 11 + VS Code + Android Emulator , I recommend using VS Code as your coding/debugging IDE and installing Android Studio primarily for the Android SDK, SDK tools, and emulator . Flutter's current documentation recommends VS Code as a supported installation path, while Android Studio provides the Android tooling required for an emulator. 1. What you need Install these components: Git for Windows Visual Studio Code Flutter SDK VS Code Flutter extension Android Studio Android SDK Android Emulator / virtual device You do not have to write your application in Android Studio. 2. Install Git Flutter's Windows setup lists Git for Windows as a prerequisite. Install Git, then open PowerShell and verify: git --version You should see something similar to: git version 2.x.x.windows.x Reference: https://docs.flutter.dev/install/quick 3. Install VS Code Install Visual Studio Code , which will be your main development environment. Then open: VS Code → Extensions Search for: Flutter...
Read more

Understanding single-page flutter app with state

// Imports Flutter's Material Design widgets such as // Scaffold, Text, Button, AppBar, etc. import 'package:flutter/material.dart'; // Every Dart application starts from main() void main() {   // Starts the Flutter application.   // MyApp becomes the root widget.   runApp(const MyApp()); } // Root widget of our application. class MyApp extends StatelessWidget {   const MyApp({super.key});   @override   Widget build(BuildContext context) {     // MaterialApp provides the basic app configuration.     return MaterialApp(       // Removes the DEBUG banner.       debugShowCheckedModeBanner: false,       // HomePage is the first screen.       home: const HomePage(),     );   } } // StatefulWidget is used because the counter will change. class HomePage extends StatefulWidget {   const HomePage({super.key}); ...
Read more