[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9365":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":18,"compositeScore":19,"rankGlobal":9,"rankLanguage":9,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":15,"starSnapshotCount":15,"syncStatus":16,"lastSyncTime":28,"discoverSource":29},9365,"smooth_page_indicator","Milad-Akarie\u002Fsmooth_page_indicator","Milad-Akarie","Flutter Smooth PageView indicators",null,"Dart",1438,161,10,4,0,2,6,1,19.63,"MIT License",false,"master",true,[],"2026-06-12 02:02:06","\n# smooth_page_indicator\n  \u003Cp >  \n\u003Ca href=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-green\">\u003Cimg   \nalign=\"center\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-green\" alt=\"MIT License\">\u003C\u002Fa>    \n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fstargazers\">\u003Cimg align=\"center\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FMilad-Akarie\u002Fsmooth_page_indicator?style=flat&logo=github&colorB=green&label=stars\" alt=\"stars\">\u003C\u002Fa>    \n\u003Ca href=\"https:\u002F\u002Fpub.dev\u002Fpackages\u002Fsmooth_page_indicator\u002Fversions\u002F1.0.0\">\u003Cimg   \nalign=\"center\" src=\"https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Fsmooth_page_indicator.svg\" alt=\"pub version\">\u003C\u002Fa>    \n\u003Ca href=\"https:\u002F\u002Fcodecov.io\u002Fgithub\u002FMilad-Akarie\u002Fsmooth_page_indicator\" > \n \u003Cimg align=\"center\" src=\"https:\u002F\u002Fcodecov.io\u002Fgithub\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fgraph\u002Fbadge.svg?token=MQDYUI0M5G\"\u002F> \n \u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fwww.buymeacoffee.com\u002Fmiladakarie\" target=\"_blank\">\u003Cimg align=\"center\" src=\"https:\u002F\u002Fcdn.buymeacoffee.com\u002Fbuttons\u002Fv2\u002Fdefault-yellow.png\" alt=\"Buy Me A Coffee\" height=\"30px\" width= \"108px\">\u003C\u002Fa>  \n\u003C\u002Fp>    \n\n## Introduction\nPage indicators are a crucial part of any app that involves multiple pages. They help users to  \nunderstand the number of pages and their current position. `SmoothPageIndicator` is a Flutter  \npackage that provides a set of animated page indicators with a variety of effects.\n\n![](https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fblob\u002Fmaster\u002Fdemo\u002Ffour_squares_demo.gif?raw=true)\n\n\n## Effects\n`SmoothPageIndicator` comes with a set of built-in effects that you can use to animate the active dot,  \nyou can also customize each effect to your liking.\n\nfor more specific customization, try the `CustomizableEffect` which allows for more customization.\n\n| Effect                                    |                                                         Preview                                                          |  \n|:------------------------------------------|:------------------------------------------------------------------------------------------------------------------------:|  \n| Worm                                      |              ![](https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fblob\u002Fmaster\u002Fdemo\u002Fworm.gif?raw=true)               |\n| Worm  style = WormStyle.thin [v1.0.0]     |            ![](https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fblob\u002Fmaster\u002Fdemo\u002Fworm-thin.gif?raw=true)            |\n| Expanding Dots                            |          ![](https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fblob\u002Fmaster\u002Fdemo\u002Fexpanding-dot.gif?raw=true)          |\n| Jumping dot                               |           ![](https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fblob\u002Fmaster\u002Fdemo\u002Fjumping-dot.gif?raw=true)           | \n| Jumping dot with vertical offset [v1.0.0] | ![](https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fblob\u002Fmaster\u002Fdemo\u002Fjumping-dot-effect-with-voffset.gif?raw=true) | \n| Scrolling Dots                            |        ![](https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fblob\u002Fmaster\u002Fdemo\u002Fscrolling-dots-2.gif?raw=true)         | \n| Slide                                     |              ![](https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fblob\u002Fmaster\u002Fdemo\u002Fslide.gif?raw=true)              |\n| Scale                                     |              ![](https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fblob\u002Fmaster\u002Fdemo\u002Fscale.gif?raw=true)              | \n| Swap                                      |              ![](https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fblob\u002Fmaster\u002Fdemo\u002Fswap.gif?raw=true)               | \n| Swap type = SwapType.yRotation [v1.0.0]   |         ![](https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fblob\u002Fmaster\u002Fdemo\u002Fswap-yrotation.gif?raw=true)          |\n| Color Transition [0.1.2]                  |        ![](https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fblob\u002Fmaster\u002Fdemo\u002Fcolor-transition.gif?raw=true)         | \n| Customizable demo-1 [v1.0.0]              |         ![](https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fblob\u002Fmaster\u002Fdemo\u002Fcustimizable-1.gif?raw=true)          | \n| Customizable demo-2 [v1.0.0]              |         ![](https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fblob\u002Fmaster\u002Fdemo\u002Fcustomizable-2.gif?raw=true)          | \n| Customizable demo-3 [v1.0.0]              |         ![](https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fblob\u002Fmaster\u002Fdemo\u002Fcustomizable-3.gif?raw=true)          | \n| Customizable demo-4 [v1.0.0]              |         ![](https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fblob\u002Fmaster\u002Fdemo\u002Fcustomizable-4.gif?raw=true)          |\n\n## Usage\n`SmoothPageIndicator` uses the PageController's scroll offset to animate the active dot.\n\n```dart\nSmoothPageIndicator(    \n   controller: controller,  \u002F\u002F PageController    \n   count:  6,    \n   effect:  WormEffect(),  \u002F\u002F your preferred effect    \n   onDotClicked: (index){    \n  }\n)    \n   \n```   \n## Usage without a PageController\nUnlike `SmoothPageIndicator`, `AnimatedSmoothIndicator` is self animated and all it needs is the  \nactive index.\n\n```dart \nAnimatedSmoothIndicator(    \n   activeIndex: yourActiveIndex,    \n   count: 6,    \n   effect: WormEffect(), \n)    \n```   \n## Vertical layout support\nSmooth page indicator supports both horizontal and vertical layouts.\n\n```dart  \nSmoothPageIndicator(    \n   controller: controller,  \u002F\u002F PageController    \n   count:  6,    \n   axisDirection: Axis.vertical,    \n   effect:  WormEffect(), \n)    \n```\n![](https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fblob\u002Fmaster\u002Fdemo\u002Fvertical_demo.gif?raw=true)\n\n## Scrolling dots effect\nSmooth page indicator comes with a shipped it scrolling dots effect, (similar to the one used in instagram), it's useful when you have a large number of pages.\n\n![](https:\u002F\u002Fgithub.com\u002FMilad-Akarie\u002Fsmooth_page_indicator\u002Fblob\u002Fmaster\u002Fdemo\u002Fsmooth_page_indicator_demo_4.gif?raw=true)\n\n## Customization\nEach effect comes with its own set of properties that you can customize to your liking.   \nfor example, you can customize direction, width, height, radius, spacing, paint style, color and more... of `SlideEffect` like follows:\n\n```dart \n  SmoothPageIndicator(    \n   controller: controller,    \n   count:  6,    \n   axisDirection: Axis.vertical,    \n   effect:  SlideEffect(    \n      spacing:  8.0,    \n      radius:  4.0,    \n      dotWidth:  24.0,    \n      dotHeight:  16.0,    \n      paintStyle:  PaintingStyle.stroke,    \n      strokeWidth:  1.5,    \n      dotColor:  Colors.grey,    \n      activeDotColor:  Colors.indigo    \n  ), \n)    \n   \n```\n\n## Theme-based Colors\nBy default, `SmoothPageIndicator` derives its colors from the app theme:\n- `activeDotColor` defaults to `Theme.of(context).primaryColor`\n- `dotColor` defaults to `Theme.of(context).unselectedWidgetColor` with reduced opacity\n\nThis means the indicator automatically adapts to your app's color scheme. You can override these by explicitly setting `dotColor` and `activeDotColor` in any effect.\n\n## SmoothPageIndicatorTheme\nYou can configure default settings for all `SmoothPageIndicator` and `AnimatedSmoothIndicator` widgets app-wide using `SmoothPageIndicatorTheme`.\n\n```dart\nMaterialApp(\n  theme: ThemeData.light().copyWith(\n    extensions: [\n      SmoothPageIndicatorTheme(\n        effect: ExpandingDotsEffect(), \u002F\u002F default effect when none is specified\n        defaultColors: DefaultIndicatorColors(\n          active: Colors.blue,\n          inactive: Colors.grey,\n        ),\n      ),\n    ],\n  ),\n)\n```\n\n- `defaultColors`: Applies to **all** indicator effects across the app (unless overridden by the effect itself)\n- `effect`: The default effect used when no effect is specified in the widget. Colors set within this effect (e.g., `activeDotColor`) only apply to this default effect.\n\nThis is useful when you want consistent indicator styling across your entire app without repeating the same configuration.   \n\n## Support the Library\n\nYou can support the library by liking it on pub, staring in on Github and reporting any bugs you  \nencounter.","`smooth_page_indicator` 是一个为 Flutter 应用设计的页面指示器库，提供了多种动画效果来帮助用户理解当前所在页数及位置。其核心功能包括一系列预设的动画效果（如蠕虫、扩展点、跳跃点等），支持高度自定义，开发者可以根据需求调整每个效果的具体参数以达到最佳视觉体验。此外，该库还引入了 `CustomizableEffect` 类，允许更进一步地个性化设置。适用于需要展示多页面内容的应用场景，例如引导页、轮播图等，能够有效提升用户体验。","2026-06-11 03:22:20","top_language"]