Ray Li
Ray Li

Reputation: 7919

Center Align Two Widgets in a Stack

Coming from Android development, what is the equivalent of 'android:layout_gravity="center_vertical"' in Flutter?

I have two boxes wrapped in a Stack that I would like to center align vertically. However, the size of the largest item is not fixed so I am unable to use any fixed values. This presents some difficulty as I have no way of positioning one child in relation to the other child. In Android, all you have to do is set 'layout_gravity' to 'center_vertical' on the child items.

This is what I have so far. The icon's position is fixed which is not good.

class CardItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new SizedBox(
        width: double.infinity,
        child: Stack(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.fromLTRB(72.0, 6.0, 12.0, 6.0),
              child: ConstrainedBox(
                constraints: BoxConstraints(
                  minHeight: 150.0,
                ),
                child: Material(
                  elevation: 8.0,
                  borderRadius: BorderRadius.circular(12.0),
                  color: Colors.white,
                  child: InkWell(
                    onTap: () => {},
                    child: Padding(
                      padding: EdgeInsets.fromLTRB(76.0, 24.0, 6.0, 24.0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[
                          Text('Computer',
                              style: Theme.of(context).textTheme.headline),
                          Text('电脑',
                              style: Theme.of(context).textTheme.subhead.apply(fontWeightDelta: -2)
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              )
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Padding(
                padding: EdgeInsets.fromLTRB(12.0, 0.0, 0.0, 0.0),
                child: SizedBox.fromSize(
                  size: Size.fromRadius(60.0),
                  child: Material(
                    elevation: 12.0,
                    shape: CircleBorder(),
                    child: Image.asset('image.png'),
                  ),
                ),
              ),
            ),
          ],
        )
    );
  }
}

Upvotes: 1

Views: 2816

Answers (1)

buckleyJohnson
buckleyJohnson

Reputation: 489

Wrap it in an Align widget...

Align( alignment: Alignment.center, child: Positioned( top: 10, child: Text('hi'), ), ),

Upvotes: 1

Related Questions