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

how do i align the icon totally in between the circular button? – Flutter

Container(
    height: 55,
    width: 55,
    decoration: const BoxDecoration(
        shape: BoxShape.circle,
        border: Border.symmetric(
          horizontal: BorderSide(
            color: Colors.black,
            width: 2.0,
            style: BorderStyle.solid,
          ),
          vertical: BorderSide(
            color: Colors.black,
            width: 2.0,
            style: BorderStyle.solid,
          ),
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black,
            offset: Offset(3.5, 3.5),
            blurRadius: 0,
            spreadRadius: -1,
          ),
        ]),
    child: OutlinedButton(
      onPressed: () {
        _controller.forward();
        widget.onPress();
      },
      style: const ButtonStyle(
        alignment: Alignment.centerLeft,
        backgroundColor: MaterialStatePropertyAll(Colors.white),
        shape: MaterialStatePropertyAll(CircleBorder()),
      ),
      child: const Icon(
        Icons.view_carousel_outlined,
        size: 35,
        color: Colors.black,
      ),
    ),
  ),

as you can see the icon is not aligned properly …
as you can see the icon is not aligned properly ...

i have tried every method possible, i used stack, positioned, tried to give it a padding, margin etc. tried to put it in boxfit and tried everything else, any ideas why this is happening ?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Ok, so i fixed it, basically removed a lot of styling in the container and styled the border in the outline button itself.

    Here is the code:

    Container(
      decoration: const BoxDecoration(shape: BoxShape.circle, boxShadow: [
        BoxShadow(
          color: Colors.black,
          offset: Offset(3.5, 3.5),
          blurRadius: 0,
          spreadRadius: -1,
        ),
      ]),
      child: OutlinedButton(
        onPressed: () {
          _controller.forward();
          widget.onPress();
        },
        style: const ButtonStyle(
          side: MaterialStatePropertyAll(BorderSide(width: 2.0)),
          padding: MaterialStatePropertyAll(EdgeInsets.all(20.0)),
          backgroundColor: MaterialStatePropertyAll(Colors.white),
          shape: MaterialStatePropertyAll(CircleBorder()),
        ),
        child: const Icon(
          Icons.view_carousel_outlined,
          size: 35,
          color: Colors.black,
        ),
      ),
    ),

  2. 0

    Changing the alignment to Alignment.center and using EdgeInsets.zero worked fine for me.

    My Result

     Container(
            height: 55,
            width: 55,
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              border: Border.symmetric(
                horizontal: BorderSide(
                  color: Colors.black,
                  width: 2.0,
                  style: BorderStyle.solid,
                ),
                vertical: BorderSide(
                  color: Colors.black,
                  width: 2.0,
                  style: BorderStyle.solid,
                ),
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.black,
                  offset: Offset(3.5, 3.5),
                  blurRadius: 0,
                  spreadRadius: -1,
                ),
              ],
            ),
            child: OutlinedButton(
              onPressed: () {
                /*  _controller.forward();
                          widget.onPress(); */
              },
              style: const ButtonStyle(
                alignment: Alignment.center,
                padding: MaterialStatePropertyAll(EdgeInsets.zero),
                backgroundColor: MaterialStatePropertyAll(Colors.white),
                shape: MaterialStatePropertyAll(CircleBorder()),
              ),
              child: const Icon(
                Icons.view_carousel_outlined,
                size: 35,
                color: Colors.black,
              ),
            ),
          ),
    Login or Signup to reply.
  3. 0

    OutlinedButton has its own constraints, margin, padding, tapTargetSize, visualDensity, hence, your child is not getting centered inside it.
    So to achieve your desired UI snippet either modify this properties
    OR
    Wrap your Icon with Center and use InkWell for onTap() functionality

    CODE:

    Container(
              height: 55,
              width: 55,
              decoration: const BoxDecoration(
                  color: Colors.white, //TODO: Add Color to Container
                  shape: BoxShape.circle,
                  border: Border.symmetric(
                    horizontal: BorderSide(
                      color: Colors.black,
                      width: 2.0,
                      style: BorderStyle.solid,
                    ),
                    vertical: BorderSide(
                      color: Colors.black,
                      width: 2.0,
                      style: BorderStyle.solid,
                    ),
                  ),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black,
                      offset: Offset(3.5, 3.5),
                      blurRadius: 0,
                      spreadRadius: -1,
                    ),
                  ]),
              child: InkWell( //TODO: Replace OutlinedButton with InkWell
                onTap: () {
                  _controller.forward();
                  widget.onPress();
                },
                child: const Center( //TODO: Wrap Icon with Center
                  child: Icon(
                    Icons.view_carousel_outlined,
                    // size: 35,
                    color: Colors.black,
                  ),
                ),
              ),
            ),

    OUTPUT:

    enter image description here

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

Back To Top
Search