Flutter中Navigator.push跳转页面后首次进入时弹出AlertDialog的实现

Hey there! Let's get that AlertDialog popping up only the first time users land on your IfProfilePage. We'll use a mix of state management and persistent storage to make this work smoothly. Here's the step-by-step breakdown:

Step 1: Turn IfProfilePage into a StatefulWidget #

If your page is currently a StatelessWidget, convert it to a StatefulWidget—we need to handle initialization logic and track whether the user has seen the dialog before:

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

  @override
  State<IfProfilePage> createState() => _IfProfilePageState();
}

class _IfProfilePageState extends State<IfProfilePage> {
  @override
  void initState() {
    super.initState();
    // Trigger the dialog check as soon as the page initializes
    _checkAndShowFirstTimeDialog();
  }

  Future<void> _checkAndShowFirstTimeDialog() async {
    // Use SharedPreferences to persist whether the dialog was shown
    final prefs = await SharedPreferences.getInstance();
    final hasSeenDialog = prefs.getBool('hasSeenProfileGuidelines') ?? false;

    if (!hasSeenDialog) {
      // Wait for the page to finish rendering before showing the dialog
      WidgetsBinding.instance.addPostFrameCallback((_) {
        showDialog(
          context: context,
          barrierDismissible: false, // Optional: Force user to tap the button
          builder: (context) => AlertDialog(
            title: const Text('Profile Guidelines'),
            content: const Text('Please follow these rules:\n\n1. Keep your profile info accurate\n2. Don\'t share sensitive personal data\n3. Respect community standards'),
            actions: [
              TextButton(
                onPressed: () async {
                  // Mark the dialog as seen so it doesn't reappear
                  await prefs.setBool('hasSeenProfileGuidelines', true);
                  Navigator.of(context).pop();
                },
                child: const Text('Understood'),
              ),
            ],
          ),
        );
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    // Your existing profile page UI goes here
    return Scaffold(
      appBar: AppBar(title: const Text('Your Profile')),
      body: const Center(child: Text('Profile content goes here')),
    );
  }
}

Step 2: Add the Shared Preferences Dependency #

To use persistent storage, add the shared_preferences package to your pubspec.yaml (use the latest version available):

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.2

Step 3: Keep Your Original Navigation Code #

You don't need to change how you navigate to the page—your existing code works perfectly:

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

Quick Notes: #

• Persistent vs. Session-Only: If you don't want the dialog to stay hidden after an app restart (only hide it during the current session), replace the SharedPreferences logic with a local bool _hasSeenDialog = false variable in the state class.
• Post-Frame Callback: We use this because you can't call showDialog directly in initState—the page hasn't finished building yet, so the context isn't fully ready.
• Customization: Swap out the AlertDialog's title, content, and buttons to match your app's specific guidelines.

内容的提问来源于stack exchange，提问作者Tizi Dev