Flutter - Transform scale in center of Container

Question

I'm trying to create a flip effect, but before starting with the animation I'm trying to make the transformation stay in the center of the container.

But even using FractionalOffset(0.5, 0.5) or Center() wrapping the Transform() result remains on the top of the Container, as in the image below.

Could you help me leave it in the center of the container?

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Container(
              alignment: new FractionalOffset(0.5, 0.5),
              height: 144.0,
              width: 360.0,
              decoration: new BoxDecoration(
                border: new Border.all(color: new Color(0xFF9E9E9E))
              ),
              child: new Transform(
                transform: new Matrix4.identity()..scale(1.0, 0.05),   
                  child: new Container(
                  decoration: new BoxDecoration(
                    color: new Color(0xFF005CA9),        
                  ),        
                ), 
              )         
            )         
          ],
        ),
      ),
    );
  }
}

Answer 1

Transform doesn't affect the layout of its child, it only affects how the child is painted.

If you want to do the scaling with your Transform, you can pass an alignment: FractionalOffset.center.

If you want to center the item with layout primitives instead, you can use FractionallySizedBox instead of Transform.

For a full example of how to animate a flip effect, see my answer to your other question.

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Container(
              alignment: new FractionalOffset(0.5, 0.5),
              height: 144.0,
              width: 360.0,
              decoration: new BoxDecoration(
                border: new Border.all(color: new Color(0xFF9E9E9E))
              ),
              child: new Transform(
                alignment: FractionalOffset.center,
                transform: new Matrix4.identity()..scale(1.0, 0.05),
                child: new Container(
                  decoration: new BoxDecoration(
                    color: new Color(0xFF005CA9),
                  ),
                ),
              )
            )
          ],
        ),
      ),
    );
  }
}

Answer 2

Just add this into your container:

alignment: FractionalOffset.center