🌀
FlutterのIconを回転・反転させる方法
結論
Transform.rotateかtransform: Matrix4.rotationX(pi),を使う
このアイコンを回転させます、
//右上
Transform(
transform: Matrix4.rotationX(pi), // Invert Y-axis
alignment: Alignment.center,
child: IconButton(
onPressed: () {
setState(() {});
},
icon: Icon(Icons.branding_watermark)),
),
//左上
Transform.rotate(
angle: 180 * pi / 180,
child: IconButton(
onPressed: () {
setState(() {});
},
icon: Icon(Icons.branding_watermark)),
),
//右下
IconButton(
onPressed: () {
setState(() {});
},
icon: Icon(Icons.branding_watermark)),
//左下
Transform(
transform: Matrix4.rotationY(pi), // Invert Y-axis
alignment: Alignment.center,
child: IconButton(
onPressed: () {
setState(() {});
},
icon: Icon(Icons.branding_watermark)),
),
おすすめ
Flutterでアプリ開発を始める上での個人的なオススメをまとめています。
書籍はkindle unlimitedで新しいものを無料で読むのが良いと思います。
オススメ書籍
これから始める場合、flutter 1.x の時に書かれた本を読むのは辞めておいた方がいいです。
理由は、flutter 2.x 以降、null-safetyという仕様が加わり、書き方がガラッと変わりました。
僕は2.xがリリースされたあたりでFlutterを初めて、情報がアテにならずかなり苦戦しました。
これから始める方向け 【kindle unlimitedなら無料】
スマホで動くアプリを作ろう!ゼロから始めるFlutter実践入門編 ①: シンプルなアプリを作ってみよう
初心者による初心者のためのFlutter詳解
脱初心者向け(課金の実装など、具体的な実装方法や技術が書いてあります)
現場で使える Flutter開発入門
Discussion