I need to create a timeline widget which would look something like this:

I was trying to use

As you can see some of the serious issues are:

1. The indicator icon is not aligned with the date(left) and status(right) section.
2. The vertical line should not connect with the indicator.

My code for this timeline widget is:

class _OrderTimelineState extends State<OrderTimeline> {
  int totalSteps = 3;
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 3,
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      itemBuilder: (context, index) {
        return Container(
          // padding: EdgeInsets.all(5),
          child: _buildTimelineTile(index),
        );
      },
    );
  }

  Widget _buildTimelineTile(int index) {
    return TimelineTile(
      alignment: TimelineAlign.manual,
      lineXY: 0.4,
      isFirst: index == 0 ? true : false,
      isLast: index == totalSteps - 1 ? true : false,
      indicatorStyle: IndicatorStyle(
        width: 20,
        height: 20,
        indicator: _buildIndicator(),
      ),
      afterLineStyle: LineStyle(
        thickness: 1,
        color: CustomColors.secondary,
      ),
      beforeLineStyle: LineStyle(
        thickness: 1,
        color: CustomColors.secondary,
      ),
      startChild: Container(
        padding: EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Text(
              "date",
              style: TextStyle(
                fontSize: 16,
                fontWeight: index == 0 ? FontWeight.bold : FontWeight.normal,
                color: CustomColors.primary,
              ),
            ),
            SizedBox(height: 5),
            Text(
              "time",
              style: TextStyle(
                fontSize: 15,
                fontWeight: FontWeight.normal,
                color: CustomColors.secondary,
              ),
            ),
          ],
        ),
      ),
      endChild: Container(
        padding: EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "status",
              style: TextStyle(
                fontSize: 16,
                fontWeight: index == 0 ? FontWeight.bold : FontWeight.normal,
                color: CustomColors.primary,
              ),
            ),
            SizedBox(height: 5),
            Text(
              "You have successfully picked up the package",
              style: TextStyle(
                fontSize: 15,
                fontWeight: FontWeight.normal,
                color: CustomColors.secondary,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildIndicator() {
    return Container(
      child: Material(
        elevation: 5,
        borderRadius: BorderRadius.circular(5),
        child: Container(
          width: 20,
          height: 20,
          decoration: BoxDecoration(
            color: CustomColors.primary,
            borderRadius: BorderRadius.circular(5),
          ),
          child: Center(
            child: Icon(
              Icons.check,
              color: CustomColors.white,
              size: 15,
            ),
          ),
        ),
      ),
    );
  }
}

How can i solve this issue?

CodePudding user response：

You can achieve it by modifying the IndicatorStyle:

TimelineTile(
   indicatorStyle: IndicatorStyle(
      width: 20,
      height: 20,
      indicator: _buildIndicator(),
      padding: const EdgeInsets.symmetric(vertical: 16.0),
      indicatorXY: 0,
   ),
   // Other code
),

• Use padding to set the padding between the line and indicator (Default value 0)
• Use indicatorXY to set the position of indicator (Default value 0.5)

Read the API reference for more information.

CodePudding user response：

Just Add :

 contentPadding:EdgeInsets.all(0),