Flutter故事展示插件story_screen的使用

当然，以下是一个关于如何在Flutter项目中使用story_screen插件来展示故事的代码示例。story_screen插件通常用于在应用启动时展示一系列引导页面或故事。

首先，确保你已经在pubspec.yaml文件中添加了story_screen依赖：

dependencies:
  flutter:
    sdk: flutter
  story_screen: ^latest_version  # 请将latest_version替换为插件的最新版本号

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

接下来，创建一个Flutter项目（如果你还没有项目的话），并在项目中实现story_screen插件。

以下是一个完整的示例，展示如何在应用中使用story_screen插件：

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

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

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

class StoryScreenWrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoryScreen.builder()
      .setTitle("Welcome to My App")
      .setImage(
        "https://example.com/image1.jpg", // 替换为你的图片URL
        fit: BoxFit.cover,
      )
      .setDescription("This is the first story page.")
      .addButton(
        StoryScreenButton(
          title: "Skip",
          onPressed: () {
            Navigator.of(context).pushReplacementNamed('/home');
          },
        ),
      )
      .addStory(
        StoryScreenStory(
          title: "Second Page",
          image: "https://example.com/image2.jpg", // 替换为你的图片URL
          description: "This is the second story page.",
          backgroundColor: Colors.white,
        ),
      )
      .addStory(
        StoryScreenStory(
          title: "Third Page",
          image: "https://example.com/image3.jpg", // 替换为你的图片URL
          description: "This is the third story page.",
          backgroundColor: Colors.grey.shade200,
        ),
      )
      .setDotIndicatorConfig(
        StoryScreenDotIndicatorConfig(
          dotColor: Colors.grey,
          dotActiveColor: Colors.blue,
          dotSize: 10.0,
          dotSpacing: 15.0,
          dotActiveSize: 12.0,
        ),
      )
      .setNavigationConfig(
        StoryScreenNavigationConfig(
          isLoopAllowed: false,
          showSkipButton: true,
          nextButtonTitle: "Next",
          doneButtonTitle: "Done",
          onDone: () {
            Navigator.of(context).pushReplacementNamed('/home');
          },
        ),
      )
      .build(context);
  }
}

// 定义一个简单的首页
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home"),
      ),
      body: Center(
        child: Text("Welcome to the Home Screen!"),
      ),
    );
  }
}

// 路由配置
class MyRouter {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case '/home':
        return MaterialPageRoute(builder: (_) => HomeScreen());
      default:
        return MaterialPageRoute(builder: (_) => Scaffold(body: Center(child: Text('Unknown route: ${settings.name}'))));
    }
  }
}

// 修改MaterialApp以使用自定义路由
class MyAppWithRouter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Story Screen Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      onGenerateRoute: MyRouter.generateRoute,
      builder: (context, child) {
        return StoryScreenWrapper(key: UniqueKey()); // 使用UniqueKey来重建StoryScreenWrapper，防止闪烁
      },
    );
  }
}

// 替换MyApp为MyAppWithRouter
void main() {
  runApp(MyAppWithRouter());
}

在这个示例中，我们创建了一个StoryScreenWrapper小部件，它使用StoryScreen.builder()方法来构建故事页面。每个故事页面都包含标题、图片、描述和按钮。我们还配置了导航配置和指示器配置。

注意，builder方法中的UniqueKey()用于在导航回StoryScreenWrapper时避免屏幕闪烁。

最后，我们在main函数中替换了MyApp为MyAppWithRouter，并配置了路由，使得在应用启动时显示故事页面，完成后跳转到首页。

请确保将示例中的图片URL替换为你自己的图片URL，并根据需要进行进一步的自定义。