insta_reels_viewer 0.0.8

This flutter package designed to replicate the Instagram Reels viewer experience within your application.

insta_reels_viewer

This flutter package designed to replicate the Instagram Reels viewer experience within your application. It provides a seamless and intuitive way to display and view videos in a manner similar to the Instagram Reels interface.

Usage

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

dependencies:
  ...
  insta_reels_viewer: ^0.0.8

In your library add the following import:

import 'package:insta_reels_viewer/insta_reels_viewer.dart';

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

Example

Initializing a List

List<ReelsModel> reelsList = [
  ReelsModel(
      url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
      likeCount: 578,
      commentCount: 200,
      sendCount: 70,
      isLiked: true,
      musicName: "my music name 1",
      musicImageUrl: "",
      description: "this is demo descriptioin, adkf alkd adkjhfladhlfkja ajkldhfkahfkj  alkjfhaldjfh  akjdhfa jhkfhadhjfkjhfkjdhfd dfd",
      createdAt: DateTime.now().toString(),
      updatedAt: DateTime.now().toString(),
      user: User(
          userName: "Raman Thakur",
          profileUrl: "https://img.freepik.com/free-photo/young-indian-man-dressed-trendy-outfit-monitoring-information-from-social-networks_231208-2766.jpg",
          createdAt: DateTime.now().toString(),
          updatedAt: DateTime.now().toString(),
          isFollow: true
      ),
      reelComments: [
        ReelComments(
            cmment: "akkdfhkaljhflkajdf",
            createdAt: DateTime.now().toString(),
            updatedAt: DateTime.now().toString(),
            user: User(
              userName: "Vanit Dev",
              profileUrl: "https://img.freepik.com/free-photo/young-indian-man-dressed-trendy-outfit-monitoring-information-from-social-networks_231208-2766.jpg",
              createdAt: DateTime.now().toString(),
              updatedAt: DateTime.now().toString(),
            )
        )
      ]

  ),
  ReelsModel(
    url: "https://assets.mixkit.co/videos/preview/mixkit-tree-with-yellow-flowers-1173-large.mp4",
    likeCount: 578,
    commentCount: 43,
    sendCount: 80,
    isLiked: false,
    musicName: "my music name 1",
    musicImageUrl: "",
    description: "this is demo descriptioin, adkf alkd adkjhfladhlfkja ajkldhfkahfkj  alkjfhaldjfh  akjdhfa jhkfhadhjfkjhfkjdhfd dfd",
    createdAt: DateTime.now().toString(),
    updatedAt: DateTime.now().toString(),
    user: User(
        userName: "Pankaj Thakur",
        profileUrl: "https://img.freepik.com/free-photo/young-indian-man-dressed-trendy-outfit-monitoring-information-from-social-networks_231208-2766.jpg",
        createdAt: DateTime.now().toString(),
        updatedAt: DateTime.now().toString(),
        isFollow: false
    ),


  ),
  ReelsModel(
      url: "https://assets.mixkit.co/videos/preview/mixkit-portrait-of-a-woman-in-a-pool-1259-small.mp4",
      likeCount: 578,
      commentCount: 30,
      sendCount: 7,
      isLiked: true,
      musicName: "",
      musicImageUrl: "",
      description: "",
      createdAt: DateTime.now().toString(),
      updatedAt: DateTime.now().toString(),
      reelComments: []
  ),
];

Simple implementation

InstaReelsViewer
(
reelList: reelsList,
onClickCommentIcon:(reelData){},
onClickShareIcon: (reelData){},
onLike: (reelData){},
onUnLike: (reelData){},
onClickName: (reelData){},
onFollow: (reelData){},
onUnFollow: (reelData){},
);

Options

Name	Description	Default	Return
reelList	For assign reels list	[]	-
onClickShareIcon	Trigger when click on Share btn	-	ReelsModel
onLike	Trigger when click on Like btn or double tap to like	-	ReelsModel
onUnLike	Trigger when click on Like btn when it is already liked	-	ReelsModel
onFollow	Trigger when click on Follow btn	-	ReelsModel
onUnFollow	Trigger when click on Follow btn when it already following	-	ReelsModel
onClickCommentIcon	Trigger when click on Comment Icon	-	ReelsModel
onClickName	Trigger when click on User Name	-	ReelsModel

Demo APK

Click here for download demo app.

ScreenShots

initial view

Screenshot 1

Screenshot 2

Screenshot 3

Screenshot 4

Demo video

Click here for watch demo video.