title: align dotted circle and botted Line equally in dart
body: <p>Need to align the dotted circle and dotted line like the image shown below. Tried aligning in a row but it somehow merged with a row and it's not displaying exactly like the image. The first line is aligned well but not below the other ones. Here is the code for displaying the widgets dotted line and circle.</p>
  <p><a href="https://i.stack.imgur.com/p1i1e.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p1i1e.jpg" alt="enter image description here" /></a></p>
  <pre><code>import 'package:dotted_border/dotted_border.dart';
  import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  import 'package:flutter/src/foundation/key.dart';
  import 'package:flutter/src/widgets/framework.dart';
  import 'package:get/get.dart';
  import 'package:get/get_core/src/get_main.dart';
  import 'package:get/get_utils/src/extensions/internacionalization.dart';
  import 'package:matab/ui/general_widgets/custom_gradient_button.dart';
  import 'package:matab/ui/pages/all_orders/one_order.dart';
  import 'package:matab/ui/pages/styles.dart';
  import 'package:dotted_line/dotted_line.dart';
  import '../../../models/order.dart';
  import '../home/home.dart';
  
  class TrackOrder extends StatefulWidget {
    const TrackOrder({Key? key, required this.order}) : super(key: key);
    final Order order;
    @override
    State&lt;TrackOrder&gt; createState() =&gt; _TrackOrderState();
  }
  
  class _TrackOrderState extends State&lt;TrackOrder&gt; {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Center(child: Text('Track Order')),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            SizedBox(height: 50),
            Text(
              widget.order.orderID,
              style: TextStyle(
                  color: darkGreyColor,
                  fontSize: 18,
                  fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 50),
            Text('Sat, 12 Mar 2022',
                style: TextStyle(
                    color: darkGreyColor,
                    fontSize: 18,
                    fontWeight: FontWeight.bold)),
            SizedBox(
              height: 15,
            ),
            Text('Estimated Time: 07 Days',
                style: TextStyle(
                    color: mainColorShades[9],
                    fontSize: 23,
                    fontWeight: FontWeight.bold)),
            SizedBox(height: 30),
            Align(
              alignment: Alignment.topLeft,
              child: Container(
                margin: EdgeInsets.fromLTRB(240, 0, 0, 0),
                child: SizedBox(
                    height: 30,
                    child: DottedLine(
                      dashColor: Colors.black,
                      direction: Axis.vertical,
                      lineLength: 25,
                      lineThickness: 3,
                      dashLength: 5,
                      dashGapLength: 5,
                    )),
              ),
            ),
            Container(
              //    margin: EdgeInsets.fromLTRB(240, 05, 0, 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  OrderStatusBar(title: &quot;Received&quot;, status: true),
  
                  // Container(
                  //     //  margin: EdgeInsets.fromLTRB(60, 05, 0, 0),
                  //     )
                ],
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SizedBox(
                  width: 10,
                ),
                OrderStatusBar(title: &quot;Shipped&quot;, status: false),
              ],
            ),
            Container(
                //    margin: EdgeInsets.fromLTRB(65, 05, 0, 0),
                ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SizedBox(
                  // width: 50,
                  height: 50,
                ),
                OrderStatusBar(title: &quot;Delivering&quot;, status: false),
              ],
            ),
            Container(
                //     margin: EdgeInsets.fromLTRB(65, 05, 0, 0),
                ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                OrderStatusBar(title: &quot;Delivered&quot;, status: false),
              ],
            ),
            SizedBox(
              height: 40,
            ),
            Center(
              child: Text(widget.order.deliveryAddress.address,
                  style: TextStyle(
                      color: darkGreyColor,
                      fontSize: 18,
                      fontWeight: FontWeight.bold)),
            ),
            Padding(
              padding: const EdgeInsets.all(
                18.0,
              ),
              child: CustomGradientButton(
                  buttonText: &quot;Done&quot;.tr,
                  buttonFunction: () =&gt; {Get.offAll(Home())}),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 18.0),
              child: GestureDetector(
                child: Text(
                  'Back to Home'.tr,
                  style: TextStyle(
                      color: mainColor,
                      fontSize: 23,
                      fontWeight: FontWeight.bold),
                ),
                onTap: () =&gt; Get.offAll(Home()),
              ),
            )
          ],
        ),
      );
    }
  }
  
  class OrderStatusBar extends StatefulWidget {
    const OrderStatusBar({Key? key, required this.title, required this.status})
        : super(key: key);
    final String title;
    final bool status;
    @override
    State&lt;OrderStatusBar&gt; createState() =&gt; _OrderStatusBarState();
  }
  
  class _OrderStatusBarState extends State&lt;OrderStatusBar&gt; {
    @override
    Widget build(BuildContext context) {
      return Row(
        children: [
          Text(
            widget.title,
            style: TextStyle(fontSize: 20),
          ),
          SizedBox(
            width: 30,
          ),
          widget.status ? dottedCircleWithCheckMark() : dottedCircle(),
        ],
      );
    }
  }
  
  dottedCircle() {
    return DottedBorder(
        borderType: BorderType.Circle,
        dashPattern: const [5, 5],
        child: Container(
          height: 50,
          width: 50,
          decoration: const BoxDecoration(shape: BoxShape.circle),
        ));
  }
  
  dottedCircleWithCheckMark() {
    return DottedBorder(
        color: Colors.red,
        borderType: BorderType.Circle,
        dashPattern: const [5, 5],
        child: Container(
          height: 50,
          width: 50,
          decoration: const BoxDecoration(shape: BoxShape.circle),
          child: Icon(
            Icons.check,
            color: Colors.red,
            size: 40,
          ),
        ));
  }
  </code></pre>