Open a New Screen

Part of the Lists and Screens section of Coddy's Flutter journey. Lesson 18 of 33.

Apps have more than one screen: a list, then the details of one item, then a settings page. In Flutter a screen is a widget, usually a Scaffold in its own class.

The Navigator keeps your screens in a stack, like a pile of cards. The one on top is the one you see. Navigator.push puts a new screen on top:

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

MaterialPageRoute slides the new screen in the way a phone does. Its builder is a function that returns the screen to show.

context tells the Navigator where you are in the widget tree. That is why HomeScreen is a class of its own, inside MaterialApp: its context can find the navigator that MaterialApp makes.

Challenge

Easy

The About this app button does nothing yet. Make it open the AboutScreen with Navigator.push.

Try it yourself

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({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) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: const Text('About this app'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('About')),
      body: const Center(
        child: Text('Made with Flutter'),
      ),
    );
  }
}