Flutter故事视图展示插件stories_view的使用

特点

TODO: 列出您的包可以做什么。可能包括图片、GIF或视频。

开始使用

TODO: 列出先决条件并提供或指向有关如何开始使用该包的信息。

使用方法

TODO: 包括用于包用户的简短且有用的示例。将较长的示例添加到/example文件夹。

const like = 'sample';

额外信息

TODO: 告诉用户更多关于该包的信息：在哪里找到更多信息，如何为该包做出贡献，如何提交问题，用户可以期望从包作者那里得到什么响应等。

示例代码

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:mime/mime.dart';
import 'package:stories_view/stories_view.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final List<String> _images = [
    'https://storage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
    'https://storage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg',
    'https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerBlazes.jpg',
    'https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerEscapes.jpg',
    'https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerFun.jpg',
    'https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerJoyrides.jpg',
    'https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerMeltdowns.jpg',
    'https://storage.googleapis.com/gtv-videos-bucket/sample/images/Sintel.jpg',
    'https://storage.googleapis.com/gtv-videos-bucket/sample/images/SubaruOutbackOnStreetAndDirt.jpg',
    'https://storage.googleapis.com/gtv-videos-bucket/sample/images/TearsOfSteel.jpg'
  ];

  final List<String> _videos = [
    'https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    'https://storage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
    'https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
    'https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
    'https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4',
    'https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4',
    'https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4',
    'https://storage.googleapis.com/gtv-videos-bucket/sample/SubaruOutbackOnStreetAndDirt.mp4',
    'https://storage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4'
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: StoriesView(
        storyPages: List.generate(4, (index) => index + 1).map((e) {
          var medias = ((_images..shuffle()).getRange(0, 3).toList() +
              (_videos..shuffle()).getRange(0, 3).toList());
          return StoryPage(
            items: medias.map((e) {
              var mime = lookupMimeType(e);
              if (mime?.contains("image") == true) {
                // 网络图片
                return StoryItem.networkImage(url: e);
              } else if (mime?.contains("video") == true) {
                // 网络视频
                return StoryItem.networkVideo(url: e);
              } else {
                // 默认容器
                return StoryItem(builder: (ctx) => Container());
              }
            }).toList(),
          );
        }).toList(),
      ),
    );
  }
}