Otwórz nowy ekran

Część sekcji Listy i ekrany ścieżki Flutter w Coddy. Lekcja 18 z 33.

Aplikacje mają więcej niż jeden ekran: listę, potem szczegóły jednego elementu, a następnie stronę ustawień. We Flutterze ekran jest widżetem, zwykle obiektem Scaffold we własnej klasie.

Navigator przechowuje ekrany na stosie, niczym stos kart. Ekran na samej górze to ten, który widzisz. Navigator.push umieszcza nowy ekran na górze:

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

MaterialPageRoute wsuwa nowy ekran, tak jak robi to telefon. Jego builder to funkcja, która zwraca ekran do wyświetlenia.

context informuje Navigator, gdzie jesteś w drzewie widżetów. Dlatego HomeScreen jest osobną klasą wewnątrz MaterialApp: jego context może odnaleźć nawigator tworzony przez MaterialApp.

Wyzwanie

Łatwy

Przycisk About this app na razie nic nie robi. Spraw, aby otwierał ekran AboutScreen za pomocą Navigator.push.

Spróbuj swoich sił

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