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.