Flutter -如何在不使用命名路由的情况下弹出两个屏幕？

在Flutter中，即使不使用命名路由，也可以通过多种方式实现弹出两个屏幕的效果。以下是几种常见的方法：

方法一：使用`Navigator.push`和`Navigator.pop`

你可以使用Navigator.push方法来推入一个新的屏幕，然后使用Navigator.pop方法来返回到前一个屏幕。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => FirstPopupScreen()),
            );
          },
          child: Text('Open First Popup'),
        ),
      ),
    );
  }
}

class FirstPopupScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Popup Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPopupScreen()),
            );
          },
          child: Text('Open Second Popup'),
        ),
      ),
    );
  }
}

class SecondPopupScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Popup Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Close Popup'),
        ),
      ),
    );
  }
}

方法二：使用`showDialog`

如果你只需要弹出一个模态对话框，可以使用showDialog方法。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  title: Text('First Popup'),
                  content: Text('This is the first popup.'),
                  actions: <Widget>[
                    TextButton(
                      child: Text('Close'),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                  ],
                );
              },
            );
          },
          child: Text('Open First Popup'),
        ),
      ),
    );
  }
}

方法三：使用`Overlay`

Overlay可以用来在任何地方叠加显示一个Widget。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final OverlayEntry overlayEntry;

  HomeScreen() {
    overlayEntry = OverlayEntry(
      builder: (context) => Positioned(
        top: 100,
        left: 100,
        right: 100,
        bottom: 100,
        child: Material(
          elevation: 4,
          child: Container(
            color: Colors.white,
            padding: EdgeInsets.all(20),
            child: Text('First Popup'),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Overlay.of(context)?.insert(overlayEntry);
          },
          child: Text('Open First Popup'),
        ),
      ),
    );
  }

  @override
  void dispose() {
    overlayEntry.remove();
    super.dispose();
  }
}