如何为Flutter应用开发首次启动引导页 求推荐适用Widget及示例

• 首选Flutter官方自带的PageView组件：无额外依赖，自定义灵活度拉满，完全支持横向/纵向滑动切换多页面，适配你需要的5个图文引导页需求，还可以自己搭配页面指示器、操作按钮等组件
• 如果你不想自己封装基础交互，也可以用第三方成熟封装库introduction_screen，已经预置了指示器、跳过/完成按钮、页面切换动画等常用逻辑，只需要传入自定义的页面内容即可

首先你需要先添加shared_preferences依赖到pubspec.yaml，用来存储用户是否已经看过引导的标记，实现首次启动自动弹出的逻辑：

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.2

引导页的完整实现代码如下：

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

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

  @override
  State<OnboardingGuide> createState() => _OnboardingGuideState();
}

class _OnboardingGuideState extends State<OnboardingGuide> {
  final PageController _pageController = PageController();
  int _currentPageIndex = 0;
  // 可根据需求替换为5个自定义图文页面
  final List<Widget> _guidePages = [
    _buildGuidePage(
      title: "欢迎使用本应用",
      desc: "这里是应用的核心功能介绍",
      imagePath: "assets/guide1.png",
    ),
    _buildGuidePage(
      title: "快捷操作",
      desc: "你可以通过下拉手势快速刷新内容",
      imagePath: "assets/guide2.png",
    ),
    _buildGuidePage(
      title: "内容收藏",
      desc: "点击心形按钮即可收藏你喜欢的内容",
      imagePath: "assets/guide3.png",
    ),
    _buildGuidePage(
      title: "消息通知",
      desc: "开启通知后第一时间获取更新提醒",
      imagePath: "assets/guide4.png",
    ),
    _buildGuidePage(
      title: "即刻开始",
      desc: "开启你的使用之旅吧",
      imagePath: "assets/guide5.png",
    ),
  ];

  static Widget _buildGuidePage({required String title, required String desc, required String imagePath}) {
    return Padding(
      padding: const EdgeInsets.all(32),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset(imagePath, height: 250),
          const SizedBox(height: 48),
          Text(title, style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
          const SizedBox(height: 16),
          Text(desc, textAlign: TextAlign.center, style: const TextStyle(fontSize: 16, color: Colors.grey)),
        ],
      ),
    );
  }

  // 标记用户已完成引导，后续启动不再自动弹出
  Future<void> _markGuideCompleted() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setBool('is_first_launch', false);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          PageView(
            controller: _pageController,
            onPageChanged: (index) {
              setState(() => _currentPageIndex = index);
            },
            children: _guidePages,
          ),
          // 底部操作区
          Positioned(
            bottom: 40,
            left: 24,
            right: 24,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                // 跳过按钮
                TextButton(
                  onPressed: () async {
                    await _markGuideCompleted();
                    if (mounted) Navigator.pop(context);
                  },
                  child: const Text("跳过"),
                ),
                // 页面指示器
                Row(
                  children: List.generate(_guidePages.length, (index) {
                    return Container(
                      margin: const EdgeInsets.symmetric(horizontal: 4),
                      width: _currentPageIndex == index ? 24 : 8,
                      height: 8,
                      decoration: BoxDecoration(
                        color: _currentPageIndex == index ? Colors.blue : Colors.grey[300],
                        borderRadius: BorderRadius.circular(4),
                      ),
                    );
                  }),
                ),
                // 下一步/完成按钮
                TextButton(
                  onPressed: () async {
                    if (_currentPageIndex == _guidePages.length - 1) {
                      await _markGuideCompleted();
                      if (mounted) Navigator.pop(context);
                    } else {
                      _pageController.nextPage(
                        duration: const Duration(milliseconds: 300),
                        curve: Curves.easeInOut,
                      );
                    }
                  },
                  child: Text(_currentPageIndex == _guidePages.length - 1 ? "完成" : "下一步"),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

• 首次启动自动弹出逻辑：在应用的启动页/首页的initState生命周期中读取shared_preferences中的is_first_launch标记，默认返回true，若为true则弹窗/跳转打开OnboardingGuide页面即可
• 后续入口访问：你可以在设置页、帮助中心等位置添加「新手教程」入口，点击直接跳转该页面即可，不需要修改引导页本身的逻辑
• 内容自定义：直接修改_guidePages列表里的页面组件即可，支持任意图文、动画组合，完全适配你的业务需求

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