{"id":19806645,"url":"https://github.com/timnew/story_page_view","last_synced_at":"2025-07-27T00:36:38.184Z","repository":{"id":145702604,"uuid":"444857259","full_name":"timnew/story_page_view","owner":"timnew","description":"A highly customizable flutter widget that implemented instagram styled story page","archived":false,"fork":false,"pushed_at":"2022-01-05T17:16:27.000Z","size":4279,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-11T06:24:17.541Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/timnew.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-05T15:38:26.000Z","updated_at":"2022-01-05T17:16:30.000Z","dependencies_parsed_at":"2023-04-07T23:47:57.719Z","dependency_job_id":null,"html_url":"https://github.com/timnew/story_page_view","commit_stats":{"total_commits":10,"total_committers":2,"mean_commits":5.0,"dds":0.09999999999999998,"last_synced_commit":"e330cbaa6b502c3f864d17377763a87ab47207cb"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timnew%2Fstory_page_view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timnew%2Fstory_page_view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timnew%2Fstory_page_view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timnew%2Fstory_page_view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timnew","download_url":"https://codeload.github.com/timnew/story_page_view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241150393,"owners_count":19918350,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T09:08:05.554Z","updated_at":"2025-02-28T12:24:22.412Z","avatar_url":"https://github.com/timnew.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# story_page_view\n[![Star this Repo](https://img.shields.io/github/stars/timnew/story_page_view.svg?style=flat-square)](https://github.com/timnew/story_page_view)\n[![Pub Package](https://img.shields.io/pub/v/story_page_view.svg?style=flat-square)](https://pub.dev/packages/story_page_view)\n[![Build Status](https://img.shields.io/github/workflow/status/timnew/story_page_view/Run-Test)](https://github.com/timnew/story_page_view/actions?query=workflow%3ARun-Test)\n\n## Features\n\nA highly customizable flutter implementation of instagram-style story page view, which renders a page view that turns to next after after a given period of time. An page indicator with animated timer can be included too.\n\n## Getting started\n\nAdd `story_page_view` to `pubspec.yaml`:\n\n```bash\nflutter pub add story_page_view\n```\n\n## Usage\n\n### Basic usage\n\nThe widget is super easy to use:\n\n```dart\nStoryPageView(\n  children: [\n    Container(color: Colors.red),\n    Container(color: Colors.orange),\n    Container(color: Colors.yellow),\n    Container(color: Colors.green),\n    Container(color: Colors.blue),\n    Container(color: Colors.indigo),\n    Container(color: Colors.purple),\n  ],\n);\n```\n\n![Basic Usage Demo](https://raw.githubusercontent.com/timnew/story_page_view/master/media/basic_usage.gif)\n\n### Change Story duration\n\nChanging the timer for each page is easy:\n\n```dart\nStoryPageView(\n  storyDuration: const Duration(seconds: 5),\n)\n```\n\n### Control the page programmatically\n\nSimilar to `PageView`, `StoryPageView` uses `StoryPageController` to control its behaviour. `StoryPageController` is a special type of `PageController` that used by `PageView`, which supports all features from `PageController`.\n\n### Customize paging animation\n\nBeyond `PageController`, `StoryPageController`  also controls the paging animation. The paging animation can be customised by `StoryPageController`.\n\n```dart\nStoryPageView(\n  controller: StoryPageController(\n    pagingCurve: Curves.elasticOut,\n    pagingDuration: const Duration(milliseconds: 2000),\n  ),\n)\n```\n\n### Customize Page Indicator Style\n\n```dart\nStoryPageView(\n  indicatorStyle: StoryPageIndicatorStyle(\n    height: 6,\n    gap: 12,\n    unvisitedColor: Colors.blue.shade200,\n    visitedColor: Colors.blue.shade900,\n    timerBarBackgroundColor: Colors.blue.shade300, // default to unvisitedColor if not given or is null\n    timerBarColor: Colors.blue.shade700, // default to visitedColor if not given or is null\n    shape: RoundedRectangleBorder( // Change Shape\n      borderRadius: BorderRadius.circular(12),\n    ),\n  ),\n)\n```\n\n### Customize Page Indicator as Overlay\n\nWhen `StoryPageIndicatorPosition.overlay` is used for `indicatorPosition`, the page indicator will be rendered as an overlay that floating on top of the content. And page indicator can be positioned with absolute coordinates.\n\ne.g:\n\n```dart\nStoryPageView(\n  // Align to the top middle\n  indicatorPosition: StoryPageIndicatorPosition.overlay(\n    top: 32,\n    left: 12,\n    right: 12,\n  ),\n)\n```\n\nor\n\n```dart\nStoryPageView(\n  // Align to the bottom middle\n  indicatorPosition: StoryPageIndicatorPosition.overlay(\n    bottom: 32,\n    left: 12,\n    right: 12,\n  ),\n)\n```\n\n### Custom layout\n\nIn fact the widget allow developer to fully control the layout by using `StoryPageIndicatorPosition.custom`.\nA special builder function is needed to declare the expected layout, the `PageView` widget and `StorypageIndicator` widget instance will be passed as parameter to the builder function.\n\nFor example, the following code put the page indicator and page view in a column:\n\n```dart\nStoryPageView(\n  indicatorPosition: StoryPageIndicatorPosition.custom(\n    layoutBuilder: (c, pageView, indicator) =\u003e SafeArea(\n      child: Column(\n        children: [\n          Padding(\n            padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),\n            child: indicator, // Page Indicator\n          ),\n          Expanded(\n            child: pageView, // PageView\n          ),\n        ],\n      ),\n    ),\n  ),\n)\n```\n\n### Fully customised `StoryPageView`\n\n```dart\nStoryPageView(\n  // Customize indicator looking\n  indicatorStyle: StoryPageIndicatorStyle(\n    height: 6,\n    gap: 12,\n    unvisitedColor: Colors.blue.shade200,\n    visitedColor: Colors.blue.shade900,\n    timerBarBackgroundColor:\n        Colors.blue.shade300, // default to unvisitedColor\n    timerBarColor: Colors.blue.shade700, // default to vistedColor\n    shape: RoundedRectangleBorder(\n      borderRadius: BorderRadius.circular(12),\n    ),\n  ),\n  controller: StoryPageController(\n    // Customize paging animation style\n    pagingCurve: Curves.elasticOut,\n    pagingDuration: const Duration(milliseconds: 2000),\n  ),\n  storyDuration: const Duration(seconds: 5),\n  // Customize whole layout\n  indicatorPosition: StoryPageIndicatorPosition.custom(\n    layoutBuilder: (c, pageView, indicator) =\u003e SafeArea(\n      child: Column(\n        children: [\n          // Put page indicator on top of the pager\n          Padding(\n            padding: const EdgeInsets.symmetric(\n              vertical: 8,\n              horizontal: 12,\n            ),\n            child: indicator,\n          ),\n          Expanded(\n            child: pageView,\n          ),\n        ],\n      ),\n    ),\n  ),\n  children: [\n    Container(color: Colors.red),\n    Container(color: Colors.orange),\n    Container(color: Colors.yellow),\n    Container(color: Colors.green),\n    Container(color: Colors.blue),\n    Container(color: Colors.indigo),\n    Container(color: Colors.purple),\n  ],\n)\n```\n\n![Fully Customized Demo](https://raw.githubusercontent.com/timnew/story_page_view/master/media/fully_customized.gif)\n\n### No Page Indicator\n\nSometimes developer might want to hide the page indicator, it can be done by using `StoryPageIndicatorPosition.none`.\n\n```dart\nStoryPageView(\n  storyDuration: const Duration(seconds: 1),\n  // No page indicator, timer only\n  indicatorPosition: const StoryPageIndicatorPosition.none(),\n  // Make the view port only 95% of the screen width\n  controller: StoryPageController(\n    viewportFraction: 0.95,\n  ),\n  children: [\n    Container(color: Colors.red),\n    Container(color: Colors.orange),\n    Container(color: Colors.yellow),\n    Container(color: Colors.green),\n    Container(color: Colors.blue),\n    Container(color: Colors.indigo),\n    Container(color: Colors.purple),\n  ],\n),\n```\n\n![No Page Indicator Demo](https://raw.githubusercontent.com/timnew/story_page_view/master/media/no_page_indicator.gif)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimnew%2Fstory_page_view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimnew%2Fstory_page_view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimnew%2Fstory_page_view/lists"}