🌀

FlutterのIconを回転・反転させる方法

2023/01/09に公開約2,000字

結論

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実践入門編 ①: シンプルなアプリを作ってみよう
https://amzn.to/3yxutNM

初心者による初心者のためのFlutter詳解
https://amzn.to/39YcpSK

脱初心者向け(課金の実装など、具体的な実装方法や技術が書いてあります)

現場で使える Flutter開発入門
https://amzn.to/3kUXuLv

Discussion

ログインするとコメントできます