FLUTTER ECOSYSTEM

furkansarihan/story_viewer

Flutter에서 스토리를 표시하세요!

story_viewer 프로젝트 이미지
Stars
11
Forks
5
최근 푸시(UTC)
2025. 9. 11.
프로젝트 상태
활성
Furkan Sarıhan GitHub avatar
GITHUB User

Furkan Sarıhan ↗

Istanbul
언어DartRubySwiftKotlinObjective-C

이 저장소가 배포한 패키지

사용 중인 의존성

의존성 목록 3 개
  • flutter{"sdk":"flutter"}
  • extended_image^1.6.0
  • flutter_test개발 의존성{"sdk":"flutter"}

원본 README

아래는 영문 원문 스냅샷입니다. 최신 내용은 GitHub에서 확인하세요.

README 펼치기 / 접기

story_viewer

This package provides common story view experience for any Flutter app.

https://firebasestorage.googleapis.com/v0/b/app-monotony.appspot.com/o/assets%2Fezgif.com-resize.gif?alt=media&token=30a0bbef-fd4d-4907-9813-3a95e97e1651

Features

  • Complate known gestures;
    • next story, previous story
    • hide UI layer on long press
  • Custom texts, icons, colors, paddings etc.
  • Easy to implement data model for story and story owner user.
  • Slide out page on vertical swipe down
  • Reply a story just like Instagram with text or emojis on vertical swipe up
  • **Display ratio for dynamic view inside any Widget.
  • Listener support with callbacks for story with StoryViewerController
    • played, paused, story index changed etc.
  • Customized additional layers support for under or on the media layer.
  • Blurred layer for possible inappropriate media

** Default and fully tested ratio is 9:16 with full screen.

Usage

This is common usage of story_viewer

StoryViewer(
    padding: EdgeInsets.all(8),
    backgroundColor: Colors.white,
    ratio: StoryRatio.r16_9,
    stories: [
        StoryItemModel(imageProvider: NetworkImage(imageURL)),
        StoryItemModel(imageProvider: MemoryImage(memoryImage)),
        StoryItemModel(imageProvider: AssetImage(assetName)),
    ],
    userModel: UserModel(
        username: username,
        profilePicture: NetworkImage(profileURL),
    ),
);

Custom controller example with event listeners

StoryViewerController controller = StoryViewerController();
controller.addListener(
    onPlayed: () {
        print("'onPlayed' callback outside of story_viewer");
    },
    onPaused: () {
        print("'onPaused' callback outside of story_viewer");
    },
);
return StoryViewer(
    viewerController: controller,
    .
    .

Check out example/lib/detailed_example.dart for more!

Dependencies

Package Name Type Description
extended_image Core Caching images, slide out page