CODEWITHSUNDEEP
androidiosflutter
Farhana Naaz Ansari
Farhana Naaz Ansari

Reputation: 7928

Custom Timeline view in flutter

I'm trying to make custom timeline view, Facing issue in alignment of text and circle.

The Code

  Widget orderTimeLine() {
    return Container(
      decoration: BoxDecoration(color: Colors.white),
      margin: EdgeInsets.only(
        bottom: SizeConfig.safeBlockHorizontal * 3,
      ),
      padding: EdgeInsets.only(
        top: SizeConfig.safeBlockHorizontal * 3,
        left: SizeConfig.safeBlockHorizontal * 7,
        bottom: SizeConfig.safeBlockHorizontal * 3,
      ),
      child: Column(
        children: <Widget>[
          timelineRow("Order Confirmed", orderDateTime),
          timelineRow("Order Inprocess", orderDateTime),
          timelineRow("Order Processed", ""),
          timelineRow("Order Shipped", ""),
          timelineLastRow("Order Delivered", ""),
        ],
      ),
    );
  }

  Widget timelineRow(String title, String subTile) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Column(
            // mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                width: 18,
                height: 18,
                decoration: new BoxDecoration(
                  color: Colors.green,
                  shape: BoxShape.circle,
                ),
                child: Text(""),
              ),
              Container(
                width: 3,
                height: 50,
                decoration: new BoxDecoration(
                  color: Colors.green,
                  shape: BoxShape.rectangle,
                ),
                child: Text(""),
              ),
            ],
          ),
        ),
        Expanded(
          flex: 9,
          child: Column(
            // mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text('${title}\n ${subTile}',
                  style: TextStyle(
                      fontFamily: "regular",
                      fontSize: 14,
                      color: Colors.black54)),
            ],
          ),
        ),
      ],
    );
  }
  Widget timelineLastRow(String title, String subTile) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                width: 18,
                height: 18,
                decoration: new BoxDecoration(
                  color: Colors.green,
                  shape: BoxShape.circle,
                ),
                child: Text(""),
              ),
              Container(
                width: 3,
                height: 20,
                decoration: new BoxDecoration(
                  color: Colors.transparent,
                  shape: BoxShape.rectangle,
                ),
                child: Text(""),
              ),
            ],
          ),
        ),
        Expanded(
          flex: 9,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text('${title}\n ${subTile}',
                  style: TextStyle(
                      fontFamily: "regular",
                      fontSize: 14,
                      color: Colors.black54)),
            ],
          ),
        ),
      ],
    );
  }

Expected:

enter image description here

Getting

enter image description here

Upvotes: 5

Views: 9366

Answers (3)

haard
haard

Reputation: 13

I know making a timeline view on Flutter is very complex stuff, and if you need to animate it, then it's a boon.

But you can do it easily with order_tracker_zen package in flutter: https://pub.dev/packages/order_tracker_zen/versions

Sample Code:

OrderTrackerZen(
    tracker_data: [
        TrackerData(
            title: "Order Place",
            date: "Sat, 8 Apr '22",
            tracker_details: [
                TrackerDetails(
                    title: "Your order was placed on Zenzzen",
                    datetime: "Sat, 8 Apr '22 - 17:17",
                ),
                TrackerDetails(
                    title: "Zenzzen Arranged A Callback Request",
                    datetime: "Sat, 8 Apr '22 - 17:42",
                ),
            ],
        ),
        TrackerData(
            title: "Order Shipped",
            date: "Sat, 8 Apr '22",
            tracker_details: [
                TrackerDetails(
                    title: "Your order was shipped with MailDeli",
                    datetime: "Sat, 8 Apr '22 - 17:50",
                ),
            ],
        ),
        TrackerData(
            title: "Order Delivered",
            date: "Sat,8 Apr '22",
            tracker_details: [
                TrackerDetails(
                    title: "You received your order, by MailDeli",
                    datetime: "Sat, 8 Apr '22 - 17:51",
                ),
            ],
        ),
    ],
)

Upvotes: 0

Julio Henrique Bitencourt
Julio Henrique Bitencourt

Reputation: 1950

You could do this with timeline_tile.

Also, the beautiful_timelines repository contains some examples built with this package.

Web demo

Upvotes: 3

Adelina
Adelina

Reputation: 11921

You need to set crossAxisAligment for rows:

  Widget timelineRow(String title, String subTile) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start, # <- this

Upvotes: 1

Related Questions