import 'dart:async';

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigator 2.0 Example',
      home: const OuterScreen(),
    );
  }
}

class OuterScreen extends StatefulWidget {
  const OuterScreen({super.key});

  @override
  State<OuterScreen> createState() => _OuterScreenState();
}

class _OuterScreenState extends State<OuterScreen> {
  int _counter = 0;
  late Timer _timer;

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(const Duration(milliseconds: 300), (t) {
      // mimic some external state change
      setState(() => _counter++);
    });
  }

  late final List<Page> _pages = [
    MaterialPage(
      name: 'page-1',
      child: Page1(
        showPage2: () {
          setState(() {
            _pages.add(
              MaterialPage(
                name: 'page-2',
                child: const Page2(),
              ),
            );
          });
        },
      ),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Outer Route')),
      body: Column(
        children: [
          Expanded(child: Center(child: Text('State rebuild: $_counter'))),
          Expanded(
            child: Container(
              color: Colors.grey,
              margin: const EdgeInsets.all(8.0),
              child: Navigator(
                pages: List.of(_pages),
                onDidRemovePage: (page) {
                  setState(() {
                    _pages.remove(page);
                  });
                },
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }
}

class Page1 extends StatelessWidget {
  const Page1({super.key, required this.showPage2});

  final VoidCallback showPage2;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Inner Route Page 1')),
      body: Center(
        child: ElevatedButton(
          onPressed: showPage2,
          child: const Text('Go to Page 2'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: const Text('Inner Route Page 2'),
        leading: BackButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ),
      body: const Center(child: Text('Inner Route Page 2')),
    );
  }
}