Откройте новый экран

Часть раздела Списки и экраны путешествия по Flutter на Coddy. Урок 18 из 33.

В приложениях обычно несколько экранов: список, затем подробная информация об одном элементе, затем страница настроек. Во Flutter экран — это виджет, обычно Scaffold в отдельном классе.

Navigator хранит экраны в стеке, как стопку карточек. Вы видите тот, который находится сверху. Navigator.push помещает новый экран сверху:

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

MaterialPageRoute плавно показывает новый экран, как это происходит на телефоне. Его builder — функция, которая возвращает экран для отображения.

context указывает Navigator, где вы находитесь в дереве виджетов. Поэтому HomeScreen — отдельный класс внутри MaterialApp: его context может найти навигатор, который создаёт MaterialApp.

Задание

Легко

Кнопка About this app пока ничего не делает. Сделай так, чтобы она открывала экран AboutScreen с помощью Navigator.push.

Попробуйте сами

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