An advanced story viewer for Flutter. Quite easy & Quite advanced

Overview

"Buy Me A Coffee" pub package GitHub issues-closed Maintenance wakatime

AdvStory πŸ“Έ

Quite simple & Quite advanced


πŸš€ Advanced Story viewer for Flutter. Supports image, video and custom stories. Full control over stories for developer and smooth experience for users.

Features

➑️ High performance, minimum delays, preload and cache enabled. Works using builders, provides flexibility and lazy loading.

➑️ Gestures for skip story, skip content, pause, resume and close.

➑️ A functional controller for manipulating story flow and listening for user interactions. Allows you to skip, pause, play and more...

➑️ Predefined story types for images, videos and simple contents. But not limited to these types, allows you to use base class of predefined widgets. This literally makes the options endless.

➑️ Different durations can be set for each story content.

➑️ Predefined highly customizable story tray. But you are not limited to that, you can create your own non-animated or animated trays, AdvStory handles animation.

➑️ Header and footer areas for stories with customization option specific to a predefined story content.

➑️ Full screen option, hides status and navigation bars.

➑️ Object based, you can create as many story views as you want within the same application.

➑️ Well documented, go to docs:

  • docs

What can I do using AdvStory?

  • Quite simple: when you don't need much customization, a fully functional story view is just 8 lines of code.
AdvStory(
  storyCount: 5,
  storyBuilder: (storyIndex) => Story(
    contentCount: 10,
    contentBuilder: (contentIndex) => const ImageContent(url: ""),
  ),
  trayBuilder: (index) => AdvStoryTray(url: ""),
);
  • Quite advanced: when you need more, you can:
    • create your stories asynchronously in storyBuilder, send some requests to your server!
    • create different story trays for each story, trays can be any widget you want.
    • create custom story tray animations for each story.
    • create different footer & header areas for each story contents.
    • create contents with different skip durations.
    • create your own contents, AdvStory provides ways to you for caching media and handling story logic.
    • control flow using AdvStoryController.
    • customize tray list, story progress indicator, loading screen, shimmer effect.

If you find AdvStory useful, you can hit the like button and give a star to project on Github to motivate me or treat me with coffee to help me take time to develop this package.


🀝🏼 Supporters & Sponsors


Roadmap

Status Goal
πŸš€ Custom advanced contents
❌ Custom gestures
❌ Decouple trays & player
❌ Web & Windows & MacOs & Linux support

Some screenshots:

Comments
  • Decouple Tray & Player

    Decouple Tray & Player

    Is your feature request related to a problem? Please describe. What if you don't want to display a tray? or You only have a single story to play. What do you do?

    Describe the solution you'd like Decouple the Tray and the Story Player so that you can simply play a single story without using the tray. Or have a standalone Story Player.

    Describe alternatives you've considered Hacking your code

    Additional context N/A Just wanted to thank you again and say great job. Caching works great and skipping slides is flawless!

    enhancement fixed 
    opened by jtkeyva 9
  • Naming is a bit confusing

    Naming is a bit confusing

    Is your feature request related to a problem? Please describe. The terms cluster and story are a bit confusing the way you are using them. I think of a Cluster as a set of Stories. I think of a Story as a set of items/pages/slides. It seems that you are calling each item/slide a story, rather than a story item or page or slide.

    storyCount to me would actually be what makes up a cluster. ex a cluster may have 7 stories. so that would be clusterCount: 7 but then that sounds like there are 7 clusters when it actually means there are 7 stories.

    Describe the solution you'd like Redefine/rename clusterCount to storyCount ex: how many stories are in tray

    Redefine/rename storyCount to storyItemCount ex: how many items within a story

    Describe alternatives you've considered N/A

    Additional context You may not even need the name cluster anywhere, it's a bit confusing.

    Awesome job BTW!

    enhancement fixed 
    opened by jtkeyva 8
  • How to update story content dynamically

    How to update story content dynamically

    I want to update item count dynamically (by pagination or infinite scrolling)

    I did the that in tray view by adding a scrollcontroller, But to update the story view we need some way to update the story item when data updates via pagination,

    enhancement fixed 
    opened by strmchsr 5
  • WidgetStory AnimationController exception

    WidgetStory AnimationController exception

    Is your feature request related to a problem? Please describe. There is no problem, only opportunity. The widget type is limitless which is great, but what if you want different widget types for say "Image with text" or "3 image rows" or "Video with scrolling text" or "Video with image overlay"?

    Describe the solution you'd like Allow devs to define custom content types with templates. Could be as simple as placing dart files within a content_type or content_template folder: image_with_text.dart, three_image_rows.dart, video_with_scrolling_text.dart or video_with_image_overlay.dart

    The syntax in the template file could look something like: ContentTypeVideoWithScrollingText or ContentType.videoWithScrollingText or SlideTemplateVideoWithScrollingText or SlideTemplate.videoWithScrollingText

    Then in the "cluster" json that populates the stories, you could simply specify what content type / content template will be used for each individual slide. ex ImageWithTextSlide, VideoWithScrollingTextSlide, MyCustomTemplateSlide or ContentType.myCustomTemplate or Slide.myNewSlideTemplate along with your built in ImageSlide VideoSlide WidgetContent.

    `ContentType: 'VideoWithScrollingText' {
    videoUrl: 'https://mysite.com/linktovideo.mp4'
    scrollingText: 'this is the text i want to scroll'
    }
    `
    

    or

    `SlideType: 'ImageWithText' {
    videoUrl: 'https://mysite.com/linktovideo.mp4'
    scrollingText: 'this is the text i want to scroll'
    }
    `
    

    or

    `Template: 'Advertisement' {
    videoUrl: 'https://mysite.com/linktovideo.mp4'
    Text: 'Order Now!'
    link: 'https://mylink.com/ordernow'
    backgroundImageUrl: 'https://mysite.com/bgimage.png'
    }
    `
    

    Describe alternatives you've considered Hacking and breaking your code

    Additional context Your story player outperforms all other packages I've tried. I appreciate your built in functionality and your opinionated approach as is. I think if you break it up a bit and modularize it a bit, it could become one of the more powerful packages for content display, particularly in this full screen story format. Not sure of your goals with this package though.

    Not sure how much I can help with code, I'm not an expert. I've never done a PR and still wrapping my head around your code. I can do product development and map things out no problem, but implementing them into your code might be tough.

    I can do a $ bounty to get this implemented with the other features if it can become a priority.

    bug fixed 
    opened by jtkeyva 5
  • Sync Tray with Stories

    Sync Tray with Stories

    Screen Shot 2022-09-27 at 20 11 52 Let's say the user browsed the stories and quit the story view in the 7th story. We would expect the 7th story item to be positioned in the middle of the tray. Is this possible? Btw thanks a lot for this great package and awesome documentation.
    opened by aytunch 4
  • Update Example Stories & JSON

    Update Example Stories & JSON

    Is your feature request related to a problem? Please describe. No a problem, but something useful was taken from first release.

    Describe the solution you'd like The first release had a few different stories and a nice JSON file to see how everything works. Bring back the JSON file. The JSON helped show how to model real world input data and parse it.

    Add a couple more different stories so you can see how the JSON should be structured and to get a feel what it's like to advance to the next story when viewing it.

    Describe alternatives you've considered Using the data file from the previous release.

    Additional context Nested data can get a little tricky so it's nice to see how you consume and parse it into different stories.

    opened by jtkeyva 4
  • onSlideChanged & onStoryChanged Functions

    onSlideChanged & onStoryChanged Functions

    Is your feature request related to a problem? Please describe. Would be great to be able to call a custom function when a slide starts & when a slide ends. For instance once a video is finished it can trigger an onSlideEnd / videoViewed function to add a view count to the database. Also, would be useful to have a function fire onSlideStart

    Describe the solution you'd like Ability to define a custom function once a slide begins and ends.

    Describe alternatives you've considered Hack the code or use a pageview base approach which has onPageChanged

    Additional context Also makes sense to have onStoryChanged so that when a new story starts you can run a different function.

    opened by jtkeyva 3
  • AdvStoryController throws exception when jumpTo called on trayTap event

    AdvStoryController throws exception when jumpTo called on trayTap event

    How can I implement seen feature like when I already saw the content It will jump to next content which not yet viewed?

    Currently, when the tray open I can't skip or jump it using the controller listener.

    bug fixed 
    opened by eilhcir 3
  • [flutter web] add support for flutter web

    [flutter web] add support for flutter web

    Add support to the package for flutter web Hi, this looks like an amazing package, I'm using a different package for stories, this one look much richer package, I'm working with flutter on the web.

    My suggestion is to remove caching if kIsWeb is true I browsed a little bit in the source code of the package and I saw that the only thing that you depend on is the caching which is not currently available for the web, I just wondering if you can add a condition in case id kIsWeb true to get the image from the internet instead of the caching mechanism.

    thank you

    enhancement 
    opened by hmbenhaim 3
  • Web / MacOS / Windows / Linux Support

    Web / MacOS / Windows / Linux Support

    Is your feature request related to a problem? Please describe. Says it works for iOS & Android

    Describe the solution you'd like To work across other platforms

    Describe alternatives you've considered None

    Additional context Is there anything specific that will make it difficult? I know video, caching & performance can be problematic so not sure how realistic it is.

    enhancement 
    opened by jtkeyva 2
  • [BUG] Content Skip

    [BUG] Content Skip

    Suddenly skipped to next content when I open and close the keyboard (3 times in row) without any tapping on the content. I just open the keyboard via TextField and close it using DONE action in KB.

    I will share screen record below, I hope you can view it...

    https://drive.google.com/file/d/1o7zPy_pY-viN1C0qGuiimtpI8yTic1Rm/view?usp=sharing

    bug fixed 
    opened by eilhcir 1
  • Tweaking to behave a little more like an image gallery

    Tweaking to behave a little more like an image gallery

    Firstly, thanks for what looks to be an awesome package. It looks really well designed and implemented.

    This is probably more of a question than a feature request... my application is more of an "image gallery" than a "story viewer", but your implementation looks super flexible and has a lot of the features I think I am likely to need (eg. playing videos and showing cached images and swiping between them).

    I've done a very quick POC using AdvStory.player() and it was pretty simple to get me about80% of the way there.

    A few challenges I see in re-purposing advstory as a more general-purpose image gallery are:

    • Hiding the progress indicators. Not sure if there's a good way to hide them totally... setting valueColor and backgroundColor to transparent seems to work but not sure if there's a better way
    • Stopping the timed advancement to the next StoryContent. I saw another issue talking about this... and possibly using the interceptor to reset it. I wonder whether I'm just going to be constantly "fighting" advstory by doing this though.
    • I'd like my users to be able to double-tap/pinch to zoom. Again, I saw another issue where I could possibly add a gesture detector. Just wondering whether using an interceptor might be a better way to do it.

    I'm happy to fork and add my own custom logic, but I'd prefer to use the built-in features if I can. However, if you think that trying to use advstory in this way is a terrible idea, I'd also be keen to know that before I get too far down the investigation path.

    opened by edwardaux 0
  • Bug in rtl app

    Bug in rtl app

    Hello Thank you for this wonderful package In persian or rtl applications, this package has bugs, especially in the story and for skip content with gesture please help

    opened by mraslamiii 1
  • 2022-10-16 10:00:45.237726-0700 Runner[66039:3355191] [VERBOSE-2:dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(VideoError, Failed to load video: Cannot Open, null, null)

    2022-10-16 10:00:45.237726-0700 Runner[66039:3355191] [VERBOSE-2:dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(VideoError, Failed to load video: Cannot Open, null, null)

    Describe the bug Unable to play video story on ios. The following error is thrown on ios 16.0:

    2022-10-16 10:00:45.237726-0700 Runner[66039:3355191] [VERBOSE-2:dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(VideoError, Failed to load video: Cannot Open, null, null)
    

    To Reproduce Steps to reproduce the behavior: Run an app on iOS and run a story with a Firebase Storage video file link: Video Link

    Expected behavior It should run the firebase storage video file without any problem as it does on android

    Smartphone (please complete the following information):

    • Device: iPhone 14 Pro (Simulator)
    • OS: iOS 16.0
    opened by waqadArshad 1
  • AdvStory with Provider

    AdvStory with Provider

    This plugin is really awesome, but it only has a little problem when you try to make the stories dynamics with Provider plugin, because when you want to watch the changes of the stories array with provider the AdvStory plugin doesn't redraw and when you click on a story it throw the following error, because it didn't update the list in the widget. ══║ EXCEPTION CAUGHT BY WIDGETS LIBRARY β•žβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β• The following RangeError was thrown building: RangeError (index): Invalid value: Only valid value is 0: 7

    Is there any way to make this plugin work listening to a provider variable ?

    opened by pabloposada09 0
  • Decouple to: Adv/Infinite PageView

    Decouple to: Adv/Infinite PageView

    Is your feature request related to a problem? Please describe. Advstory is the best performing video playback package i've used. Preloading and caching second to none. Only issue is that you are kinda forced into the story format and into an opinionated way of navigating and gestures.

    Describe the solution you'd like A simple PageView solution that preloads & caches videos. Then the developers can do whatever they want from that point on. Video playback is a huge pain point in flutter and Advstory solves it but kinda forces you into a certain format.

    Describe alternatives you've considered Hacking advstory. Starting from the ground up.

    Additional context There's a huge community need and you would be a great help. Please check out this thread dedicated to it: https://www.reddit.com/r/FlutterDev/comments/xpwtdr/coming_together_to_work_on_common_issues_every/

    There's always a lot of questions on reddit about this...but no solid solution. https://www.reddit.com/r/FlutterDev/comments/xou6uu/building_a_videodriven_social_app_with_flutter/

    opened by jtkeyva 3
Releases(v0.2.1)
Owner
Ertuğrul Yakın
I'm a software engineer and mobile developer who loves to create unique things.
Ertuğrul Yakın
Story app UI in Flutter!

Stories App UI A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started i

Flutter Boy 9 Dec 6, 2022
Stories like in Instagram, each story can include multiple images and videos. Package supports video, titles, preliminary caching.

flutter_instagram_stories A Flutter package for displaying stories just like Whatsapp & Instagram. Built-in groups (multiple stories with one icon), c

Alex Awaik 125 Dec 9, 2022
camilo velandia 69 Dec 30, 2022
DostiPak - Dating app to make connection between people and start new love story to lovers

Dosti Pak Dating app to make connection between people and start new love story

ABDULKARIM ALBAIK 6 Oct 2, 2022
A widget based on Flutter's new Interactive Viewer that makes picture pinch zoom, and return to its initial size and position when released.

pinch_zoom A widget based on Flutter's new Interactive Viewer that makes picture pinch zoom, and return to its initial size and position when released

Teun Kortekaas 36 Dec 30, 2022
A beautiful xkcd viewer app written with Flutter

xkcdViewer xkcdViewer is a simple comic viewer for the infamous xkcd webcomic built with Flutter ?? and ScopedModel for state management. Features ??

Kosta Stoupas 61 Sep 26, 2022
Derpibooru viewer made in Flutter

Chryssibooru Derpibooru client made with Flutter Todo Themes? Wontdo Likes Favourites Comments Anything that requires the user to log in, since Derpib

null 13 Dec 21, 2022
Production-grade project developed during the Reso Coder Academy Flutter Bootcamp: It's a mobile Github repository viewer

RepoStar - GitHub Starred Repository Manager Production-grade project developed during the Reso Coder Academy Flutter Bootcamp. It's a mobile Github s

Kishan Dhankecha 4 Aug 18, 2022
Yet another booru viewer for Android

Yet another booru imageboards viewer for Android Download Preview Click Here Building You can build this app just like any other flutter app, for exam

Nauval Rizky 126 Dec 27, 2022
An Org Mode file viewer for iOS and Android

Orgro An Org Mode file viewer for iOS and Android See https://orgro.org for a demo video What is Org Mode? Imagine a plain-text markup language like M

Aaron Madlon-Kay 314 Jan 2, 2023
Iridium-reader-widget - Plug and play reader widget allowing to easily integrate an Iridium viewer inside any app

Plug and play reader widget allowing to easily integrate an Iridium viewer insid

Mantano 15 Dec 31, 2022
Sprite viewer / editor for the Game Boy Dev Kit

This is a graphic editor for GBDK inspired by GameBoyTileDesigner (GBTD) and GameBoyMapBuilder (GBMB). Online version game_boy_graphics_editor can run

DREVET Olivier 13 Dec 17, 2022
A flutter widget to indicate loading progress. Easy to use, easy to extend

?? ?? ?? A flutter widget to indicate loading progress. Easy to use, easy to extend

Manuel Duarte 2 May 30, 2022
Flutter mvvm archi - Flutter Advanced Course - Clean Architecture With MVVM

flutter_mvvm_archi A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you start

Namesh Kushantha 0 Jan 8, 2022
A Flutter package with an advanced dropdown Button which let you give different design on DropdownButton

Use decorated_dropdown button to add DropdownButton with decoration properties l

Hari Prasad Chaudhary 1 Dec 17, 2021
A list of Flutter beginners and advanced tutorials :wink:

Flutter Tutorials What is Flutter? Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. F

Raunak Hajela 85 Nov 23, 2022
An advanced image provider provides caching and retrying for flutter app

Flutter Advanced Network Image Provider An advanced image provider provides caching and retrying for flutter app. Now with zoomable widget and transit

Dark Knight 287 Sep 15, 2022
Calculator provides simple and advanced mathematical functions in a beautifully designed app.

Hi there, I'm Behruz Hurramov Getting Started $ git clone https://github.com/ariscybertech/aris_calculator.git $ flutter packages get Run the applicat

Behruz Hurramov 3 Jul 7, 2022
Calculator provides simple and advanced mathematical functions in a beautifully designed app.

Adv Calculator See LICENSE A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get y

RAHUL SHARMA 3 Feb 21, 2022