flutter可视化_Flutter - Scrum Poker应用程序

欢迎来到我的故事，我如何在一天之内创建一个Scrum Card App。在本文中，我想向您展示创建Flutter应用程序有多简单。我的挑战是在短时间内创建最小的应用程序。

首先，我首先要清晰地了解我们要实现的目标。我目前在Scrum团队工作，我们总是需要随身携带用于短跑扑克的卡片。这些卡很旧，很脏，很多团队经常使用这些卡，所以我决定一劳永逸地用应用程序更改它。

Scrum扑克

如果您以前从未在Scrum团队工作过，则可能从未听说过Scrum Poker一词。要解释整个想法，可能对于那个故事来说太多了，但是如果您有兴趣，Ravindra Prasad撰写了一篇关于该主题的出色文章。

这就像真正的扑克，但是每个人都有相同的牌。

视觉指导

对我来说，在我的项目中，像原型一样有视觉指导总是很有帮助的。这个原型可以是纸上的一幅画，也可以是一个成熟的原型。对于本文，我使用Adobe XD创建了一个快速原型，以便向您展示它的外观，并为自己提供可视化支持。

这样，我们有了一个原型，现在我们知道要创建什么了。现在我们已准备好进行开发。首先，我们必须使用Flutter创建一个新项目。在Flutter网站上，有更多有关如何设置环境的信息。对于这个故事，我将使用带有Flutter和Dart插件的Android Studio。

重组我们的样板

在设置flutter项目之后，让我们首先删除所有不需要的注释。我将主页与主文件分开，以便我们对应用程序有更好的感觉。这样，我们为项目样板带来了更多订单。在我们的主文件中，这应该保留。

在“ myHomePage.dart”中，您将找到用flutter项目初始化的有状态“ MyHomePage”小部件。

下图应该是文件夹结构。

我们的主页

对于我们的第一个镜头，我们想使用主页的现有Scaffold。这包含我们的Scrum卡和Flutter GridView。GridView使我们可以选择对齐网格中的多个项目。GridView的count构造函数为我们提供了开箱即用的功能，以创建带有Cards的Grid。

首先，我们初始化变量“ Fibonacci”，以便可以将数字包含在数组中。如果您仔细查看GridView的count构造函数的子级，您会看到“ for循环”。这不是很好吗？我们可以在children数组内部循环，以将Fibonacci数组映射到占位符。

太好了，网格看上去已经非常有前途了。您有没有看到“占位符”小部件在这一部分中很方便？有了这个，我们就不必为卡创建任何东西了。但是，结果已经很明显。占位符可以帮助我们构建应用程序，而无需实际执行任何操作。

卡

现在我们已经有了基本的结构，我们必须考虑如何显示卡。幸运的是，Flutter已经为我们提供了一些东西。卡片小部件将帮助我们创建插入文本的卡片的出色可视化效果。由于卡不会更改，因此我们可以为其创建带有图标或数字的无状态小部件。现在，它将位于“ MyHomePage”中。

手势

现在是时候控制我们应用程序的行为了。当我们点击卡片时，它应该从树中删除小部件，并用单个卡片小部件替换。但是，这会更改“ MyHomePage”小部件的状态。

为了实现这种点击行为，我们首先必须用GestureController包围Card元素。之后，我们必须在卡内指定onTap事件。

现在，这将在控制台的单独行中打印卡上的每次单击。

Downtime

好吧，我们已经做到了。因此，让我们休息一下，然后简要回顾一下我们已经创建的内容。

• Scrum Card应用程序的设计
• 主页
• 一个ScrumCard小部件
• 手势和敲击事件

我们需要做的下一步是在点击后更改应用程序的状态。每当点击卡片时，我们都希望使用Big ScrumCard小部件替换主页中的正文。

现在是困难的部分。因此，请做好准备，深吸一口气，然后开始吧！

状态管理

Flutter中有两种不同类型的小部件。

1. 无状态小部件
2. 有状态的小部件

无状态窗口小部件是始终根据其初始值显示的窗口小部件。在其生命周期内，初始值不能更改。另一方面，有状态窗口小部件包含真实状态，如果您更改状态，则将重新呈现该窗口小部件。如果您想了解更多有关不同类型的部件随意看看的文章通过迪帕克ķ。

现在，我们必须第一次处理小部件的状态。当我们单击按钮时，“网格小部件”的状态应更改为大的“卡片小部件”。这告诉我们，我们的应用程序中至少有两个不同的状态。为了跟踪这些状态，我们必须将当前的“无状态”小部件更改为“有状态”小部件。最简单的方法是单击无状态小组件，然后使用IDE函数将无状态小组件更改为有状态小组件。

因为新的Widget现在是有状态的，所以我们可以更改其值，并且“ build”方法可以对这些不同的状态做出反应。

我们想要跟踪要显示的图标或卡上可见的文本的信息，因此需要将其显示为状态。我称该变量为“singleCardText”和“singleCardIcon”。此外，我想拥有一个布尔值，该布尔值知道我是否必须显示所有卡片或仅一张大卡片的主页。

请注意这一点，我在这里犯了一个大错误，并将所有这些变量都放入了build方法。多次调用build方法，并且每次调用它都会再次覆盖值。

当然，这听起来微不足道，但是却花了我一小时的时间。

The Exchange

现在，我们希望根据“isHomePage”值交换小部件。因此，我们可以使用Flutter技能之一。我们包围了我们的GridView。使用三元运算符的构造函数计数。这将检查isHomePage并将相应的小部件添加到容器中。

如果你被" ?和“:”在代码中，我可以推荐您阅读一篇关于Deven Joshi的“三元运算符”的文章。有了这些，我们就有机会将“isHomePage”更改为false，它将只显示Padding(以及里面的内容)，或者我们将它保持为true，它将显示GridView。因此，我们需要“setState”方法。它允许我们非常容易地更改小部件的当前状态。

到目前为止很好。现在，我们要执行“ switchToCard”方法，而不是点击只在控制台中打印内容的位置。但是如何？该方法必须存在于_HomePageState中，而ScrumCard无法访问该状态？好吧，让我向您解释一下，因为有一个相当简单的解决方案。我们只是将函数传递到ScrumCard小部件中。每当用户现在在卡上点击时，我们就会调用该方法并“通知”我们的父窗口小部件。

如果您对这些代码片段进行了简单的了解，您会发现ScrumCard调用了notifyParent方法，实际上是switchToCard方法。这现在应该可以帮助我们从具有多个Scrum卡的网格过渡到单个大的Scrum Versa。现在仅剩一步，我们必须创建一个漂亮的Card UI，该isUI将在isHomePage为false时生成。

正如您很可能已经发现的那样，我在此处添加了notifyParent的另一个函数，以便我们可以交换回首页。

现在，卡和网格的开关应该已经可以工作了。为了进一步改善我们的应用程序，我们可以使用“ AnimatedSwitcher ”。我从flutter团队那里发现了这个很棒的视频，这是一个完美的用例。您可能已经猜到了AnimatedSwitcher，它可以帮助我们彼此交换两个小部件。它在这两者之间添加了平滑的过渡，这看起来更加友好。您只需要在小时候就将三元运算符放在两者之间，并给它一个Duration，过渡应该花多长时间。

好的，让我们运行模拟器或模拟器，看看应用程序现在的外观。

结论和下一步

现在，该应用程序已经解决了软件工程中的一个重要问题。从现在开始，我再也没有将真实的卡从一个房间搬到另一个房间了。我再也不需要抓住旧的有臭味的卡片，并将它们显示给我的产品负责人。我们不想知道哪种液体接触了这些脏污的卡片……

当然，这仅仅是开始。有了本届会议的知识，我们可以做更多的事情。该应用程序展示了使用flutter创建一个功能完善的应用程序有多么容易。

现在轮到您了。在下一篇文章之前，您面临的挑战是创建此应用程序或从GitHub派生我的存储库，并通过少量附加功能扩展此应用程序。为了给您一些示例，您可以添加，

• 从斐波那契数字更改为其他Scrum扑克数字成为可能
• 创建所选卡的历史记录
• 在过渡之间制作自定义动画

如果您有任何反馈意见让我知道，并且如果您对其他有趣的文章感兴趣，请随时在Twitter上关注我或查看我的GitHub Repository。

翻译自：https://medium.com/flutter-community/flutter-mobile-scrum-poker-app-c72d5d5514ea