Flutter引导页插件custom_intro_screen的使用

当然，以下是一个关于如何在Flutter应用中使用custom_intro_screen插件来实现引导页的示例代码。这个插件允许你创建高度可定制的引导页，非常适合在应用启动时向用户介绍主要功能。

首先，你需要在你的pubspec.yaml文件中添加custom_intro_screen依赖：

dependencies:
  flutter:
    sdk: flutter
  custom_intro_screen: ^^最新版本号（请检查pub.dev获取最新版本）

然后运行flutter pub get来安装依赖。

接下来，你可以创建一个简单的引导页示例。以下是一个完整的示例代码，包括主页面和引导页的实现：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: IntroScreenWrapper(),
    );
  }
}

class IntroScreenWrapper extends StatefulWidget {
  @override
  _IntroScreenWrapperState createState() => _IntroScreenWrapperState();
}

class _IntroScreenWrapperState extends State<IntroScreenWrapper> {
  bool _hasSeenIntro = false;

  @override
  void initState() {
    super.initState();
    // 这里你可以检查是否已经看过引导页，例如从SharedPreferences读取
    // _hasSeenIntro = ...;
  }

  @override
  Widget build(BuildContext context) {
    return _hasSeenIntro ? HomeScreen() : IntroScreen();
  }
}

class IntroScreen extends StatelessWidget {
  final List<PageViewModel> pages = [
    PageViewModel(
      title: "欢迎",
      body: "欢迎使用我们的应用！",
      image: Image.asset("assets/images/welcome.png"),
      decoration: BoxDecoration(color: Colors.blue),
    ),
    PageViewModel(
      title: "功能1",
      body: "这是应用的一个主要功能。",
      image: Image.asset("assets/images/feature1.png"),
      decoration: BoxDecoration(color: Colors.green),
    ),
    PageViewModel(
      title: "功能2",
      body: "这是另一个有用的功能。",
      image: Image.asset("assets/images/feature2.png"),
      decoration: BoxDecoration(color: Colors.amber),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomIntroScreen(
        pages: pages,
        done: Text("开始"),
        skip: Text("跳过"),
        next: Icon(Icons.arrow_forward),
        dotIndicatorCount: pages.length,
        onDone: () {
          // 用户完成引导页后执行的操作，例如保存状态到SharedPreferences
          // SharedPreferences.getInstance().then((prefs) {
          //   prefs.setBool('hasSeenIntro', true);
          // });
          Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => HomeScreen()));
        },
        onSkip: () => Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => HomeScreen())),
        showSkipButton: true,
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("主页"),
      ),
      body: Center(
        child: Text("欢迎来到主页！"),
      ),
    );
  }
}

class PageViewModel {
  final String title;
  final String body;
  final Widget image;
  final BoxDecoration decoration;

  PageViewModel({required this.title, required this.body, required this.image, required this.decoration});
}

在这个示例中，我们定义了一个简单的引导页，包含三页内容。每一页都包含标题、正文、图片和背景装饰。我们使用CustomIntroScreen小部件来显示这些页面，并提供“完成”和“跳过”按钮。当用户点击“完成”或“跳过”按钮时，我们导航到主屏幕。

注意：

1. 你需要准备一些图片资源（例如welcome.png, feature1.png, feature2.png）并放在assets/images/目录下，然后在pubspec.yaml中声明这些资源。
2. 你可能需要根据实际需求调整引导页的内容和样式。
3. 示例中的状态保存（例如使用SharedPreferences）部分被注释掉了，你可以根据实际需要来实现用户是否已经看过引导页的逻辑。