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.

import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return new MaterialApp(theme: ThemeData(), home: Home());  }}class Home extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      body: Center(        child: BlueRedRects(          big: MediaQuery.of(context).size.width / 3.0,          small: MediaQuery.of(context).size.width / 6.0,        ),      ),    );  }}class BlueRedRects extends StatelessWidget {  final double big;  final double small;  BlueRedRects({this.big, this.small});  @override  Widget build(BuildContext context) {    return Stack(      alignment: Alignment.bottomCenter,      children: <Widget>[        Container(color: Colors.blue, width: big, height: big),        FractionalTranslation(          translation: Offset(0.0, 0.5),          child: Container(            color: Colors.red,            width: small,            height: small,          ),        )      ],    );  }}