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

Last update: Jun 21, 2022

"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:

GitHub

https://github.com/ertgrulll/advstory
Comments
  • 1. 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!

    Reviewed by jtkeyva at 2022-05-31 22:42
  • 2. 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.

    Reviewed by jtkeyva at 2022-06-02 19:07
  • 3. 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.

    Reviewed by jtkeyva at 2022-06-17 04:52
  • 4. [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

    Reviewed by hmbenhaim at 2022-05-24 16:12
  • 5. 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.

    Reviewed by jtkeyva at 2022-06-10 02:45
  • 6. Custom Gestures

    Is your feature request related to a problem? Please describe. Using a predefined set of gestures is limiting.

    Describe the solution you'd like Put gesture options inside AdvStory() so you can do whatever you want with any gesture. Ex: Swiping up opens a page or double tap runs a function etc.

    Describe alternatives you've considered Disable AdvStory gestures alltogether and wrap in a gestureDetector()

    Additional context Not quite sure how to call your functions inside a custom wrapped GestureDetector(). Perhaps some documentation?

    Awesome job on performance! It runs great!

    Reviewed by jtkeyva at 2022-05-31 22:53
  • 7. 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!

    Reviewed by jtkeyva at 2022-05-31 22:45

Related

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

Jun 7, 2022
Stories like in Instagram, each story can include multiple images and videos. Package supports video, titles, preliminary caching.
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

Jun 15, 2022
DostiPak - Dating app to make connection between people and start new love story to lovers
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

May 24, 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.
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

May 11, 2022
A beautiful xkcd viewer app written with Flutter
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 ??

Apr 13, 2022
Derpibooru viewer made in Flutter
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

May 8, 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

May 5, 2022
Yet another booru viewer for Android
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

Jun 17, 2022
An Org Mode file viewer for iOS and Android
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

Jun 27, 2022
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

Jan 21, 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

Jun 23, 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

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

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

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

May 24, 2022
An advanced image provider provides caching and retrying for flutter app
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

May 2, 2022
Calculator provides simple and advanced mathematical functions in a beautifully designed app.
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

Mar 13, 2022
Calculator provides simple and advanced mathematical functions in a beautifully designed app.
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

Feb 21, 2022