搜索插件、代码仓与 APP 分类

page_indicator 封面
插件详情v0.4.1

page_indicator

flutter pageview 指示器,易于使用。可自定义位置和大小,但仅支持圆形。

近 30 天下载
464
喜欢数
58
Pub 分数
60

安装插件

flutter pub add page_indicator

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,为 PageView 小部件提供简单且可自定义的圆形指示器。它允许用户轻松显示当前页面位置,大小和位置均可调整,从而增强可滚动界面中的导航反馈。该指示器仅支持圆形形状,确保视觉风格简洁一致。非常适合用于引导屏幕、图片滑块或任何需要视觉页面跟踪的轮播式 UI。

适合场景

  • 入门屏幕
  • 图片滑块
  • 轮播界面
  • 教程指南
  • 表单向导
  • 产品展示

主要特点

  • 仅圆形指示器
  • 可自定义大小
  • 可调节位置
  • 简单 API
  • Lightweight
  • 内置动画

适合对象

  • 初学者Flutter开发者
  • 简单的轮播图设计
  • 极简用户界面
  • PageView 导航指示器
  • 移动应用入门

使用建议

  • 限于圆形形状
  • 不支持自定义形状
  • 没有高级样式选项
  • 不适合复杂指标
  • 依赖于页面视图集成
  • 无深色模式自定义

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

page_indicator

pub package

Preview

image

image

Install

see

  1. Depend on it Add this to your package's pubspec.yaml file:
dependencies:
  page_indicator: ^0.3.0
  1. Install it

You can install packages from the command line:

with Flutter:

flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

  1. Import it Now in your Dart code, you can use:
import 'package:page_indicator/page_indicator.dart';

Usage

see example file

or

PageIndicatorContainer(
  child: PageView(
    children: <Widget>[
      Text("1"),
      Text('2'),
      Text('3'),
      Text('4'),
    ],
    controller: controller,
  ),
  align: IndicatorAlign.bottom,
  length: 4,
  indicatorSpace: 20.0,
  padding: const EdgeInsets.all(10),
  indicatorColor: Colors.white,
  indicatorSelectorColor: Colors.blue,
  shape: IndicatorShape.circle(size: 12),
  // shape: IndicatorShape.roundRectangleShape(size: Size.square(12),cornerSize: Size.square(3)),
  // shape: IndicatorShape.oval(size: Size(12, 8)),
}
Force refersh state
final key = GlobalKey<PageContainerState>();
PageIndicatorContainer(
  key: key,
  // other ...
);

// force refersh
key.currentState.forceRefreshState();

Migration guide

0.1.x => 0.2.x

PageIndicatorContainer(
  ...
--  size: 12.0,
++  shape: IndicatorShape.circle(size: 12),
)

所属分类

源码仓库

使用此插件的项目