Flutter Instagram风格故事展示插件 flutter_instagram_stories 的使用

flutter_instagram_stories 是一个用于在Flutter应用中展示类似Instagram和WhatsApp风格故事的插件。它支持图片、GIF、视频展示，并且具有多语言支持、缓存等功能。

插件特点

• 简单集成：只需一行代码即可将插件集成到你的应用中。
• 多媒体支持：支持显示图片、GIF、视频。
• 自定义图标标题：可调整图标上的标题。
• 预加载缓存：启动应用后自动缓存内容。
• 多语言支持：支持多种语言。
• 回调功能：用户关闭故事时触发回调，可用于实现订阅等功能。

安装

首先，在你的项目中添加依赖：

dependencies:
  flutter_instagram_stories: ^latest_version

然后在Dart文件中导入：

import 'package:flutter_instagram_stories/flutter_instagram_stories.dart';

iOS 注意事项

对于iOS平台，需要在Info.plist文件中添加以下配置以支持视频播放：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

使用示例

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

示例代码

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_instagram_stories/flutter_instagram_stories.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  static String collectionDbName = 'instagram_stories_db';
  CollectionReference dbInstance = FirebaseFirestore.instance.collection(collectionDbName);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Instagram Stories"),
      ),
      body: Container(
        color: Colors.indigo,
        child: Column(
          children: [
            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),
              imageStoryDuration: 7,
              progressPosition: ProgressPosition.top,
              repeat: true,
              inline: false,
              languageCode: 'en',
              backgroundColorBetweenStories: Colors.black,
              closeButtonIcon: Icon(Icons.close, color: Colors.white, size: 28.0),
              closeButtonBackgroundColor: Color(0x11000000),
              sortingOrderDesc: true,
              lastIconHighlight: true,
              lastIconHighlightColor: Colors.deepOrange,
              lastIconHighlightRadius: Radius.circular(15.0),
              captionTextStyle: TextStyle(fontSize: 22, color: Colors.white),
              captionMargin: EdgeInsets.only(bottom: 50),
              captionPadding: EdgeInsets.symmetric(horizontal: 24, vertical: 8),
            ),
            Center(
              child: Padding(
                padding: EdgeInsets.all(20.0),
                child: Text(
                  "App's functionality",
                  style: TextStyle(fontSize: 26, fontWeight: FontWeight.w600),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _backFromStoriesAlert() {
    showDialog(
      context: context,
      builder: (_) => SimpleDialog(
        title: Text(
          "User have looked stories and closed them.",
          style: TextStyle(fontWeight: FontWeight.normal, fontSize: 18.0),
        ),
        children: [
          SimpleDialogOption(
            child: Text("Dismiss"),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }
}

Firestore 数据库结构

该插件依赖于Firestore数据库来存储故事数据。你需要创建一个集合，并在其中添加文档，文档结构如下：

{
  "stories": [
    {
      "type": "image", // 或者 "video" 或 "gif"
      "url": "https://example.com/image.jpg",
      "caption": "This is a caption for the story."
    },
    {
      "type": "video",
      "url": "https://example.com/video.mp4",
      "caption": "This is a video story."
    }
  ],
  "username": "John Doe",
  "profilePicUrl": "https://example.com/profile.jpg"
}

确保字段类型正确，否则可能会导致空指针异常。

结论

通过上述步骤，你可以在Flutter应用中轻松集成Instagram风格的故事展示功能。如果你遇到任何问题或需要更多功能，请参考插件GitHub页面并提交issue。