FLUTTER ECOSYSTEM

douglasiacovelli/page_view_dot_indicator

एक सरल और एनिमेटेड पेज व्यू इंडिकेटर, जो बिंदुओं के रूप में होता है, जिसे आप रंग, आकार, अंतर और अवधि के रूप में कस्टमाइज़ कर सकते हैं।

page_view_dot_indicator प्रोजेक्ट कवर
Stars
17
Forks
11
अंतिम पुश (UTC)
13 फ़र॰ 2024
प्रोजेक्ट स्थिति
सक्रिय
Douglas Iacovelli GitHub avatar
GITHUB User

Douglas Iacovelli ↗

Tech manager, Flutter contributor, article writer and a developer with product in mind.

@contratadome Bertioga
भाषाएँDartSwiftKotlinObjective-C

तकनीकी विषय

इस रिपॉज़िटरी के पैकेज

उपयोग की गई निर्भरताएँ

निर्भरता सूची 3 आइटम
  • flutter{"sdk":"flutter"}
  • flutter_testडेवलपमेंट{"sdk":"flutter"}
  • flutter_lintsडेवलपमेंट2.0.2

मूल README

यह अंग्रेज़ी मूल स्नैपशॉट है। नवीनतम सामग्री GitHub पर देखें।

README खोलें / बंद करें

Page view dot indicator

pub package

This lib draws a simple dot indicator for page views with a simple API. Right now it is able to draw dots with custom size, colors, spacing and duration. Besides that it also handles overflow by fading the edges if there are more dots than the width of the page allows.

https://user-images.githubusercontent.com/1608564/111876654-7f539200-897e-11eb-9d1e-7a9ceb820ec7.gif

Usage

Simply use this Widget in your page and make sure to use any form of state management to update the currentItem, such as setState.

These are the mandatory parameters:
PageViewDotIndicator(
  currentItem: selectedPage,
  count: pageCount,
  unselectedColor: Colors.black26,
  selectedColor: Colors.blue,
)
But you can also customize it using other parameters, such as:
PageViewDotIndicator(
  currentItem: selectedPage,
  count: pageCount,
  unselectedColor: Colors.black26,
  selectedColor: Colors.blue,
  size: const Size(12, 12),
  unselectedSize: const Size(8, 8),
  duration: const Duration(milliseconds: 200),
  margin: const EdgeInsets.symmetric(horizontal: 8),
  padding: EdgeInsets.zero,
  alignment: Alignment.centerLeft,
  fadeEdges: false,
  boxShape: BoxShape.square, //defaults to circle
  borderRadius: BorderRadius.circular(5), //only for rectangle shape
  onItemClicked: (index) { ... }
)