搜尋套件、儲存庫與 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),
)

所屬分類

原始碼儲存庫

使用此套件的專案