{"id":10900,"date":"2021-11-05T10:00:00","date_gmt":"2021-11-05T01:00:00","guid":{"rendered":"https:\/\/www.gigas-jp.com\/appnews\/?p=10900"},"modified":"2021-11-04T20:12:58","modified_gmt":"2021-11-04T11:12:58","slug":"lets-build-flutter-rotatedbox-with-me","status":"publish","type":"post","link":"https:\/\/www.gigas-jp.com\/appnews\/archives\/10900","title":{"rendered":"Let’s build flutter RotatedBox with me!"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Sometimes we may try our design horizontal or 90 degree for a bit more interesting layout. If you want to do that, Flutter has answered. Just use RotatedBox<\/strong>.<\/p>\n\n\n\n

RotatedBox has provided a child and a number of quarter turns you want to rotate. One quarter to 90 degree turns. <\/p>\n\n\n\n

So,<\/p>\n\n\n\n

If we set 1 quarter, that will turn to 90 degree.<\/p>\n\n\n\n

If we set 2 quarter, that will turn to 180 degree <\/p>\n\n\n\n

If we set 3 quarter, that will turn to 270 degree<\/p>\n\n\n\n

If we set 4 quarter, that will turn to 360 degree.<\/p>\n\n\n\n

If we use 5 quarter, that will turn to 90 degree again.<\/p>\n\n\n\n

RotatedBox(\nquarterTurns : 3,\nchild: MyWidget(),\n)<\/code><\/pre>\n\n\n\n
 Let’s build example with RotatedBox.<\/p>\n\n\n\n
Firstly, add assets image to pubspec.yaml file. After adding image assets, run flutter pub get.<\/p>\n\n\n\n
assets:\n  - assets\/<\/code><\/pre>\n\n\n\n
Second step is  in your main.dart file, that’s need to create a rotated box. Inside a RotatedBox<\/strong>() widget, we will call quarterTurns and a child.<\/p>\n\n\n\n
Inside a child, we will add inside a ClipPath and his child’s property with image. The result will be underneath screen capture.<\/p>\n\n\n\n
Example code :<\/p>\n\n\n\n
return Scaffold(\n  backgroundColor: Colors.grey<\/em>[100],\n  appBar: AppBar(\n    title: const Text(\"Rotated Box\"),\n    backgroundColor: Colors.blueGrey<\/em>[800],\n\n  ),\n  body: const Center(\n      child: RotatedBox(\n          quarterTurns: 5,\n          child: ClipPath(\n              child: Image(\n                image: AssetImage(\"assets\/logo.png\"),\n                fit: BoxFit.contain,\n                height: 200,\n\n              )\n\n          )\n      )\n  ),\n);\n\n<\/pre>\n\n\n\n
Hoped you enjoyed with this post!<\/p>\n\n\n\n
By Ami<\/p>\n
\n            
<\/g:plusone><\/div>\n            
 \"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"<\/a>