Flutter页面每次进入均弹出Alert，如何实现仅登录/注册后显示一次？

要实现欢迎Alert仅在用户注册/登录后显示一次，核心是通过存储记录用户是否已经看过这个Alert，后续进入首页时先检查标记，只有未显示过才弹出。

基础方案：本地存储（适合单用户或简单本地场景） #

步骤1：添加依赖 #

在pubspec.yaml中加入shared_preferences依赖，用于本地存储标记：

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.2 # 可替换为最新版本

步骤2：修改页面代码 #

替换原来的initState逻辑，先检查标记再决定是否弹出Alert：

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
    _checkAndShowWelcomeAlert();
  }

  Future<void> _checkAndShowWelcomeAlert() async {
    final prefs = await SharedPreferences.getInstance();
    // 若有用户ID，建议用"has_shown_welcome_alert_${用户ID}"作为key，避免多用户冲突
    const alertKey = "has_shown_welcome_alert";
    final hasShown = prefs.getBool(alertKey) ?? false;

    if (!hasShown) {
      Timer.run(() => showAlert(context: context));
      // 标记为已显示
      await prefs.setBool(alertKey, true);
    }
  }

  void showAlert({required BuildContext context}) {
    showDialog(
      context: context,
      builder: (context) {
        return BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
          child: CustomAnnounceCard(
            title: '⚙️ Welcome to Beta test',
            positiveTap: () => Navigator.of(context).pop(),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 你的首页UI
    );
  }
}

进阶方案：绑定用户的远程存储（适合多用户跨设备场景） #

如果项目有用户登录系统（比如Firebase Auth、自有后端），建议把标记存在用户的远程数据中，确保用户换设备登录也只看到一次：

以Firebase为例：

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
    _checkAndShowWelcomeAlert();
  }

  Future<void> _checkAndShowWelcomeAlert() async {
    final currentUser = FirebaseAuth.instance.currentUser;
    if (currentUser == null) return; // 未登录不处理

    final userDoc = FirebaseFirestore.instance.collection('users').doc(currentUser.uid);
    final docSnapshot = await userDoc.get();
    final hasShown = docSnapshot.data()?['hasShownWelcomeAlert'] ?? false;

    if (!hasShown) {
      Timer.run(() => showAlert(context: context));
      // 更新远程用户数据标记
      await userDoc.update({'hasShownWelcomeAlert': true});
    }
  }

  void showAlert({required BuildContext context}) {
    // 你的Alert代码保持不变
    showDialog(
      context: context,
      builder: (context) {
        return BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
          child: CustomAnnounceCard(
            title: '⚙️ Welcome to Beta test',
            positiveTap: () => Navigator.of(context).pop(),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 你的首页UI
    );
  }
}

关键注意点 #

• 本地存储方案必须结合用户ID作为key的一部分，否则多用户登录同一设备时会互相干扰。
• 远程存储方案更适合正式项目，能保证用户在不同设备上的状态同步。

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