Routing Configure named routes for each screen

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.
Get Unlimited PRO Access

OR


*Enrollment provides full access to this course (and updates) for life.

Routing Configuration

Create a file named routes.dart in the lib directory of your project.

file_type_dartlang routes.dart 
import 'package:quizapp/about/about.dart';
import 'package:quizapp/profile/profile.dart';
import 'package:quizapp/login/login.dart';
import 'package:quizapp/topics/topics.dart';
import 'package:quizapp/home/home.dart';

var appRoutes = {
  '/': (context) => const HomeScreen(),
  '/login': (context) => const LoginScreen(),
  '/topics': (context) => const TopicsScreen(),
  '/profile': (context) => const ProfileScreen(),
  '/about': (context) => const AboutScreen(),
};

Register the appRoutes with the MaterialApp in the main.dart file.

file_type_dartlang main.dart 
import 'package:quizapp/routes.dart';

// ...

  return MaterialApp(
    routes: appRoutes,
  );

Basic Navigation between Scaffolds

Push a new screen on to the stack.

file_type_dartlang home.dart 
class HomeScreen extends StatelessWidget {
  const HomeScreen({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: Text('about'),
          onPressed: () => Navigator.pushNamed(context, '/about'),
        ),
      ),
    );
  }

The appBar will automatically have a back button.

file_type_dartlang about.dart 
class AboutScreen extends StatelessWidget {
  const AboutScreen({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      
    );
  }
}
👈 Project Organization
Themes 👉

Questions?

Ask questions via GitHub below OR chat on Slack #questions