Want to rotate a Container widget in 2D around a specified anchor point? 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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, ); |
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.
