Flutter custom page indicator design issue

I just created a custom page indicator but there is an issue with that design, in my design file it look like this:

This is the code that I have tried:

  const SizedBox(
              height: 61,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      CircleAvatar(
                        radius: 20,
                        backgroundColor: Colors.green,
                        child: Text(
                          "1",
                          style: TextStyle(
                            fontSize: 15,
                            color: Colors.white,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                      SizedBox(
                        height: 6,
                      ),
                      Text(
                        "Delivery",
                        style: TextStyle(
                          fontSize: 10,
                          color: Colors.grey,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ],
                  ),
                  SizedBox(
                    width: 86,
                    child: Divider(
                      color: Colors.green,
                    ),
                  ),
                ],
              ),
            ),

This is the result:

Somebody can help me with this?

Use this structure, when you care about aligning the divider with that circle, you should stick them together, while the text should be alone.

The structure as the following:

Column(
 Row(Circle---Divider),
 Text
)

Here's the code:

SizedBox(
              height: 61,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      CircleAvatar(
                        radius: 20,
                        backgroundColor: Colors.green,
                        child: Text(
                          "1",
                          style: TextStyle(
                            fontSize: 15,
                            color: Colors.white,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                      
                     SizedBox(
                    width: 86,
                    child: Divider(
                      color: Colors.green,
                      
                    ),
                  ),
                    ],
                  ),
                   Text(
                        "Delivery",
                        style: TextStyle(
                          fontSize: 10,
                          color: Colors.grey,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                  
                ],
              ),
            ),