Flutter故事分享插件stories_for_flutter的使用

Stories for Flutter #

Flutter是一个用于开发跨平台移动应用的框架，而stories_for_flutter则是基于Flutter的一个可定制化插件，允许你在应用程序中轻松添加类似于Instagram或WhatsApp的故事/状态功能。这个插件没有依赖外部库，完全由Flutter原生实现。

Screenshots #

以下是使用stories_for_flutter创建的故事界面的一些截图：

使用该插件 #

步骤1：导入包

在你的Dart文件顶部添加以下代码来导入stories_for_flutter包：

import 'package:stories_for_flutter/stories_for_flutter.dart';

步骤2：调用插件并使用它

你可以通过将每个页面包装在Scaffold中来自定义故事页面。下面是一个完整的示例demo，展示了如何使用Stories和StoryItem小部件来构建一个包含两组故事的应用程序。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Stories Example'),
        ),
        body: Column(
          children: [
            Stories(
              displayProgress: true, // 显示进度条
              circlePadding: 2, // 故事图标周围的填充
              storyItemList: [
                StoryItem(
                  name: "First Story", // 故事名称
                  thumbnail: NetworkImage(
                    "https://assets.materialup.com/uploads/82eae29e-33b7-4ff7-be10-df432402b2b6/preview",
                  ), // 故事缩略图
                  stories: [ // 故事内容
                    Scaffold(
                      body: Container(
                        decoration: const BoxDecoration(
                          image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage(
                              "https://wallpaperaccess.com/full/16568.png",
                            ),
                          ),
                        ),
                      ),
                    ),
                    Scaffold(
                      body: Container(
                        decoration: const BoxDecoration(
                          image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage(
                              "https://i.pinimg.com/originals/2e/c6/b5/2ec6b5e14fe0cba0cb0aa5d2caeeccc6.jpg",
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                StoryItem(
                  name: "2nd",
                  thumbnail: NetworkImage(
                    "https://www.shareicon.net/data/512x512/2017/03/29/881758_cup_512x512.png",
                  ),
                  stories: [
                    Scaffold(
                      body: Container(
                        decoration: const BoxDecoration(
                          image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage(
                              "https://i.pinimg.com/originals/31/bc/a9/31bca95ba39157a6cbf53cdf09dda672.png",
                            ),
                          ),
                        ),
                      ),
                    ),
                    const Scaffold(
                      backgroundColor: Colors.black,
                      body: Center(
                        child: Text(
                          "That's it, Folks !",
                          style: TextStyle(
                            color: Color(0xffffffff),
                            fontSize: 25,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

上述代码实现了两个故事分组，每个分组内包含不同的页面。你可以根据需要调整图片链接、文本样式和其他属性，以适应你的具体需求。此外，你还可以进一步探索stories_for_flutter提供的其他配置选项，如是否显示进度条等，以获得更丰富的用户体验。