Skip to main content ppwriters

#30DaysMasterFlutter

Day 18

Introduction to Navigation

Mobile applications typically consist of multiple pages that users navigate between. Understanding how to navigate between screens in your app is crucial for creating a seamless and intuitive user experience. By mastering navigation in Flutter, you can build engaging and user-friendly mobile apps that enable users to easily find the information they need and complete tasks efficiently.

Project - Quotes App

Time to bring your project together, combine the quote details UI you created on day 11 and the registration form you created on day 13 to create a simple quotes app.

  • Add a quotes page to your app that displays a list of quotes. You can hardcode the quotes for now.
  • On the registration form, if all valid information is provided, navigate to the quotes page.
  • Show snackbar with error information if form is not valid
  • Tapping a quote should navigate to a detail page that displays the quote details page.

By the end of this day, you should have a basic understanding of how to implement navigation in a your Flutter application.

Tips

  • Flutter provides different types of navigation, such as push and pop navigation. Learn about the different types of navigation and when to use each one.

  • Flutter provides built-in widgets for navigation, such as the Navigator widget and the MaterialApp widget. Use these widgets to save time and ensure consistency in your app’s design.

  • Simple navigation implementation

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Example',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Detail Screen'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => DetailScreen()),
            );
          },
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go back to Home Screen'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

In this example, we have two screens: HomeScreen and DetailScreen. The HomeScreen contains an ElevatedButton that, when pressed, navigates to the DetailScreen. The DetailScreen contains another ElevatedButton that, when pressed, navigates back to the HomeScreen using the Navigator.pop method.


more projects

Resources

Enjoying? Tell your friends.

#30DaysMasterFlutter

Learn the basics of Flutter and Dart in 30 days! We provide a roadmap, resources, and project ideas to help you along your journey.

back to 30 Days to Master Flutter

Join our community on Discord to connect with fellow learners, share your progress, and get help with any questions you may have throughout the #30DaysMasterFlutter challenge. Join now and get started on your journey to mastering Dart and Flutter!

join now