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

how to center a widget inside a row when another image should have fixed distance (24) from the right edge? – Flutter

new in flutter

I’m having a row, and I’m trying to center an image inside of it, and another image that will be positioned exactly 24 points from the right of the screen.

 Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).colorScheme.secondaryContainer,
      height: 157,
      width: double.infinity,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            width: 24,
            color: Colors.black,
          ),
          setDeviceIcon(),
          setArrow(),
        ],
      ),
    );
  }

  Container setArrow() {
    return Container(
      color: Colors.yellow,
      child: IconButton(
          onPressed: () {},
          icon: const Icon(
            Icons.chevron_right,
          )),
      margin: EdgeInsets.only(right: 24),
    );
  }

result should be like this:

enter image description here

Tags:

2

Answers


  1. 0

    Use padding on Container instead of providing margin on setArrow

    Container(
  color: Theme.of(context).colorScheme.secondaryContainer,
  height: 157,
  padding: const EdgeInsets.only(right: 24.0),// this the way you like
  width: double.infinity,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Container(
        width: 24,
        color: Colors.black,
      ),
      Icon(Icons.device_hub),
      setArrow(),
    ],
  ),
)

      Container setArrow() {
    return Container(
      color: Colors.yellow,
      child: IconButton(
          onPressed: () {},
          icon: const Icon(
            Icons.chevron_right,
          )),
    );
  }
    Login or Signup to reply.
  2. 0

    If you want those images to be in the center of the screen (or Row in this case), change the mainAxisAlignment attribute to:

    mainAxisAlignment: MainAxisAlignment.center,

    You want to center the elements inside the Row and then apply spacing between them with Margin, Padding or SizedBox.
    The spaceBetween property, will force the children to align along all the Row’s length applying space between them. Take a look at this:
    example of spacing in rows

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

Back To Top
Search