title: Custom Timeline view in flutter
body: <p>I'm trying to make custom timeline view, Facing issue in alignment of text and circle.</p>
  
  <p>The Code</p>
  
  <pre><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: &lt;Widget&gt;[
            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: &lt;Widget&gt;[
          Expanded(
            flex: 1,
            child: Column(
              // mainAxisAlignment: MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: &lt;Widget&gt;[
                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: &lt;Widget&gt;[
                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: &lt;Widget&gt;[
          Expanded(
            flex: 1,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: &lt;Widget&gt;[
                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: &lt;Widget&gt;[
                Text('${title}\n ${subTile}',
                    style: TextStyle(
                        fontFamily: "regular",
                        fontSize: 14,
                        color: Colors.black54)),
              ],
            ),
          ),
        ],
      );
    }
  </code></pre>
  
  <p>Expected:</p>
  
  <p><a href="https://i.stack.imgur.com/667ok.png" rel="noreferrer"><img src="https://i.stack.imgur.com/667ok.png" alt="enter image description here"></a></p>
  
  <p>Getting</p>
  
  <p><a href="https://i.stack.imgur.com/AQVlB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AQVlB.png" alt="enter image description here"></a></p>