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 ...

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 ?

CodePudding user response：

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,
        ),
      ),
    ),

CodePudding user response：

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

 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,
              ),
            ),
          ),

CodePudding user response：

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: