flutter_instagram_stories

一个用于显示类似 Whatsapp和Instagram的故事的Flutter插件。内置分组（同一图标下的多个故事）、缓存、视频、GIF。

该插件可用于任何应用程序，以显示新闻、教育内容等。在此处查看示例应用程序。

注意：此插件正在积极开发中，存在一些已知错误和许多待实现的功能。请在此处添加问题或功能请求：issue

该项目最初是从 https://github.com/blackmann/story_view 复制的——非常感谢这个不错的软件包。如果您需要更灵活的功能，可以查看原始项目。

flutter_instagram_stories

重要说明

  1. 目前插件仅支持 Firebase。
  2. 这是第一个测试版，请在此处添加所有问题和功能请求：issue

功能

  • 只需一行代码即可将此插件集成到应用程序中。
  • 显示图片、GIF、视频。
  • 图标上的可调整标题。
  • 应用启动后的初步缓存。
  • 多语言支持。
  • 用户关闭故事时的回调 - 有助于在首次启动后实现订阅等。

安装

在此处查看如何安装 https://pub.dev/packages/flutter_instagram_stories#-installing-tab-

现在，在您的 Dart 代码中，您可以使用

import 'package:flutter_instagram_stories/flutter_instagram_stories.dart';

iOS

播放视频时，插件使用官方的 video_player https://pub.dev/packages/video_player

来自文档

  1. 警告：video_player 插件在 iOS 模拟器上无法正常工作。您必须在真实的 iOS 设备上测试视频。

  2. 对于 iOS，请在位于 <project root>/ios/Runner/Info.plist 的 Info.plist 文件中添加以下内容。

NSAppTransportSecurity

NSAllowsArbitraryLoads

用法

您可以在此处找到完整的可运行示例 https://github.com/awaik/flutter_instagram_stories/tree/master/example

Dart 代码

连接到存储故事的集合

    static String collectionDbName = 'instagram_stories_db';
    CollectionReference dbInstance =
      Firestore.instance.collection(collectionDbName);

并将完整的故事功能添加到您的应用程序中。

    FlutterInstagramStories(
        collectionDbName: collectionDbName,
        showTitleOnIcon: true,
        backFromStories: () {
          _backFromStoriesAlert();
        },
        iconTextStyle: TextStyle(
          fontSize: 14.0,
          color: Colors.white,
        ),
        iconImageBorderRadius: BorderRadius.circular(15.0),
        iconBoxDecoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(15.0)),
          color: Color(0xFFffffff),
          boxShadow: [
            BoxShadow(
              color: Color(0xff333333),
              blurRadius: 10.0,
              offset: Offset(
                0.0,
                4.0,
              ),
            ),
          ],
        ),
        iconWidth: 150.0,
        iconHeight: 150.0,
        textInIconPadding:
            EdgeInsets.only(left: 8.0, right: 8.0, bottom: 12.0),
        //how long story lasts in seconds
        imageStoryDuration: 7,
        progressPosition: ProgressPosition.top,
        repeat: true,
        inline: false,
        languageCode: 'en',
        closeButtonIcon: Icon(
          Icons.close,
          color: Colors.blueGrey,
          size: 28.0,
        ),
        closeButtonBackgroundColor: Color(0x00ffffff),
      ),

Firestore 数据库

插件与 Firestore 数据库和 package https://pub.dev/packages/cloud_firestore 一起工作，该包已包含在插件中。

您可以使用示例文件夹中的示例数据库 示例，或者创建自己的数据库。

创建步骤

  1. 将 Firebase 添加到您的应用程序
  1. 创建 Firestore 数据库
  • 创建一个任意名称的集合。之后，您只需在 Dart 代码中使用此名称一次。
  • 在集合中创建具有精确结构的文档，如下面的图片所示
    DateTime date;
    List file
       // for example
       // [{String filetype, String url}
       //  {String filetype, String url}
       //  ...]
    String previewImage;
    Map previewTitle
       // for example
       // {"en": someText, "anyLangCode": someText}

collection_structure

就是这样！现在您的应用程序拥有了具有缓存和其他强大功能的 Instagram 故事。

在真实应用程序中的用例

适用于 Android 和 iOS 的应用程序 - https://lifext.app/

showcase2

GitHub

https://github.com/awaik/flutter_instagram_stories