Pakete, Repositories und App-Kategorien suchen

ducafecatFlutter-Ökosystem
Cover von page_indicator
Paketdetailsv0.4.1

page_indicator

Flutter PageView-Indikator, einfach zu verwenden. Benutzerdefinierte Position und Größe, aber nur kreisförmig.

pub.dev API-Dokumentation Quellcode
30-Tage-Downloads
464
Likes
58
Pub-Punkte
60

Paket installieren

flutter pub add page_indicator

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket, das einen einfachen, anpassbaren kreisförmigen Indikator für PageView-Widgets bereitstellt. Es ermöglicht es Benutzern, die aktuelle Seitenposition mit einstellbarer Größe und Position einfach darzustellen und verbessert so die Navigationsrückmeldung in scrollbaren Oberflächen. Der Indikator unterstützt nur kreisförmige Formen, was eine saubere und konsistente visuelle Gestaltung gewährleistet. Ideal für Onboarding-Bildschirme, Bildschau-Elemente oder jede Karussell-basierte Benutzeroberfläche, bei der eine visuelle Seitenverfolgung erforderlich ist.

Anwendungsfälle

  • Onboarding-Bildschirme
  • Bildschubladen
  • Karussell-Schnittstellen
  • Anleitungswalkthroughs
  • Formularwizard
  • Produktpräsentation

Hauptmerkmale

  • Nur kreisförmiger Indikator
  • Anpassbare Größe
  • Verstellbare Position
  • Einfache API
  • Lightweight
  • Eingebaute Animationen

Geeignet für

  • Anfänger-Flutter-Entwickler
  • Einfache Karussell-Designs
  • Minimale Benutzeroberflächen
  • PageView-Navigationsindikatoren
  • Mobile-App-Onboarding

Hinweise

  • Beschränkt auf runde Form
  • Keine Unterstützung für benutzerdefinierte Formen
  • Keine erweiterten Stiloptionen
  • Nicht geeignet für komplexe Indikatoren
  • Abhängig von der PageView-Integration
  • Keine Anpassung des Dunkelmodus

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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),
)

Kategorien

Karussell oder Cover Flow

Quell-Repository

Projekte, die dieses Paket verwenden