How can I rotate a Container widget in 2D around a specified anchor point?
Per Ian's advice, I gave the following a try. It appears to work, at least in my limited testing.
The container is nested within a Transform widget. Using alignment
allows one to adjust the transform-origin in relative terms, i.e., in the center, the top left, etc.
var container = new Container (
child: new Stack (
children: [
new Image.asset ( // background photo
"assets/texture.jpg",
fit: ImageFit.cover,
),
new Center (
child: new Transform (
child: new Container (
child: new Text (
"Lorem ipsum",
style: new TextStyle(
color: Colors.white,
fontSize: 42.0,
fontWeight: FontWeight.w900,
)
),
decoration: new BoxDecoration (
backgroundColor: Colors.black,
),
padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
),
alignment: FractionalOffset.center, // set transform origin
transform: new Matrix4.rotationZ(0.174533), // rotate -10 deg
),
),
],
),
width: 400.0,
height: 200.0,
);
In flutter 2.2
Use Transform:
Transform(
transform: Matrix4.rotationZ(...),
alignment: FractionalOffset.center,
child: Container(...)
Or set transformAlignment
value in Container:
Container(
...
transform: Matrix4.rotationZ(...),
transformAlignment: Alignment.center,
)
You can use RotatedBox Widget to rotate any widget:
RotatedBox(
quarterTurns: 3,
child: Container(
color:Colors.red
),
),
Apply a translation (to and from the fulcrum) before and after the rotation.
You can create yourself a little widget that does this, and thus solve your other problem at the same time (hiding the Matrix4).