Flutter故事指示器插件story_indicator的使用

Flutter故事指示器插件story_indicator的使用

功能介绍

• 自动运行指示器：模仿Facebook故事的效果。
• 结合PageView显示横幅：可以与PageView一起使用来显示横幅。

安装

在你的包的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  story_indicator: ^latest

导入

在你的 Dart 文件中导入 story_indicator 插件：

import 'package:story_indicator/story_indicator.dart';

使用示例

在任何地方使用这个插件，你可以查看示例代码中的具体用法。下面是一个完整的示例代码：

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

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

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

  // 这个 widget 是你应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Story Indicator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => __MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final currentIndex = ValueNotifier(0);
  static const itemOfOnBoarding = 5;
  final PageController _pageController = PageController();

  [@override](/user/override)
  void initState() {
    super.initState();
    currentIndex.addListener(() {
      if (currentIndex.value == 0) {
        _pageController.jumpToPage(currentIndex.value);
      } else {
        _pageController.animate toPage(currentIndex.value,
            duration: const Duration(milliseconds: 600),
            curve: Curves.easeInOut);
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          color: Colors.blue,
          padding: const EdgeInsets.symmetric(vertical: 64),
          child: Column(
              children: [
                Expanded(
                    child: PageView.builder(
                        controller: _pageController,
                        itemCount: itemOfOnBoarding,
                        itemBuilder: (_, index) =&gt; Container(
                            padding: const EdgeInsets.all(24),
                            child: Container(
                                alignment: Alignment.center,
                                color: Colors.white,
                                child: Text("Page number ${index + 1}", style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w500))
                            )
                        ),
                        onPageChanged: (index) {
                          currentIndex.value = index;
                        }
                    )
                ),
                Container(
                    padding: const EdgeInsets.all(24),
                    child: StoryIndicator(
                        itemCount: itemOfOnBoarding,
                        currentIndex: currentIndex,
                        highlightColor: Colors.red,
                        indicatorSpacing: 8,
                        interval: const Duration(seconds: 2)
                    )
                )
              ]
          )
      )
    );
  }
}