Flutter故事查看器插件flutter_story_viewer的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter故事查看器插件flutter_story_viewer的使用

简介

flutter_story_viewer 是一个用于实现类似WhatsApp和Instagram故事查看功能的Flutter插件。它支持可变视频时长,能够轻松集成到您的Flutter项目中。

安装

在开始使用 flutter_story_viewer 之前,您需要确保已经在您的机器上安装了 Flutter SDK

通过 flutter pub add 安装:
dart pub add flutter_story_viewer
或者在 pubspec.yaml 文件中添加依赖:
dependencies:
  flutter_story_viewer: ^0.1.1

示例用法

以下是一个完整的示例代码,展示了如何在您的Flutter应用中使用 flutter_story_viewer 插件。

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

void main() {
  // 确保插件已初始化
  FlutterStoryViewer.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.grey),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Story View'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 获取屏幕尺寸
    final size = MediaQuery.sizeOf(context);
    
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            SizedBox(
              height: size.height * 0.8, // 设置故事查看器的高度为屏幕高度的80%
              child: const FlutterStoryViewer(
                backgroundColor: Colors.grey, // 设置背景颜色
                items: [
                  VideoItem(
                    url: 'https://townbox.s3.amazonaws.com/static/videos/FastApi_Websocket_Demo_2-19B0B1D7-460E-439A-B3FC-F78041DAB6A8.mp4', // 视频URL
                  ),
                  VideoItem(
                    url: 'https://user-images.githubusercontent.com/28951144/229373709-603a7a89-2105-4e1b-a5a5-a6c3567c9a59.mp4', // 视频URL
                  ),
                  VideoItem(
                    url: 'https://user-images.githubusercontent.com/28951144/229373695-22f88f13-d18f-4288-9bf1-c3e078d83722.mp4', // 视频URL
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

更多关于Flutter故事查看器插件flutter_story_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter故事查看器插件flutter_story_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用flutter_story_viewer插件的一个示例代码案例。这个插件通常用于在应用中展示类似Instagram的故事查看器。

首先,确保你已经将flutter_story_viewer添加到你的pubspec.yaml文件中:

dependencies:
  flutter:
    sdk: flutter
  flutter_story_viewer: ^最新版本号  # 请替换为实际可用的最新版本号

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

接下来,我们创建一个简单的Flutter应用来使用这个插件。以下是一个完整的示例代码:

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

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

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

class StoryViewerScreen extends StatefulWidget {
  @override
  _StoryViewerScreenState createState() => _StoryViewerScreenState();
}

class _StoryViewerScreenState extends State<StoryViewerScreen> {
  final List<String> storyUrls = [
    'https://example.com/story1.jpg',
    'https://example.com/story2.jpg',
    'https://example.com/story3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Story Viewer'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => StoryViewer(
                  storyList: storyUrls.map((url) => StoryModel(
                    imageUrl: url,
                    isVideo: false, // 如果视频,设置为true并传递视频URL
                  )).toList(),
                  onStoryCompleted: () {
                    print('All stories completed');
                  },
                  onStoryTapped: (index) {
                    print('Story tapped at index: $index');
                  },
                )),
              ),
            );
          },
          child: Text('View Stories'),
        ),
      ),
    );
  }
}

class StoryModel {
  final String imageUrl;
  final bool isVideo;

  StoryModel({required this.imageUrl, required this.isVideo});
}

在这个示例中,我们:

  1. 定义了一个包含故事图片URL的列表storyUrls
  2. 创建了一个StoryViewerScreen,其中包含一个按钮,当点击按钮时,会导航到一个新的页面显示故事查看器。
  3. StoryViewer组件接收一个storyList,该列表包含StoryModel对象。每个StoryModel对象包含图片的URL和一个布尔值isVideo,用于指示故事是图片还是视频(本例中我们假设都是图片)。
  4. onStoryCompletedonStoryTapped是可选的回调函数,分别用于处理故事播放完成和故事被点击的事件。

请确保将storyUrls列表中的URL替换为你自己的图片或视频URL。

这个示例演示了如何使用flutter_story_viewer插件在Flutter应用中展示故事查看器。根据实际需求,你可以进一步自定义和扩展此示例。

回到顶部