搜尋套件、儲存庫與 APP 分類

number_pagination 封面
套件詳情v1.1.6

number_pagination

使用數字進行分頁,類似於經典的網頁樣式分頁。透過數字探索頁面,而非無限滾動!

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
4550
喜歡數
74
Pub 分數
160

安裝套件

flutter pub add number_pagination

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

NumberPagination 是一個 Flutter 套件,提供傳統的數字式分頁介面,非常適合需要透過離散編號連結進行頁面導航的應用程式。它模擬經典的網頁式分頁,讓使用者可以直接跳轉至特定頁面,而非依賴無限滾動。此套件支援多個平台,包括 Android、iOS、Web、macOS、Windows 和 Linux,適用於跨平台應用。它提供乾淨且可自訂的 UI,內建支援頁面範圍顯示、首頁/末頁按鈕,以及可設定樣式。非常適合需要精確導航的資料密集型介面。

適用情境

  • 以結構化的方式顯示大型數據集
  • 在儀表板中建立使用者友善的導航
  • 實現搜尋結果分頁
  • 使用頁面控制項建構管理面板
  • 在內容列表中啟用直接頁面跳轉

主要特色

  • 編號頁面按鈕
  • 支援首頁/末頁導航
  • 可自訂的樣式選項
  • 跨平台相容性
  • 可設定的頁面範圍顯示
  • 適用於所有螢幕尺寸的響應式設計

適合對象

  • 開發人員建構類似網頁的分頁
  • 需要結構化資料導航的應用程式
  • 優先考慮可用性而非無限滾動的專案
  • 針對多平台部署的團隊
  • 希望擁有簡單直覺頁面控制的使用者

使用建議

  • 可能需要額外的樣式設定以支援自訂主題
  • 對於非常大的資料集,若未進行效能優化則不理想
  • 僅限數值導航(無無限滾動)
  • 需要手動處理頁面資料載入
  • 最適合已知總頁數的場景

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

preview

number_pagination flutter flutter test package

ko-fi

Implementing Flutter Number Pagination using a Popular Web Approach.

This package is very simple. Without depending on other packages.

Its usage is also simple and easy.

document

NumberPagination

A customizable pagination widget for Flutter applications.

Overview

NumberPagination is a Flutter widget that provides an intuitive and flexible way to implement pagination in your applications. It displays page numbers and navigation controls, allowing users to easily navigate through multiple pages of content.

Features

  • Page number buttons
  • Navigation controls (first, previous, next, last)
  • Customizable appearance
  • Responsive design

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  number_pagination: ^1.1.0

Customization Options for NumberPagination Widget

The NumberPagination widget offers a wide range of customization options to tailor its appearance and behavior to your needs. Below is a comprehensive list of these options:

Page Display

Option Type Description Default
visiblePagesCount int Number of page numbers to display at once 10
currentPage int Currently displayed page number Required
totalPages int Total number of pages available Required

Text Styling

Option Type Description Default
fontSize double Font size for the page numbers 15
fontFamily String? Font family for the page numbers null

Button Styling

Option Type Description Default
buttonElevation double Elevation of the buttons 5
buttonRadius double Radius of the buttons 0
controlButtonSize Size Size of the control buttons Size(48, 48)
numberButtonSize Size Size of the number buttons Size(48, 48)

Colors

Option Type Description Default
selectedTextColor Color Text color for the selected page button Colors.white
unSelectedTextColor Color Text color for unselected page buttons Colors.black
selectedButtonColor Color Background color of the selected page button Colors.black
unSelectedButtonColor Color Background color of unselected page buttons Colors.white
controlButtonColor Color Background color of control buttons Colors.white

Icons

Option Type Description Default
firstPageIcon Widget Icon for the "first page" button Icon(Icons.first_page)
previousPageIcon Widget Icon for the "previous page" button Icon(Icons.keyboard_arrow_left)
nextPageIcon Widget Icon for the "next page" button Icon(Icons.keyboard_arrow_right)
lastPageIcon Widget Icon for the "last page" button Icon(Icons.last_page)

Spacing

Option Type Description Default
navigationButtonSpacing double Spacing between navigation buttons 4.0
sectionSpacing double Spacing between navigation buttons and page number buttons 10.0
betweenNumberButtonSpacing double Spacing between individual number buttons 3

Callback

Option Type Description
onPageChanged Function(int) Callback function triggered when the page changes

These customization options allow you to fine-tune the appearance and behavior of the NumberPagination widget to seamlessly integrate with your app's design and functionality.

所屬分類

原始碼儲存庫

使用此套件的專案