开始学习使用Flutter时间线

DebugUsery
680 阅读6分钟

开始使用Flutter时间轴

时间线可以被看作是一种进度指示器，它向用户展示了一项任务的完成程度，以及在执行一项特定活动时完成的所有步骤。因此，时间线在今天的大多数应用程序中形成了一个重要的角色。

今天，Flutter的时间线可以应用到应用程序中，以方便实施，并有一个直接和用户友好的界面。

使用时间线的例子

各种各样的应用程序都实现了时间轴，并可轻松集成 Flutter 时间轴以增强其功能、外观和感觉。

然而，最突出的例子是。

交付应用

时间线可以显示从包装、取货到运输的每个交付过程的实例。这个概念主要是利用实时跟踪地图来实现的，向用户展示交货的进度。

多步骤的表格

有些表格非常大，无法在一个屏幕上填写。出于这个原因，这类表格可以根据需要输入的数据分为几个步骤，例如，个人信息、位置信息、教育背景和职业生活。

进度跟踪应用

假设有人想用一个应用程序来模拟一个项目的进度，这样在每一步之后，你都会更新系统来显示进度状态。在这种情况下，你可以应用飘忽不定的时间线。

文章目标

虽然大多数教程侧重于使用flutter timelines 包构建flutter时间线，但本教程确保从头开始，仅使用dart代码和材料库，完整地展示一个flutter时间线。

我们将建立一个flutter应用程序，展示在该科的工程教育平台上创建一个问题和发表一篇文章】。］每个步骤都将被表示为一个过程，并有其标题和过程的描述。此外，文章将向读者展示如何有效地对时间线组件进行样式设计，以获得有吸引力的用户界面。

前提条件

要跟上这篇文章，读者应该有。

  • 在他们的电脑中安装了Android Studio或VS Code。
  • 对Flutter和Dart编程语言有基本了解
  • 读者的机器中安装了Flutter SDK。

项目初始化

打开您的Android Studio，使用此链接中描述的步骤创建一个新的flutter应用程序。

大部分写在flutter应用程序中的代码存在于lib 文件夹中。然而，我们将有两个文件用于这个应用程序。第一个文件将是main.dart 文件，第二个文件将被命名为ProcessCard.dart 。

在lib 文件夹中创建一个新文件，命名为ProcessCard.dart 。这个文件是ProcessCard class ，在这里我们指定时间线的单个步骤的属性。

进度卡类

如上所述，进度卡类包含进程的标题、描述和图标。此外，我们将在同一个文件中指定一个类的构造函数。在包含进度类的文件中，添加以下代码片段。

import 'package:flutter/cupertino.dart';

class ProcessCard{
    String title;
    String description;
    IconData icon;

    ProcessCard(this.title, this.description, this.icon);
}

创建时间线类

时间线类将在应用程序的主体部分被调用。它是大多数设计代码的地方。创建一个名为Timeline 的新类，它扩展了一个StatefulWidget ，如下图所示。

class Timeline extends StatefulWidget {
    const Timeline({
        Key? key,
    }) : super(key: key);

    @override
    _TimelineState createState() => _TimelineState();
}

时间线状态

接下来，我们需要创建一个时间线状态，它扩展了时间线类以利用材料库的组件。该状态将拥有我们要写的大部分代码。

class _TimelineState extends State<Timeline> {

}

我们执行的第一步是创建一个颜色列表，以用于我们流程的不同步骤。例如，创建一个新问题应该与主题批准过程不同。然而，颜色将在每第四步之后循环使用。

List<Color> colors = [Colors.red, Colors.green,Colors.pinkAccent, Colors.blue];

下面的步骤是创建一个带有标题、描述和来自ProgressCard 类模板的图标的步骤阵列。

List<ProcessCard> _getProcess(){
    List<ProcessCard> processCard = [];

    processCard.add(ProcessCard("Issue Creation", "The author creates a new issue.", Icons.adjust_rounded));
    processCard.add(ProcessCard("Topic Approval", "The author waist for 3 - 5 days."Icons.check));
    processCard.add(ProcessCard("Article Writing", "The author writes the topic.", Icons.border_color_rounded));
    processCard.add(ProcessCard("PR Creation", "The author creates a new Pull Request", Icons.call_merge_rounded));
    processCard.add(ProcessCard("Review Process", "This ensure article is correct", Icons.change_circle_rounded));
    processCard.add(ProcessCard("Final Review", "The article is polished", Icons.bookmark_add_rounded));
    return processCard;
}

然后，我们创建一个ProgressCards ，并通过一个函数将它们取到一个数组中，我们将通过这个数组循环获得有关单个流程的信息，以便显示。

List<ProcessCard> processCard = [];

@override
void initState() {
// TODO: implement initState
super.initState();
processCard = _getProcess();

塑造用户界面的风格

在这一步，我们将为应用程序的用户界面设计风格。当然，设计可能会有所不同，取决于一个特定的程序员在设计用户界面方面的能力如何。然而，人们可以从Dribble中开发他们的设计模板。

我们首先将整个设计封装在一个容器中，该容器主动为子程序，在本例中为各个进程提供了一个填充边距。容器有一个Listview 类，它将我们拥有的所有进程放入一个从上到下排列的列表中。

@override
  Widget build(BuildContext context) {
    return Container(
      child: ListView.builder(
        itemCount: processCard.length,
        itemBuilder: (context, index){
         
        
        }),
    );
  }

下面的片段说明了设计的其余部分。每个卡片都应该有其颜色和图标。

 return Container(child: Row(
    children:<Widget> [
        Column(children: <Widget>[
        Container(
            width: 2,
            height: 60,
            color: index == 0 ? Colors.white : Colors.black,
        ),
        Container(
            margin: EdgeInsets.only(left: 8, right: 5),
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
            color: colors[(index +1) %  4],
            borderRadius: BorderRadius.circular(50)
            ),
            child: Icon(processCard[index].icon, color: Colors.white,),
        ),
        Container(
            width: 2,
            height: 60,
            color: index == processCard.length - 1 ? Colors.white : Colors.black,
        ),
        ],
        ),
        Expanded(
            child: Container(
                margin: EdgeInsets.all(10),
                decoration: BoxDecoration(
                    color: Colors.white,
                border: Border(top: BorderSide(width: 3, color: colors[(index +1) %  4],), left: BorderSide(width: 3, color: colors[(index +1) %  4],),),
                boxShadow: [BoxShadow(
                    blurRadius: 5,
                    color: Colors.black26,
                )]
                ),
            height: 140,
            child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget> [
                            Text(processCard[index].title, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: colors[(index +1) %  4],),),
                        Text(processCard[index].description, style: TextStyl(fontSize: 17, letterSpacing: 2),)
                ],
            ),
            ),
        ))
    ],),

测试应用程序

完成用户界面的设计后，我们现在可以测试应用程序，看看我们的实现是否有效。

如果你有一个模拟器或一个移动设备来携带运行该应用程序，那将是最好的。首先，点击Android studio中的run 图标，然后选择你想运行应用程序的模拟器或移动设备。

你的应用程序在成功执行后应该是这样的。

timeline part one

timeline part two

总结

这篇文章向读者介绍了Flutter的时间线。接下来，我们了解了Flutter时间线的好处，并提供了同一概念的真实用例。最后，我们开发了一个模拟工程教育审查过程的应用程序，以模仿时间轴的使用。

avatar
文章
阅读
粉丝