乐趣区

关于flutter:Flutter-添加APP启动-Story-View

jiezi

原文

https://medium.com/flutterdev…

前言

在以后的疾速市场中，一些社交渠道曾经全面暴发，成为各个年龄段团聚的热门话题。散步在数字环境中，你会留神到新的网络媒体应用程序，比方 Instagram，在过来的一年里热得像火一样。

当你听到“基于网络的媒体利用”这个词时，可能会呈现 Facebook、Instagram、Twitter 或 Linkedin 等应用程序。然而，你有没有思考过如何在 Instagram 这样的在线媒体应用程序上显示一个故事？在线媒体应用程序是一个凋谢的集会，您能够通过一个简略的用户界面与来自世界各地的集体进行分割。

在这个博客中，咱们将探 Story View In Flutter。咱们将实现一个故事视图演示程序，以及如何在您的抖动应用程序中应用故事视图包创立相似 WhatsApp 的故事。

类库

  • https://pub.dev/packages/stor…

本文源码

https://github.com/flutter-de…

注释

Flutter Story View

Story View Flutter 组件工具对 Flutter 开发者很有帮忙，通过应用这个类库，你能够显示社交媒体故事页面十分像 WhatsApp 状态故事或 Instagram 状态故事视图。同样能够像 Google 新闻应用程序一样应用内联 / 外部 ListView 或者 Column。随同着手势暂停，向前，并进入前面的页面。

这个演示视频显示了如何创立一个 Flutter 的故事视图。它展现了如何在您的 Flutter 应用程序中应用故事视图包来工作。它能够像文本、图片、视频等一样显示你的故事。此外，用户将转发，先前，和手势暂停的情景。它会显示在你的设施上。

Features 性能

Story View 的一些个性如下:

  • 简略的文本状态故事
  • 图像、GIF 图像故事和视频故事(启用缓存)
  • 为上一个、下一个和暂停故事做手势
  • 每个故事项的题目
  • 在每个故事视图的顶部有一个动画的进度指示器

Properties 属性

Story View 的一些属性是:

  • controller: 此属性用于管制 Story 的回放
  • onComplete: 此属性用于在显示 Story 的整个周期时进行回调。每当故事实现时，当 repeat 设置为 true 时，就会调用这个函数
  • storyItems: 此属性不为空，不显示页
  • onVerticalSwipeComplete: 此属性用于检测到垂直滑动手势时的回调。如果您不想收听这样的事件，请不要提供它
  • onStoryShow: 此属性用于以后显示故事时的回调
  • progressPosition: 此属性用于应搁置进度批示符的地位

集成步骤

  • 第一步: 增加依赖项

将依赖项增加到 pubspec ー yaml 文件。

dependencies:
  flutter:
    sdk: flutter
  story_view: ^0.12.3
  • 第二步: 导入
import 'package:story_view/story_view.dart';
  • 第三步: 拉取包
> flutter packages get

代码实现

你须要别离在你的代码中实现它:

在 lib 文件夹中创立一个名为 status_screen.dart 的新 dart 文件。

在这个屏幕上，咱们将创立一个相似 WhatsApp 的用户界面。咱们将增加一个容器小部件。在外部，咱们将向 ListTile 增加网络图像、文本和 onTap 函数主动换行。在这个函数中，咱们将导航到 StoryPageView() 类。

Container(
  height: 80,
  padding: const EdgeInsets.all(8.0),
  color: textfieldColor,
  child: ListView(
    children: <Widget>[
      ListTile(
        leading: CircleAvatar(
          radius: 30,
          backgroundImage: NetworkImage("https://images.unsplash.com/photo-1581803118522-7b72a50f7e9f?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bWFufGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"),
        ),
        title: Text(
          "Logan Veawer",
          style: TextStyle(fontWeight: FontWeight.bold,color: white),
        ),
        subtitle: Text("Today, 20:16 PM",style: TextStyle(color:white.withOpacity(0.5)),),
        onTap: () => Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => StoryPageView())),
      ),
    ],
  ),
),

当用户按下容器时，就会显示一个故事页面。咱们将深刻探讨上面的代码。当咱们运行应用程序时，咱们应该失去屏幕的输入，就像上面的屏幕截图一样。

在 lib 文件夹中创立一个名为 story_page_view.dart 的新 dart 文件。

首先，咱们将创立一个与 StoryController() 相等的 final_controller。

final _controller = StoryController();

咱们将创立一个 storyItems 列表。首先，咱们将增加 StoryItem.text 意味着只增加不同背景色彩的简略文本状态。其次，咱们将增加 StoryItem.pageImage 的意思是用控制器增加图像的 URL 来管制故事。最初，咱们将应用控制器和图像匹配增加 gif 视频的 URL。

final List<StoryItem> storyItems = [
  StoryItem.text(title: '''“When you talk, you are only repeating something you know.
   But if you listen, you may learn something new.”– Dalai Lama''',
      backgroundColor: Colors.blueGrey),
  StoryItem.pageImage(
      url:
          "https://images.unsplash.com/photo-1553531384-cc64ac80f931?ixid=MnwxMjA3fDF8MHxzZWFyY2h8MXx8bW91bnRhaW58ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
      controller: controller),
  StoryItem.pageImage(
      url:
          "https://wp-modula.com/wp-content/uploads/2018/12/gifgif.gif",
      controller: controller,
      imageFit: BoxFit.contain),
];

咱们将返回一个 Material() 办法。在这个办法中，咱们将增加 StoryView()。在外部，咱们将增加一个 storyItems、controller、inline means 列表，如果您心愿将故事显示为整个页面，则将其设置为 false。然而，如果您要将它作为页面的一部分 (如 ListView 或 Column) 显示，那么将其设置为 true。咱们会增加反复意味着用户应该故事永远反复而后实在，否则，假。

return Material(
  child: StoryView(
    storyItems: storyItems,
    controller: controller,
    inline: false,
    repeat: true,
  ),
);

当咱们运行应用程序时，咱们应该失去屏幕的输入，就像上面的屏幕截图一样。

代码文件

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

class StoryPageView extends StatefulWidget {
  @override
  _StoryPageViewState createState() => _StoryPageViewState();
}

class _StoryPageViewState extends State<StoryPageView> {final controller = StoryController();

  @override
  Widget build(BuildContext context) {
    final List<StoryItem> storyItems = [
      StoryItem.text(title: '''“When you talk, you are only repeating something you know.
       But if you listen, you may learn something new.”– Dalai Lama''',
          backgroundColor: Colors.blueGrey),
      StoryItem.pageImage(
          url:
              "https://images.unsplash.com/photo-1553531384-cc64ac80f931?ixid=MnwxMjA3fDF8MHxzZWFyY2h8MXx8bW91bnRhaW58ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
          controller: controller),
      StoryItem.pageImage(
          url:
              "https://wp-modula.com/wp-content/uploads/2018/12/gifgif.gif",
          controller: controller,
          imageFit: BoxFit.contain),
    ];
    return Material(
      child: StoryView(
        storyItems: storyItems,
        controller: controller,
        inline: false,
        repeat: true,
      ),
    );
  }
}

总结

在本文中，我曾经解释了 Flutter 的根本构造的 Story View ; 您能够依据本人的抉择批改这个代码。这是一个小的介绍 Story View 的用户交互从我这边，它的工作应用 Flutter。

老铁记得 点赞、转发，我将更有能源出现 Flutter 好文~~~~

© 猫哥

https://ducafecat.tech/

https://github.com/ducafecat

往期

开源

GetX Quick Start

https://github.com/ducafecat/…

新闻客户端

https://github.com/ducafecat/…

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego…

Dart 编程语言根底

https://space.bilibili.com/40…

Flutter 零根底入门

https://space.bilibili.com/40…

Flutter 实战从零开始 新闻客户端

https://space.bilibili.com/40…

Flutter 组件开发

https://space.bilibili.com/40…

Flutter Bloc

https://space.bilibili.com/40…

Flutter Getx4

https://space.bilibili.com/40…

Docker Yapi

https://space.bilibili.com/40…

退出移动版