Flutter踩坑日志之动态创建一个timeline步进器

开发过程中需要显示用户的的操作日志,并且通过步骤条的形式展现出来

如下

最终效果

首先我们需要用到组件timeline_list 插件地址

Use this package as a library

1. Depend on it
   Add this to your package's pubspec.yaml file:

dependencies:
  timeline_list: ^0.0.4

2. Install it
   You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it
   Now in your Dart code, you can use:

import 'package:timeline_list/timeline.dart';
import 'package:timeline_list/timeline_model.dart';

安装完成之后在需要用到的页面导入

import 'package:timeline_list/timeline.dart';
import 'package:timeline_list/timeline_model.dart';

List<TimelineModel> items = [
      TimelineModel(Placeholder(),
          position: TimelineItemPosition.random,
          iconBackground: Colors.redAccent,
          icon: Icon(Icons.blur_circular)),
      TimelineModel(Placeholder(),
          position: TimelineItemPosition.random,
          iconBackground: Colors.redAccent,
          icon: Icon(Icons.blur_circular)),
    ];
//这里是一个widget,直接放到你的widget中就可以了
    return Timeline(children: items, position: TimelinePosition.Center);

这个时候你就会看到这样的

image.png

将你需要放入的widget替换掉这个placeholder()Widget,这个组件的热加载不太行,需要重启下模拟器,ps:我曾一度以为我的写法有问题,其实重启下模拟器就可以了

image.png
这样还是不能满足我的要求,我需要动态渲染这个list列表,我们可以这样初始的时候让渲染的这个items赋值一个[]

List<TimelineModel> items = new List();

然后动态的拿到后台返回的数据,我这里演示用的假数据

 List devicelog = [{
            "date": 1552728704000,
            "ip": "113.116.59.58",
            "type": "control",
            "content": "/client/block",
            "status": 1
        }, {
            "date": 1552728701000,
            "ip": "113.116.59.58",
            "type": "control",
            "content": "/client/block",
            "status": 1
        }, {
            "date": 1552728641000,
            "ip": "113.116.59.58",
            "type": "device",
            "content": "bind device",
            "status": 1
        }, {
            "date": 1550644564000,
            "ip": "113.116.57.110",
            "type": "device",
            "content": "delete device",
            "status": 1
        }, {
            "date": 1550141643000,
            "ip": "113.116.59.181",
            "type": "control",
            "content": "/ap/enable",
            "status": 1
        }, {
            "date": 1550131501000,
            "ip": "113.116.59.181",
            "type": "control",
            "content": "/ap/enable",
            "status": 1
        }];

假设这就我们拿到的假数据,然后我们可以循环的渲染这个timeline了

 _dispatchCall(){
    for (var i = 0; i < devicelog.length; i++) {
          items.add(TimelineModel(
        Container(
          height: 70.0,
          child: ListTile(
            title: Text(devicelog[i]['type']),
            subtitle: Text(devicelog[i]['date']),
          ),
        ),
        isFirst: i == 0 ? true : false,
        isLast: i == devicelog.length - 1 ? true : false,
        position:
            i % 2 == 0 ? TimelineItemPosition.right : TimelineItemPosition.left,
        iconBackground: Colors.grey[300],
        icon: Icon(
          IconData(59534, fontFamily: 'MaterialIcons'),
          color: Colors.grey,
        )));
        }
  }

渲染后台返回的数据一个个的push进items这个数组,就可以看下面的样子了

image