Skip to content

Instagram type story view with flutter and bloc patterns

License

Notifications You must be signed in to change notification settings

erdnj/InstaStoryViewExample

Repository files navigation

Pretty Instagram Story Example

Changelog

  • Cubits and views renamed.
  • Before cubit naming is kind a complicated and difficult to identify them, now top cubit is StoryHeadCubit and each story's cubit is StoryBucketCubit.
  • Logic parts simplified.
  • Gesture logic moved to GestureBehaviorer widget and its logic shortened as possible with keeping intended physic behaviours.
  • Cubic animation moved to CubicAnimationWidget.
  • PageChangeNotifier removed, instead PageControllers itself has used as notifier.
  • Stateful widgets removed except main page and storyViewItem pages due to ticker dependencies.
  • Variable naming refreshed.
  • There was models for story datas which are StoryBucket and StoryItem. As new, User model added to StoryBucket. As design choice User model kept under StoryBucket model.
  • Error logs due to video controller's wrong disposal has resolved.
  • Fast transition video non-starting cases has resolved. Simple test video has uploaded at bottom.

Discussion

  • On android(my physical device(jason-crDroid7.31-android11)) has still logging E/Surface : freeAllBuffers: 6 buffers were freed while being dequeued! from video_player package's android backend player ExoPlayer. Through my tests, it log that line whenever I dispose controller even it is unused. I have assumed it as non-important log as it always doing it on my device.
  • Above logs release point is Surface.cpp on android.
  • Binding animationController to videoController is help to get rid of SingleTickerProviderStateMixin dependency on Stateful Widget. In my design I only kept current video controller, and one animation controller. Also I want to keep showing images with AssetImage instead of video player. So I stick with Stateful Widget.

Features

  • Cubic transition between story groups
  • Auto video timing animation with time bar
  • Story group swiping with sliding screen
  • Catch where you left on previosly watched story groups.
  • Watched stories marked but not used as functionality, it could be use for further developments.
  • After quit the story view, auto sort the story groups.
  • Unfinished story groups have green border.
  • Finished ones have grey and at end.
  • Pause/Continue with hold and release touches.

Unproblematic Downside Has Resolved

  • When you pretend to swipe from the current story to another story without lifting the finger and return to the current story, the current story stays in a paused state. If you press and pull the finger back, the story continues. Or you can click right or left to go back and forth. It is a situation that I do not want to happen, but it does not cause any problems to the user.
  • Demo videos are old ones.

Used Packages


Installation

  1. Download the master branch.
  2. In directory which include pubspec.yaml
  3. Execute flutter pub get
  4. After all dependencies installed succesfully execute flutter run lib/main.dart

Test Video

speed_test.mp4

Demo(Old)

  • Demo data collected from Pexels and used as Asset Media.

demo.1.mov

demo.2.mov

About

Instagram type story view with flutter and bloc patterns

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published