CODEWITHSUNDEEP
androidfluttermobileframeworksalignment
drexvo
drexvo

Reputation: 11

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

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 ?

Upvotes: 0

Views: 93

Answers (3)

Prashant
Prashant

Reputation: 676

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

Upvotes: 1

Maximilian
Maximilian

Reputation: 251

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

Upvotes: 3

drexvo
drexvo

Reputation: 11

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

Upvotes: 1

Related Questions