Align center of an image to the bottom of another image in flutter

Posted by Jennifer | Updated on

Align center of an image to the bottom of another image in flutter. The FractionalTranslation widget is used to manipulate the position of a child widget. You’ll also have to pass an Offset to it, which will define the position manipulation. The child widget would be the red rectangle and the Offset would have the values x: 0.0 and y: 0.5. This would place the red rectangle lower, by the half of its height.

Now you can lay the red rectangle above the blue one. To do this, you can use the Stack widget. You’ll have to set alignment: Alignment.bottomCenter, such that the red rectangle is placed at the lower edge in the center.

You can find a code example below. The blue rectangle has a third of the size of the screen. The red rectangle is half as large as the blue one.


If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.

Related Questions & Answers