Flutter页面指示器插件instagram_page_indicator的使用

简介

Instagram Page Indicator 是一个用于 Flutter 应用程序的简单页面指示器。它模仿了 Instagram 的页面指示器风格。

演示

使用方法

要在你的 Flutter 应用程序中使用 InstagramPageIndicator，你只需要将以下代码添加到你的构建方法中：

InstagramPageIndicator(
    itemCount: pages.length,
    controller: controller,
),

其中：

• itemCount 表示页面的数量。
• controller 是 PageController 实例，用于控制 PageView。

自定义配置

你可以自定义指示器的方向、大小、间距、颜色等属性。以下是一个自定义配置的示例：

InstagramPageIndicator(
    itemCount: pages.length,
    controller: controller,
    dotSize: 11, // 默认点的大小
    dotSelectedSize: 15, // 选中点的大小
    dotSpacing: 20, // 点之间的间距
    dotColor: Colors.grey.shade300, // 默认点的颜色
    dotSelectedColor: Colors.blueAccent.shade100, // 选中点的颜色
    visibleDotCount: 5, // 可见点的数量
    visibleDotThreshold: 2, // 可见点的阈值
    orientation: Axis.horizontal, // 方向（水平或垂直）
    reverse: false, // 是否反转
),

完整示例

以下是一个完整的示例，展示了如何在 Flutter 应用程序中使用 InstagramPageIndicator 插件。

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

void main() => runApp(const MyApp());

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final controller = PageController(viewportFraction: 0.8, keepPage: true);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final pages = List.generate(
      40,
      (index) => Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16),
          color: Colors.grey.shade300,
        ),
        margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
        child: SizedBox(
          height: 280,
          child: Center(
            child: Text(
              "Page $index",
              style: const TextStyle(color: Colors.blueAccent),
            ),
          ),
        ),
      ),
    );

    return MaterialApp(
      title: 'Material App',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Instagram Page Indicator'),
        ),
        body: Padding(
          padding: const EdgeInsets.only(top: 30),
          child: Column(
            children: [
              SizedBox(
                height: 240,
                child: PageView.builder(
                  controller: controller,
                  itemCount: pages.length,
                  itemBuilder: (_, index) {
                    return pages[index % pages.length];
                  },
                ),
              ),
              const SizedBox(height: 10),
              InstagramPageIndicator(
                itemCount: pages.length,
                controller: controller,
                dotSize: 11,
                dotSelectedSize: 15,
                dotSpacing: 20,
                dotColor: Colors.grey.shade300,
                dotSelectedColor: Colors.blueAccent.shade100,
                visibleDotCount: 5,
                visibleDotThreshold: 2,
                orientation: Axis.horizontal,
                reverse: false,
              ),
            ],
          ),
        ),
      ),
    );
  }
}