Flutter - Transform scale in center of Container
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),
),
),
)
)
],
),
),
);
}
}
Just add this into your container:
alignment: FractionalOffset.center