Flutter Question posted in
The official Flutter documentation can be found here.

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:

design

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:

enter image description here

Somebody can help me with this?

Tags:

3

Answers


  1. 0

    Make CircleAvatar and Divider in a Row and Text with whole Column.
    Try below code…

    SizedBox(
          height: 61,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.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,
                        ),
                      ),
                    ],
                  ),
                  SizedBox(
                    height: 6,
                  ),
                  Text(
                    "Delivery",
                    style: TextStyle(
                      fontSize: 10,
                      color: Colors.grey,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ],
              ),

            ],
          ),
        ),
    Login or Signup to reply.
  2. 0

    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,
                        ),
                      ),
                  
                ],
              ),
            ),
    Login or Signup to reply.
  3. 0

    Try below code it look like your expected design.

    Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Container(
                    padding: EdgeInsets.all(13),
                    decoration: BoxDecoration(
                      color: Colors.green,
                      shape: BoxShape.circle,
                    ),
                    child: Icon(
                      Icons.check,
                      color: Colors.white,
                    ),
                  ),
                  SizedBox(
                    width: 86,
                    child: Divider(
                      color: Colors.green,
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 6,
              ),
              Text(
                "DELIVERY",
                style: TextStyle(
                  fontSize: 15,
                  color: Colors.grey,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ],
          ),
        ],
      ),
    ),

    Result-> image

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search