Flutter custom timeline timeline

Component

The timeline timeline is often used in business development to record data operation records, etc. Here I encapsulate a relatively common timeline component.

Example

parameter

parameter	type	Required	illustrate
timelineList	List	Yes	Timeline data
lineColor	Color	Yes	Timeline axis color
height	double	no	The height of the container on the right side of the timeline (default 80)
titleStyle	TextStyle	no	Timeline title style (with defined initial value, no need to pass parameters if there is no special style)
subtitleStyle	TextStyle	no	The color of the subtitle of the timeline will not be displayed if the List data does not contain the subtitle parameter
descriptionStyle	TextStyle	no	Timeline description style
leftContent	bool	no	When displaying the left time true-displaying false-not displaying the default true

timelineList

parameter	type	illustrate
title	String	Header data
subtitle	String	Subtitle data
description	String	Description (if remark is not empty, it will not be displayed)
remark	String	Remarks are displayed as bubbles
day	String	The time column on the left is like 09-20
time	String	The time on the left is like 11:40

Call example

import '@/timeline/timeline.dart';
final list = [
    {
      'day': '07-08',
      'time': '13:20',
      'remark': "备注：降价1000客户可考虑，辛苦再撮合备注：降价1000客户可考虑，辛苦再撮合备注：降价1000客户可考虑",
      'description': '',
      'subtitle': '齐本安(主播)',
      'title': "新建工单"
    },
    {
      'id': "2",
      'day': '07-08',
      'time': '13:20',
      'description': "备注：降价1000客户可考虑，辛苦再撮合备注：降价1000客户可考虑",
      'subtitle': '吴雄飞(销售专员)',
      'title': "联系客户"
    },
    {
      'id': "3",
      'day': '07-08',
      'time': '13:20',
      'description': "备注：降价1000客户可考虑，辛苦再撮合备注：降价1000客户可考虑，辛苦再撮合备注：降价1000客户可考虑，辛苦再撮合",
      'title': "新建工单"
    },
    {
      'id': "4",
      'day': '07-08',
      'time': '13:20',
      'description': "备注：降价1000客户可考虑，辛苦再撮合备注：降价1000客户可考虑，辛苦再撮合备注：降价1000客户可考虑，辛苦再撮合",
      'subtitle': '齐本安(主播)',
      'title': "新建工单"
    },
    {
      'id': "5",
      'day': '07-08',
      'time': '13:20',
      'description': "备注：降价1000客户可考虑",
      'subtitle': '吴雄飞(主播)',
      'title': "新建工单"
    }
  ];
TimelineComponent(
  timelineList: list,
  lineColor: WBColors.color_cccccc,
  leftContent: false,
  height: 80.0,
)

Source address: https://github.com/gongchenghuigch/flutterComponent/tree/main/timeline