how to center a widget inside a row when another image should have fixed distance (24) from the righ-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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