Flutter视频浏览插件insta_reels_viewer的使用

Flutter视频浏览插件insta_reels_viewer的使用

插件介绍

insta_reel_viewer 是一个用于在您的应用程序中复制 Instagram Reels 视频浏览体验的 Flutter 包。它提供了一种无缝且直观的方式来显示和查看类似于 Instagram Reels 接口风格的视频。

使用说明

1. 添加依赖 在您的 pubspec.yaml 文件中添加以下依赖：

   dependencies:
     ...
     insta_reels_viewer: ^0.0.8
   

2. 导入包 在您的库文件中添加以下导入：

   import 'package:insta_reel_viewer/insta_reel_viewer.dart';
   

3. 帮助文档 要了解如何开始使用 Flutter，请参阅在线文档：Flutter 文档。

示例代码

import 'package:flutter/material.dart';

import 'package:insta_reel_viewer/insta_reel_viewer.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个 widget 是是您应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

//// Home Page

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<ReelsModel> reelsList = [
    ReelModel(
        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: [
          ReelComment(
              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(),
              ))
        ]),
    ReelModel(
      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 adkkhfladhlfkja 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),
    ),
    ReelModel(
        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: []),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: InstaReelViewer(
        reelList: reelsList,
        onClickCommentIcon: (reelData) {},
        onClickShareIcon: (reelData) {},
        onLike: (reelData) {},
        onUnLike: (reelData) {},
        onClickName: (reelData) {},
        onFollow: (reelData) {},
        onUnFollow: (reelData) {},
      ),
    );
  }
}