Flutter开发：创建仅首次安装显示的引导页及解决返回重复显示问题

嘿，我来帮你搞定这两个常见的Flutter需求！核心思路就是用本地存储标记用户是否已看过引导页，再配合路由跳转的技巧解决返回问题，下面一步步来：

一、实现仅首次安装显示的引导页 #

咱们需要用shared_preferences这个包来持久化存储一个标记，记录用户是否已经浏览过引导页。

步骤1：添加依赖 #

在pubspec.yaml里加入：

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.2 # 建议使用最新版本

步骤2：初始化存储并判断跳转 #

在main.dart里，我们先初始化SharedPreferences，然后根据标记决定直接进首页还是引导页：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized(); // 必须添加，避免异步初始化报错
  SharedPreferences prefs = await SharedPreferences.getInstance();
  bool hasSeenOnboarding = prefs.getBool('hasSeenOnboarding') ?? false;

  runApp(MyApp(hasSeenOnboarding: hasSeenOnboarding));
}

class MyApp extends StatelessWidget {
  final bool hasSeenOnboarding;

  const MyApp({super.key, required this.hasSeenOnboarding});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Onboarding Demo',
      home: hasSeenOnboarding ? const HomePage() : const OnboardingPage(),
    );
  }
}

步骤3：引导页逻辑 #

在引导页的"Get Started"按钮点击时，我们要把标记设为true，然后跳转到首页：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            SharedPreferences prefs = await SharedPreferences.getInstance();
            await prefs.setBool('hasSeenOnboarding', true);
            // 这里先暂时用普通跳转，后面会优化解决返回问题
            Navigator.push(context, MaterialPageRoute(builder: (_) => const HomePage()));
          },
          child: const Text('Get Started'),
        ),
      ),
    );
  }
}

二、解决返回按钮重复显示引导页的问题 #

刚才的代码里，引导页还留在路由栈中，所以点击返回会回到引导页。咱们需要用替换路由或者清空路由栈的方式，把引导页从栈里移除：

方案1：用pushReplacement替换当前路由 #

把引导页按钮的跳转代码改成：

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (_) => const HomePage()),
);

这样引导页会被首页替换，路由栈里就只剩首页了，返回时直接退出APP（安卓）或回到系统桌面（iOS）。

方案2：用pushAndRemoveUntil清空所有之前的路由 #

如果你的APP有更复杂的路由结构，想确保返回不会回到引导页，可以用这个：

Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (_) => const HomePage()),
  (route) => false, // 条件为false表示移除所有之前的路由
);

补充：测试小技巧 #

如果你想重新测试引导页，可以卸载APP重装，或者在首页加个调试按钮清除标记：

// 首页的调试按钮示例
ElevatedButton(
  onPressed: () async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.remove('hasSeenOnboarding');
    // 手动跳回引导页测试
    Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => const OnboardingPage()));
  },
  child: const Text('Reset Onboarding'),
)

这样就能完美实现需求啦：首次打开显示引导页，后续直接进首页；点击Get Started后返回不会再看到引导页。

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