简单的时间流程轴
效果图
使用IntrinsicHeight来实现,根据右边widget的动态高度,来确定左边widget的高度,
import 'package:flutter/material.dart';
class TakeAwayTimeProcessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
List<TakeAwayBean> datas = List<TakeAwayBean>()
..add(TakeAwayBean()
..des = "已签收,可以做出评价,感谢下次光临!"
..time = "2020-10-24 12:45")
..add(TakeAwayBean()
..des = "外卖小哥努力配送中..."
..time = "2020-10-24 12:30")
..add(TakeAwayBean()
..des = "外卖到商家领取外卖,大约需要20分钟,6公里,5个红绿灯"
..time = "2020-10-24 12:25")
..add(TakeAwayBean()
..des = "外卖小哥接单啦!"
..time = "2020-10-24 12:18")
..add(TakeAwayBean()
..des = "商家接单,开始订做"
..time = "2020-10-24 12:10");
return Scaffold(
appBar: AppBar(
title: Text("外卖流程轴"),
),
body: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
TakeAwayBean bean = datas[index];
return Container(
child: IntrinsicHeight(
child: Row(
children: [
Container(
alignment: Alignment.center,
child: Stack(
alignment: Alignment.center,
children: [
Column(
children: [
Expanded(
child: Container(
color: Colors.grey
.withOpacity(index == 0 ? 0 : .5),
width: 1,
)),
Expanded(
child: Container(
color: Colors.grey.withOpacity(
index == datas.length - 1 ? 0 : .5),
width: 1,
))
],
),
index == 0
? Icon(
Icons.check_circle,
color: Colors.blue,
)
: Icon(
Icons.fiber_manual_record,
color: Colors.grey.withOpacity(.5),
),
],
),
),
SizedBox(
width: 20,
),
Expanded(
child: Container(
padding:
EdgeInsets.symmetric(vertical: 20, horizontal: 20),
margin: EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8)),
border: Border.all(
color: Colors.grey[300], width: 1.4)),
child: Row(
children: [
Expanded(
child: Text(bean.des),
),
Padding(
padding: EdgeInsets.only(left: 12),
child: Text(bean.time),
)
],
),
),
)
],
),
),
);
},
itemCount: datas.length,
),
),
);
}
}
class TakeAwayBean {
String des;
String time;
}