Flutter Align Widget Examples

Align widget aligns its child within itself and optionally sizes itself based on the child’s size.

Since Align wraps any widget based on the Alignment direction to its parent widget, we prefer using Stack as its parent when we need a layout that stretch the whole screen.

Stack(
        children: [
          Align(
            alignment: Alignment.topLeft,
            child: Container(
              width: 80,
              height: 80,
              color: Colors.blue,
              child: Center(child: Text('topLeft')),
            ),
          ),
          Align(
            alignment: Alignment.topCenter,
            child: Container(
              width: 80,
              height: 80,
              color: Colors.blue,
              child: Center(child: Text('topCenter')),
            ),
          ),
          Align(
            alignment: Alignment.topRight,
            child: Container(
              width: 80,
              height: 80,
              color: Colors.blue,
              child: Center(child: Text('topRight')),
            ),
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: Container(
              width: 80,
              height: 80,
              color: Colors.green,
              child: Center(child: Text('centerLeft')),
            ),
          ),
          Align(
            alignment: Alignment.center,
            child: Container(
              width: 80,
              height: 80,
              color: Colors.green,
              child: Center(child: Text('topLeft')),
            ),
          ),
          Align(
            alignment: Alignment.centerRight,
            child: Container(
              width: 80,
              height: 80,
              color: Colors.green,
              child: Center(child: Text('topLeft')),
            ),
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: Container(
              width: 80,
              height: 80,
              color: Colors.redAccent,
              child: Center(child: Text('bottomLeft')),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              width: 80,
              height: 80,
              color: Colors.redAccent,
              child: Center(child: Text('bottomCenter')),
            ),
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: Container(
              width: 80,
              height: 80,
              color: Colors.redAccent,
              child: Center(child: Text('bottomRight')),
            ),
          ),
        ],
      )

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close