Table Of Content
Flutter Alignment Tutorial with Examples
View more Tutorials:
Follow us on our fanpages to receive notifications every time there are new articles.
Facebook
Twitter
Alignment is used to define the way to align the position of a child widget in its parent.
- TODO Link?
- TODO Link?
Alignment Constructor
const Alignment(
double x,
double y
)
Flutter places a coordinate system in the center of the parent widget, and you can create an Alignment object from the two parameters x and y to describe how to align the position of the child widget.
The Alignment class defines a few constants corresponding to some common positions:
| Constant | Define |
| bottomCenter | Alignment(0.0, 1.0) |
| bottomLeft | Alignment(-1.0, 1.0) |
| bottomRight | Alignment(1.0, 1.0) |
| center | Alignment(0.0, 0.0) |
| centerLeft | Alignment(-1.0, 0.0) |
| centerRight | Alignment(1.0, 0.0) |
| topCenter | Alignment(0.0, -1.0) |
| topLeft | Alignment(-1.0, -1.0) |
| topRight | Alignment(1.0, -1.0) |
Container (
decoration: BoxDecoration (
image: const DecorationImage(
image: NetworkImage('https://s3.o7planning.com/images/tom-and-jerry.png'),
fit: BoxFit.cover,
)
),
margin: EdgeInsets.all(10),
alignment: Alignment.bottomLeft,
child: Text (
"Tom and Jerry",
style: TextStyle(
fontSize: 20,
color: Colors.red,
fontWeight: FontWeight.bold
),
)
)
