CODEWITHSUNDEEP
flutterflutter-layout
Francesc
Francesc

Reputation: 29260

Centering a Row in a Stack

I have a widget that consists of a Row and an Icon in a stack. I want to center them both vertically in the stack (the row in the center, the icon in the right center). I wrap both widgets in an Align widget, but this only is affecting the Icon, not the Row. How can I have the ROw centered vertically?

This is my code

@override
Widget build(BuildContext context) {
  return Card(
    child: Padding(
      padding: EdgeInsets.all(16.0),
      child: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.center,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(searchLanguage == SearchLanguage.english ? word.english : word.korean,
                    style: Theme.of(context).textTheme.bodyText1),
                SizedBox(
                  width: 8.0,
                ),
                Icon(Icons.arrow_forward),
                SizedBox(
                  width: 8.0,
                ),
                Text(searchLanguage == SearchLanguage.english ? word.korean : word.english,
                    style: Theme.of(context).textTheme.bodyText1),
              ],
            ),
          ),
          Align(
            alignment: Alignment.centerRight,
            child: IconButton(
              icon: Icon(Icons.delete),
              onPressed: () => deleteCallback(word),
            ),
          )
        ],
      ),
    ),
  );
}

This is the outcome

enter image description here

Upvotes: 0

Views: 37

Answers (1)

Nehal
Nehal

Reputation: 1489

Try using the alignment of the stack instead:

Stack(
  alignment: Alignment.topCenter,

Alignment properties works, also remove the unnecessary alignments Full code:

return Card(
            child: Padding(
              padding: EdgeInsets.all(16.0),
              child: Stack(
                alignment: Alignment.center,
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text("One", style: Theme.of(context).textTheme.bodyText1),
                      SizedBox(
                        width: 8.0,
                      ),
                      Icon(Icons.arrow_forward),
                      SizedBox(
                        width: 8.0,
                      ),
                      Text("Two", style: Theme.of(context).textTheme.bodyText1),
                    ],
                  ),
                  Align(
                    alignment: Alignment.centerRight,
                    child: IconButton(
                      icon: Icon(Icons.delete),
                      onPressed: () {},
                    ),
                  )
                ],
              ),
            ),
          )

Upvotes: 1

Related Questions