Giter Site home page Giter Site logo

story_view's Introduction

story_view Pub

Story view for apps with stories.

story_view

๐ŸŸ Watch video demo here: story_view demo

๐Ÿ‘จโ€๐Ÿš€ Demo project here: storyexample

This a Flutter widget to display stories just like Whatsapp and Instagram. Can also be used inline/inside ListView or Column just like Google News app. Comes with gestures to pause, forward and go to previous page.

Features

๐Ÿ•น Still image, GIF and video support (with caching enabled)

๐Ÿ“ Gesture for pause, rewind and forward

โšœ๏ธ Caption for each story item

๐ŸŽˆ Animated progress indicator for each story item

๐Ÿ“ฑ Fullscreen or inline

And useful callback to perform meta functionalities including vertical swipe gestures.

Installation

To use this plugin, add story_view as a dependency in your pubspec.yaml file.

Usage

Import the package into your code

import "package:story_view/story_view.dart";

Look inside examples/example.dart on how to use this library. You can copy and paste the code into your main.dart and run to have a quick look.

Basics

Use StoryView to add stories to screen or view heirarchy. StoryView requires a list of StoryItem, each of which describes the view to be displayed on each story page, duration and so forth. This gives you the freedom to customize each page of the story.

There are shorthands provided to create common pages.

StoryItem.text is a shorthand to create a story page that displays only text.

StoryItem.pageImage creates a story item to display images with a caption.

StoryItem.inlineImage creates a story item that is intended to be displayed in a linear view hierarchy like List or Column

๐Ÿญ Both .inlineImage and pageImage support animated GIFs.

StoryItem.pageVideo creates a page story item with video media. Just provide your video url and get going.

Story controller, loaders and GIF support

While images load, it'll be a better experience to pause the stories until it's done. To achieve this effect, create a global instance of StoryController and use the shorthand StoryItem.pageImage or StoryItem.inlineImage while passing the same controller instance to it.

...
final controller = StoryController();

@override
Widget build(context) {
  List<StoryItem> storyItems = [
    StoryItem.text(...),
    StoryItem.pageImage(...),
    StoryItem.pageImage(...),
    StoryItem.pageVideo(
      ...,
      controller: controller,
    )
  ]; // your list of stories

  return StoryView(
    storyItems,
    controller: controller, // pass controller here too
    repeat: true, // should the stories be slid forever
    onStoryShow: (s) {notifyServer(s)},
    onComplete: () {},
    onVerticalSwipeComplete: (direction) {
      if (direction == Direction.down) {
        Navigator.pop(context);
      }
    } // To disable vertical swipe gestures, ignore this parameter.
      // Preferrably for inline story view.
  )
}

๐Ÿญ Now, tell your users some stories.

Docs

Find docs from here: pub.dev/story_view

story_view's People

Contributors

acoutts avatar akora-ingdkb avatar ashish-jajoria avatar avvari-da avatar blackmann avatar dmiedev avatar geekpius avatar harshapulikollu avatar lstonussi avatar nickykln avatar tagorenathv avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

story_view's Issues

Start video from beginning on rewind

It would be nice if the current video will be resetted to the beginning if the user taps on the left side of the story. Currently only the progressbar is resetted but the video keeps on playing.

Switching between videos

Question - when switching between video stories, are you disposing the previous video controller and initializing a new one every time? Or are you initializing 1 video controller and switching between video sources in the same video controller?

Feature request

Can you provide a way to get the index of the current story item that is being viewed? so that an API request can be made or some action could be done with that item index

how change color of StoryProgressIndicator

Thank you for the great package!
Sorry for asking here, I didn't find another resources to ask.
Can you recommend the best way to change StoryProgressIndicator.
Thank you.

Animated text feature ?

Hi friend,

I need animated text feature on text based StoryItem. How to implement it ? Do you have any plan to do such feature ?

StoryItem.pageVideo always show loading

Thank you for this great plugin.

I am unable to show video using StoryItem.pageVideo. It always shows a loading indicator.
Images, Text and Gif are working well

StoryView(
              [
                ......
                ......
                StoryItem.pageVideo(
                  "https://www.youtube.com/watch?v=IGQBtbKSVhY",
                  controller: storyController,
                  duration: Duration(seconds: 200),
                ),
              ],
              onStoryShow: (s) {
                // print("Showing a story");
              },
              onComplete: () {
                // print("Completed a cycle");
                Navigator.pop(context);
              },
              progressPosition: ProgressPosition.top,
              repeat: false,
              controller: storyController,
            ),

This error occurs during play when it is a video

 StoryItem.text(
            "I guess you'd love to see more of our food. That's great.",
            Colors.blue,
          ),
          StoryItem.pageVideo('https://kellvem.pt/apps/videos/wp-content/uploads/2019/11/1FA4A.mp4'),
I/ExoPlayerImpl( 7820): Init e462241 [ExoPlayerLib/2.9.6] [pine, Redmi 7A, Xiaomi, 28]
I/OMXClient( 7820): IOmx service obtained
D/SurfaceUtils( 7820): connecting to surface 0x935e9808, reason connectToSurface
I/MediaCodec( 7820): [OMX.qcom.video.decoder.avc] setting surface generation to 8007685
D/SurfaceUtils( 7820): disconnecting from surface 0x935e9808, reason connectToSurface(reconnect)
D/SurfaceUtils( 7820): connecting to surface 0x935e9808, reason connectToSurface(reconnect)
I/ExtendedACodec( 7820): setupVideoDecoder()
I/ExtendedACodec( 7820): Decoder will be in frame by frame mode
D/SurfaceUtils( 7820): set up nativeWindow 0x935e9808 for 640x800, color 0x7fa30c04, rotation 0, usage 0x20002900
W/MapperHal( 7820): buffer descriptor with invalid usage bits 0x2000
I/chatty  ( 7820): uid=10215(br.com.videosengracados.videowhatsappdownload.video_engracados) CodecLooper identical 2 lines
W/MapperHal( 7820): buffer descriptor with invalid usage bits 0x2000
I/OMXClient( 7820): IOmx service obtained
I/ACodec  ( 7820): codec does not support config priority (err -2147483648)
I/ACodec  ( 7820): codec does not support config priority (err -2147483648)
W/ExtendedACodec( 7820): Failed to get extension for extradata parameter
D/SurfaceUtils( 7820): set up nativeWindow 0x935e9808 for 640x800, color 0x7fa30c04, rotation 0, usage 0x20002900
W/MapperHal( 7820): buffer descriptor with invalid usage bits 0x2000
W/MapperHal( 7820): buffer descriptor with invalid usage bits 0x2000
W/MapperHal( 7820): buffer descriptor with invalid usage bits 0x2000
E/flutter ( 7820): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: NoSuchMethodError: The method 'play' was called on null.
E/flutter ( 7820): Receiver: null
E/flutter ( 7820): Tried calling: play()
E/flutter ( 7820): #0      Object.noSuchMethod  (dart:core-patch/object_patch.dart:53:5)
E/flutter ( 7820): #1      StoryVideoState.initState.<anonymous closure>.<anonymous closure> 
package:story_view/story_video.dart:83
E/flutter ( 7820): #2      _rootRunUnary  (dart:async/zone.dart:1134:38)
E/flutter ( 7820): #5      Future._propagateToListeners.handleValueCallback  (dart:async/future_impl.dart:680:45)
E/flutter ( 7820): #6      Future._propagateToListeners  (dart:async/future_impl.dart:709:32)
E/flutter ( 7820): #7      Future._completeWithValue  (dart:async/future_impl.dart:524:5)
E/flutter ( 7820): #8      Future._asyncComplete.<anonymous closure>  (dart:async/future_impl.dart:554:7)
E/flutter ( 7820): #9      _rootRun  (dart:async/zone.dart:1126:13)
E/flutter ( 7820): #10     _CustomZone.run  (dart:async/zone.dart:1023:19)
E/flutter ( 7820): #11     _CustomZone.runGuarded  (dart:async/zone.dart:925:7)
E/flutter ( 7820): #12     _CustomZone.bindCallbackGuarded.<anonymous closure>  (dart:async/zone.dart:965:23)
E/flutter ( 7820): #13     _microtaskLoop  (dart:async/schedule_microtask.dart:43:21)
E/flutter ( 7820): #14     _startMicrotaskLoop  (dart:async/schedule_microtask.dart:52:5)
E/flutter ( 7820):
I/flutter ( 7820): Showing a story

This error occurs during play when it is a video storie, the rest of the storie works normally.

Slide down gesture pauses the story

Hi,

I am using your package for both images and videos. I am facing an issue when i swipe up or down on the screen (basically any action apart from tap), the story pauses and never resumes. Is there anyway to not register the swipe as a gesture/action? I.e. the story continues to play even if there is any slide/swipe gesture on the screen?

Thank you !

Unexpected controller behavior

I'm trying to control stories flow through buttons like this:

Widget build(BuildContext context) {
    List<StoryItem> storyItems = [
      StoryItem.text("hello moto", Colors.redAccent),
      StoryItem.pageImage(AssetImage("assets/page2.jpg"),
          imageFit: BoxFit.fitHeight),
    ]; // your list of stories
    
    StoryView story = StoryView(storyItems,
        controller: _controller, // pass controller here too
        repeat: true, // should the stories be slid forever
        onStoryShow: (s) {});

    return new Scaffold(
        body: Stack(children: [
      story,
      Container(
          alignment: Alignment.bottomCenter,
          child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
            IconButton(
                icon: _playing ? Icon(Icons.pause) : Icon(Icons.play_arrow),
                color: Colors.white70,
                iconSize: 90,
                onPressed: () {
                  setState(() {
                    _playing ? _controller.pause() : _controller.play();
                    _playing = !_playing;
                  });
                })
          ]))
    ]));
  }

And this really works, but the widget becomes broken

Behavior:

  • At the launch, widget automatically starts fragments (normal)
  • After button pressed, story pauses (normal)
  • After button released, story unpauses (normal)
    And there magic begins:
  • After pause on none-first story it drop flow to first story and pauses
  • After unpause it correctly plays until the end of the first story
  • At end, it drops to the start and plays automatically.
  • After second pause it drops story to last paused point (first story)

Summary

  • Using pause through controller i can't pause stories after first
  • Resume after pause drops sequence of stories to start

I took a look to the source, gestures controller uses same methods with listener on playbackState from controller, but i don't understand why hold gesture works fine when button doesn't

Audio Support

Hi, really nice library you guys made. Kuddos

Do you think about adding an audio support? or a universal widget that could take the type of content that we send?

Story pauses on tapping last item

If I have a number of stories in a StoryView and I tap on one of them, it takes me to the next StoryItem.
But it I tap on the last story item, it doesn't close the story view but rather pauses the story.

Story Widget Refreshs

`import 'package:flutter/material.dart';
import 'package:flutter_icons/flutter_icons.dart';
import 'package:story_view/story_view.dart';

class StoriesView extends StatefulWidget {
StoriesView({Key key}) : super(key: key);

_StoriesViewState createState() => _StoriesViewState();
}

class _StoriesViewState extends State {
final storyController = StoryController();

bool paused = false;

onClick() {
storyController.pause();
}

FocusNode myFocusNode;

@OverRide
void initState() {
super.initState();
myFocusNode = FocusNode();
}

@OverRide
void dispose() {
// Clean up the focus node when the Form is disposed.
myFocusNode.dispose();
super.dispose();
}

@OverRide
Widget build(BuildContext context) {
List storyItems = [
StoryItem.text(
"Hello world!\nHave a look at some great Ghanaian delicacies. I'm sorry if your mouth waters. \n\nTap!",
Colors.orange,
roundedTop: true,
),
StoryItem.inlineImage(
AssetImage('assets/images/goat1.jpg'),
caption: Text(
"Banku & Tilapia. The food to keep you charged whole day.\n#1 Local food.",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
backgroundColor: Colors.black54,
fontSize: 17,
),
),
),
StoryItem.inlineImage(
AssetImage('assets/images/goat2.jpg'),
caption: Text(
"Banku & Tilapia. The food to keep you charged whole day.\n#1 Local food.",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
backgroundColor: Colors.black54,
fontSize: 17,
),
),
),
StoryItem.inlineImage(
AssetImage('assets/images/goat3.jpg'),
caption: Text(
"Banku & Tilapia. The food to keep you charged whole day.\n#1 Local food.",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
backgroundColor: Colors.black54,
fontSize: 17,
),
),
),
StoryItem.inlineImage(
AssetImage('assets/images/goat0.jpg'),
caption: Text(
"Omotuo & Nkatekwan; You will love this meal if taken as supper.",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
backgroundColor: Colors.black54,
fontSize: 17,
),
),
),
];

return Scaffold(
  resizeToAvoidBottomPadding: true,
  backgroundColor: Color(0xFF000000),
  body: SingleChildScrollView(
    physics: AlwaysScrollableScrollPhysics(),
    child: Stack(
      children: <Widget>[
        StoryView(
          storyItems,
          inline: true,
          controller: storyController, // pass controller here too
          repeat: false, // should the stories be slid forever
          onStoryShow: (s) {
            FocusScope.of(context).requestFocus(new FocusNode());
            print(s);
            storyController.play();
          },

          onComplete: () {},
        ),
        Padding(
          padding: EdgeInsets.symmetric(vertical: 50.0),
          child: Row(
            children: <Widget>[
              IconButton(
                icon: Icon(AntDesign.arrowleft),
                iconSize: 24.0,
                color: Colors.white,
                onPressed: () => Navigator.pop(context),
              ),
              Expanded(
                child: ListTile(
                  dense: true,
                  leading: Container(
                    width: 40.0,
                    height: 40.0,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black45,
                          offset: Offset(0, 2),
                          blurRadius: 6.0,
                        ),
                      ],
                    ),
                    child: CircleAvatar(
                      child: ClipOval(
                        child: Image(
                          height: 40.0,
                          width: 40.0,
                          image: AssetImage('assets/images/user4.png'),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ),
                  title: Text(
                    'Angelina Kidjo',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 14,
                      color: Colors.white,
                    ),
                  ),
                  subtitle: Text(
                    '13 mins ago',
                    style: TextStyle(
                      fontSize: 11,
                      color: Colors.white38,
                    ),
                  ),
                ),
              ),
              paused == true
                  ? IconButton(
                      icon: Icon(Icons.play_arrow),
                      iconSize: 24.0,
                      color: Colors.white,
                      onPressed: () {
                        storyController.play();
                      },
                    )
                  : IconButton(
                      icon: Icon(Icons.pause),
                      iconSize: 24.0,
                      color: Colors.white,
                      onPressed: () {
                        storyController.pause();
                      }),
            ],
          ),
        ),
        Positioned(
          bottom: 12,
          left: 0,
          height: 50,
          width: MediaQuery.of(context).size.width,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.transparent,
            ),
            child: Row(
              children: <Widget>[
                SizedBox(
                  width: 8,
                ),
                Expanded(
                  child: Container(
                    height: 48,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(50),
                    ),
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: .0),
                      child: TextField(
                        focusNode: myFocusNode,
                        onTap: () {
                          onClick();
                        },
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          contentPadding: EdgeInsets.symmetric(
                            horizontal: 16.0,
                            vertical: 18,
                          ),
                          hintText: 'Send a message',
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  width: 12,
                ),
                Container(
                  height: 40,
                  width: 40,
                  margin: EdgeInsets.only(right: 8),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(50),
                    color: Colors.white,
                  ),
                  child: IconButton(
                    icon: Icon(
                      FontAwesome5Solid.paper_plane,
                      size: 20.0,
                      color: Colors.blue,
                    ),
                    onPressed: () {
                      onClick();
                    },
                  ),
                )
              ],
            ),
          ),
        ),
      ],
    ),
  ),
);

}
}
`

I created this story view page and added a text field to the page but every time I focus on the text field the story widget goes back to the first one. I even and the controller of pausing once the text field is tapped but it pauses the goes to the first story. How do I solve my problem?

Images not loading on Flutter web

Plugin seems to work on web until version 0.11.5, but on later versions, it gets stuck trying to load an image, shows loading indicator forever. There's no error on console, it fails silently. Flutter version 1.19.0, fails on other versions as well.

Video loading state

Hi,
Your package is great and have nice features but I there is no way to check whether a video is fully loaded or not!
and also needs a function that gives the duration of video to set duration variable dynamically.
It is needed to make sure that a video is fully displayed and duration was not passed by a loading state!
thanks.

Asynchronous call on Story Item

I was using your library with firebase, trying to show some story items but i got an error saying that
The getter show was called on null.

image

_getUserStory() async {
    await Firestore.instance
        .collection('contents')
        .where('isStory', isEqualTo: true)
        .where('user', isEqualTo: widget.userId)
        .getDocuments()
        .then((snap) {
      setState(() {
        _contents = snap.documents
            .map((storyContent) {
          if (storyContent['type'] == "Image") {
            StoryItem.pageImage(
              NetworkImage("https://image.ibb.co/cU4WGx/Omotuo-Groundnut-Soup-braperucci-com-1.jpg"),
            caption:'hola',
            );
          }
        }).toList();
      });
    });
  }


StoryView(
                      _contents,
                      onStoryShow: (s) {
                        print("Showing a story");
                      },
                      onComplete: () {
                        print("Completed a cycle");
                      },
                      progressPosition: ProgressPosition.top,
                      repeat: false,
                      controller: storyController,
                    )

My Flutter doctor output is like that:

[โˆš] Flutter (Channel stable, v1.9.1+hotfix.2, on Microsoft Windows [Version 10.0.18362.356], locale en-US)

[โˆš] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[โˆš] Android Studio (version 3.3)
[!] IntelliJ IDEA Ultimate Edition (version 2018.3)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[โˆš] VS Code (version 1.38.1)
[โˆš] Connected device (1 available)

! Doctor found issues in 1 category.

Update rx_dart version

RxDart introduced extension methods with 0.23.1. But story_view depends on 0.22.2. Even with the caret sign (^) dependency resolution is failing because the major version of rx_dart package is still zero and according to semantic versioning this means the package is in initial development phase so even minor version number change is treated as a possible breaking change.

Allow setting initial index

Hey,

Thanks for such a great library but i have a use case where i would need to set starting index of storyview. Actually i will have a bunch of stories like instagram and i want that user can click on stories from any user and can go left to right to another user stories also.

FEATURE : support HLS url for direct streaming

Hi,
Your plugin is awesome ! thx for it !
I'd like to use it to display HLS videos.
It would be great to integrate it.

I prepare you a Pull Request with the code I updated to manage this feature

Customize text of StoryItem.text

Please expose the textStyle of the text supplied to the StoryItem.text to make it customizable.
We should at least have access to the fontStyle property in addition to the fontSize available.

Add slide gesture

Hi, your plugin is great! is it possible to add a simply drag/slide gesture to switch between images like in instagram?

Get the duration from the actual video duration

This problem is only regarding video stories. There should be a way to specify the video story duration based on the duration of the actual video. For that, I think the videoplayercontroller.value.duration should be used as the default duration for video stories if any duration is not passed explicitly.

What if I have Lists of Images?

I can't just manually copy and paste all the images from my list.

Is there a way on what to put inside StoryView([ "HERE "]?

Enable and disable gestures for inline stories

The gestures feature is very cool especially for page stories.
It will be nice to be able to enable and disable gestures for inline stories to prevent interference when used in a listview.

I hacked it by wrapping it in AbsorbPointer to prevent gestures but it takes away the tap functionality too.

Gifs' speed increased when trying to play story again

Steps to reproduce

  1. Open the stories with .gif item.
  2. Swipe to gif story.
  3. Press back to previous story.
  4. Open gif story again => Story play speed is probably x2 now.
  5. You can do it again and gif speed will be increased again.

PS: Also noticed, that gifs and images aren't being loaded at flutter dev channel. Spinner is being showed forever. Switched to stable channel worked for me.

By the way your library is perfect, thank you!

Fade in/out between story changes

Right now it seems the stories change instantly.
We should add a parameter for fade duration which defaults to 100ms and animate fade in/out while changing to a new story.
it would look much better to the eye.
take care bro

Feature Proposal for v1

Thanks for making this library and sharing! I need a stories feature in my app and this library is a great starting point. It would be great if I could contribute any improvements to this library so I'd like your thoughts on the feature proposals below.

  1. Component separation and abstraction.
    A stories component is essentially the combination of a ViewPager, Progress Bar, Decor Overlays, and Content. Creating well defined separation between those components would make improvements easier and increase customization ability. For example, I'd suggest making the Progress Bar a Decor element with a positioning interface. This would allow greater control of showing the Progress Bar and interactions with other Decor elements such as buttons/toolbars.
  2. Extensible StoryItem.
    Allow Story Item to be extended so users can create custom StoryItems.
  3. Lazy Loading Widgets.
    More efficiently load widgets.
  4. Expose more controller methods.
    Play, pause, previous, next, skip to, etc.
  5. Compose Stories from a data model.
    Stories should be able to be displayed via data from a backend.

I look forward to your thoughts!

How to change the time of StoryItem?

Hello.
How can I change the time which is used as duration of every StoryItem?
I want to show user StoryItem with much more information than single text.
Thanks, Matt

Video support

This library is fantastic, but it should support videos. Do you intend to do this in the future?

setState issue

When setState() is called while a story is playing it moves back to the beginning of the list

Is there an option to stop autoplay?

Hey there!
I am trying not to autoplay the staus on load. Is there a way we can do it? Or we need to add a new prop to source code to make it work?

Expose the index of current story being shown

In the onStoryShow method of the StoryView expose the index along side the StoryItem.
So the function signature will be something like:
void Function(StoryItem, index) onStoryShow

I found this very necessary in a project I'm working on. I'm using a model for my stories and them maps each item in the list of models as a story item for StoryView. Obviously only the parameter which is a string will be useful in this case.
But then I'll need to know which StoryItem is currently being shown in order to display something else to the user.

Quick Reactions (Emojis)

Great plugin!

It would be great if you could add Quick Reactions (Emojis) to the stories view like instagram with the same gesture swipe up. That would be great to get feedback from users if upload was nice!

Add our own designed emoji-icons would be awesome!

Thanks
IMG_3451

First item is getting played twice in iOS simulator. In Android it works fine.

I have tested this iPhone 11 Pro Max and iPhone 8 Plus simulators. Placing my code below.

  @override
  Widget build(BuildContext context) {
    List<StoryItem> storyItems = _imageUrls.map((imageUrl) {
      return StoryItem.pageImage(CachedNetworkImageProvider(imageUrl));
    }).toList();

    return Scaffold(
      body: Stack(
        children: <Widget>[
          StoryView(
            storyItems,
            controller: controller, // pass controller here too
            repeat: true, // should the stories be slid forever
            onStoryShow: (s) {
              print("onStoryShow->${s.view}");
            },
          ),
          SafeArea(
            child: Column(
              children: <Widget>[
                SizedBox(height: 16,),
                Row(
                  children: <Widget>[
                    IconButton(
                      icon: Icon(Icons.close,color: Colors.white,),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    )
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }

swipe down gesture to dismiss storyview

Just like Instagram & snapchat stories, we need to be able to swipe the screen down and be able to dismiss the page with possibly a fade + scale + translate transition.

Help

Maybe I want it to load when switching between videos?

     StoryItem.pageVideo(
            'url' +
                '${videoList[0]}',
            controller: controller,
            duration: Duration(seconds: 10),
            //caption: 'Desc',
          ),

//Media failed to load --check -- loading ???

Video Loading Time

Hi there, it is not so much of an issue, but i'm just asking if there's a way to make the controller of the story to wait for the video to load, because i'm using firebase storage and sometimes it takes a while to load the video in the story, and because of this, by the time the user sees the video, the controller of the story is already done and it has already change to another story item. I just want to know if there's a way i can tweak it so it wait for the video to be ready.

Video Duration Problem

Hi,

I am using this awesome plugin but I have got an issue which is that I cant set the duration of the story item according to the duration of the video even though I am using the same controller instance in both of the story view & story item.

I hope you find a solution to this.

Thanks

story_view depends on flutter_cache_manager ^1.2.2 (old version)

I tried to implement the the newest version of flutter_cache_manager in my app, however I got the error message that

"story_view depends on flutter_cache_manager ^1.2.2 while [project] depends on flutter_cache_manager 2.0.0"

Will the dependencies be updated for the story_view package? For now I am gonna use the older version of flutter_cache_manager.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.