reels_viewer 2.0.0 copy "reels_viewer: ^2.0.0" to clipboard
reels_viewer: ^2.0.0 copied to clipboard

This is a package created in the style of the instagram reels viewer, with which you can pass video url and get reels view.

reels_viewer #

This is a package created in the style of the instagram reels viewer, with which you can pass video url and get reels view.

Usage #

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  reels_viewer: ^1.0.0
copied to clipboard

In your library add the following import:

import 'package:reels_viewer/reels_viewer.dart';
copied to clipboard

For help getting started with Flutter, view the online documentation.

Example #

Initializing a List

List<ReelModel> reelsList = [
    ReelModel(
        'https://assets.mixkit.co/videos/preview/mixkit-tree-with-yellow-flowers-1173-large.mp4',
        'Darshan Patil',
        likeCount: 2000,
        isLiked: true,
        musicName: 'In the name of Love',
        reelDescription: "Life is better when you're laughing.",
        profileUrl:
        'https://opt.toiimg.com/recuperator/img/toi/m-69257289/69257289.jpg',
        commentList: [
            ReelCommentModel(
                comment: 'Nice...',
                userProfilePic:
                'https://opt.toiimg.com/recuperator/img/toi/m-69257289/69257289.jpg',
                userName: 'Darshan',
                commentTime: DateTime.now(),
            ),
            ReelCommentModel(
                comment: 'Superr...',
                userProfilePic:
                'https://opt.toiimg.com/recuperator/img/toi/m-69257289/69257289.jpg',
                userName: 'Darshan',
                commentTime: DateTime.now(),
            ),
            ReelCommentModel(
                comment: 'Great...',
                userProfilePic:
                'https://opt.toiimg.com/recuperator/img/toi/m-69257289/69257289.jpg',
                userName: 'Darshan',
                commentTime: DateTime.now(),
            ),
        ]
    ),
    ReelModel(
        'https://assets.mixkit.co/videos/preview/mixkit-father-and-his-little-daughter-eating-marshmallows-in-nature-39765-large.mp4',
        'Rahul',
        musicName: 'In the name of Love',
        reelDescription: "Life is better when you're laughing.",
        profileUrl:
        'https://opt.toiimg.com/recuperator/img/toi/m-69257289/69257289.jpg',
    ),
    ReelModel(
        'https://assets.mixkit.co/videos/preview/mixkit-mother-with-her-little-daughter-eating-a-marshmallow-in-nature-39764-large.mp4',
        'Rahul',
    ),
];

copied to clipboard

Simple implementation

ReelsViewer(
    reelsList: reelsList,
    appbarTitle: 'Instagram Reels',
    onShare: (url) {
        log('Shared reel url ==> $url');
    },
    onLike: (url) {
        log('Liked reel url ==> $url');
    },
    onFollow: () {
        log('======> Clicked on follow <======');
    },
    onComment: (comment) {
        log('Comment on reel ==> $comment');
    },
    onClickMoreBtn: () {
        log('======> Clicked on more option <======');
    },
    onClickBackArrow: () {
        log('======> Clicked on back arrow <======');
    },
    onIndexChanged: (index){
        log('======> Current Index ======> $index <========');
    },
    showProgressIndicator: true,
    showVerifiedTick: false,
    showAppbar: false,
);
copied to clipboard

Options #

Name Description Default Return
reelsList For assign reels list [] -
appbarTitle For assign appbar title Reels View -
showProgressIndicator Hide/Show progress Indicator true -
showVerifiedTick Hide/Show profile verified tick true -
showAppbar Hide/Show appbar true -
onShare Trigger when click on Share btn - reels url
onLike Trigger when click on Like btn - reels url
onFollow Trigger when click on Follow btn - -
onComment Trigger when click on Comment Bnt - string
onClickMoreBtn Trigger when click on Three dot btn - -
onClickBackArrow Trigger when click on Back Arrow - -
onIndexChanged Trigger when Reel change - current reel index

Demo APK #

Click here for download demo app.

ScreenShots #

initial view

Screenshot 1

Screenshot 2

Screenshot 3

Demo video #

Click here for watch demo video.

29
likes
150
points
103
downloads

Publisher

verified publisherpatildarshan.in

Weekly Downloads

2024.10.02 - 2025.04.16

This is a package created in the style of the instagram reels viewer, with which you can pass video url and get reels view.

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

cached_network_image, card_swiper, chewie, flutter, intl, video_player

More

Packages that depend on reels_viewer