insta_reels_viewer

Description:

insta reels viewer

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
copied to clipboard
In your library add the following import:
import 'package:insta_reels_viewer/insta_reels_viewer.dart';
copied to clipboard
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: []
),
];

copied to clipboard
Simple implementation
InstaReelsViewer
(
reelList: reelsList,
onClickCommentIcon:(reelData){},
onClickShareIcon: (reelData){},
onLike: (reelData){},
onUnLike: (reelData){},
onClickName: (reelData){},
onFollow: (reelData){},
onUnFollow: (reelData){},
);
copied to clipboard
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.