Flutter图片轮播查看插件reels_viewer的使用

Flutter图片轮播查看插件reels_viewer的使用

这是按照Instagram轮播查看器风格创建的一个包，你可以通过传递视频URL来获取轮播视图。

使用

在你的Flutter项目的pubspec.yaml文件中，添加以下依赖：

dependencies:
  ...
  reels_viewer: ^1.0.0

在你的库中添加以下导入：

import 'package:reels_viewer/reels_viewer.dart';

示例

初始化列表

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',
    ),
];

简单实现

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

更多关于Flutter图片轮播查看插件reels_viewer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片轮播查看插件reels_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用reels_viewer插件来实现图片轮播查看的示例代码。这个插件提供了一个简单的方式来创建Instagram风格的图片轮播查看器。

首先，确保你已经在pubspec.yaml文件中添加了reels_viewer依赖：

dependencies:
  flutter:
    sdk: flutter
  reels_viewer: ^最新版本号  # 请替换为最新的版本号

然后，运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter项目中按照以下方式使用reels_viewer：

import 'package:flutter/material.dart';
import 'package:reels_viewer/reels_viewer.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Reels Viewer Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
    // 添加更多图片URL
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Reels Viewer Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => ReelsViewerScreen(imageUrls: imageUrls),
              ),
            );
          },
          child: Text('Open Reels Viewer'),
        ),
      ),
    );
  }
}

class ReelsViewerScreen extends StatelessWidget {
  final List<String> imageUrls;

  ReelsViewerScreen({required this.imageUrls});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: ReelsViewer(
          images: imageUrls.map((url) => NetworkImage(url)).toList(),
          indicatorColor: Colors.white,
          loadingColor: Colors.grey[300]!,
          backgroundColor: Colors.black,
          autoPlay: true,
          looping: true,
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们首先定义了一个包含图片URL的列表imageUrls。
  2. 在MyHomePage中，我们创建了一个按钮，当用户点击这个按钮时，会导航到一个新的页面ReelsViewerScreen。
  3. ReelsViewerScreen使用ReelsViewer小部件来显示图片轮播。我们传递了图片URL列表（使用NetworkImage包装每个URL），以及一些配置选项，如指示器颜色、加载颜色、背景颜色、是否自动播放以及是否循环播放。

这个示例展示了如何使用reels_viewer插件来创建一个简单的图片轮播查看器。你可以根据需要进一步自定义和扩展这个示例。

回到顶部