Flutter单次引导页实现咨询：3页滑动引导仅首次展示

核心思路 #

通过本地持久化存储记录用户是否已浏览过引导页，APP启动时读取该标记，决定直接进入首页还是先展示引导页。这里推荐使用shared_preferences——Flutter官方支持的轻量本地存储方案，操作简单且稳定。

具体实现步骤 #

1. 添加依赖 #

在项目的pubspec.yaml文件中添加shared_preferences依赖，执行flutter pub get完成安装：

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

2. 修改引导页最后一页（Banner3）的按钮逻辑 #

在"Get Started"按钮的点击事件中，先标记用户已看过引导页，再跳转到首页（用pushReplacement避免用户返回引导页）：

import 'package:google_fonts/google_fonts.dart';
import 'package:todo_app/modal/homepage.dart';
import 'package:shared_preferences/shared_preferences.dart'; // 新增导入

class Banner3 extends StatelessWidget {
  const Banner3({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              child: Image.asset("assets/vector3.jpg", height: 300.0,),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: SizedBox(child: Text("Unless our conception of patriotism is progressive,It cannot hope to embody the real affection and the real interest of the nation.", style: GoogleFonts.poppins(fontSize: 20.0, fontWeight: FontWeight.bold),)),
            ),
            SizedBox(
              child: ElevatedButton(
                onPressed: () async {
                  // 写入本地存储，标记已浏览引导页
                  final prefs = await SharedPreferences.getInstance();
                  await prefs.setBool('hasSeenOnboarding', true);
                  
                  // 跳转首页，替换当前路由
                  Navigator.pushReplacement(context, MaterialPageRoute(builder: (context)=> const HomePage()));
                }, 
                style: ElevatedButton.styleFrom(
                  primary: Colors.yellow,
                  padding: const EdgeInsets.symmetric(horizontal: 40.0, vertical: 15.0),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(50.0)
                  )
                ),
                child: Text("Get Started", style: GoogleFonts.poppins(fontSize: 18.0, fontWeight: FontWeight.bold, color: Colors.white))
              ),
            )
          ],
        ),
      )
    );
  }
}

3. 在APP入口处判断显示逻辑 #

修改main.dart，启动时读取存储标记，动态决定初始页面：

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:todo_app/onboarding/your_onboarding_screen.dart'; // 替换为你的引导页滑动组件
import 'package:todo_app/modal/homepage.dart';

void main() async {
  // 初始化Flutter绑定，确保async操作正常执行
  WidgetsFlutterBinding.ensureInitialized();
  
  final prefs = await SharedPreferences.getInstance();
  // 读取标记，默认未看过引导页
  final hasSeenOnboarding = prefs.getBool('hasSeenOnboarding') ?? false;

  runApp(MyApp(initialScreen: hasSeenOnboarding ? const HomePage() : const YourOnboardingScreen()));
}

class MyApp extends StatelessWidget {
  final Widget initialScreen;

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Your App Title',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: initialScreen,
    );
  }
}

注：将YourOnboardingScreen替换为你实际的引导页滑动容器组件（包含Banner1、Banner2、Banner3的页面）。

调试补充 #

如果需要重置引导页状态（比如测试时），可以添加以下代码清除标记：

// 调试用：删除引导页标记
final prefs = await SharedPreferences.getInstance();
await prefs.remove('hasSeenOnboarding');

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