Flutter：如何翻转图标以获得镜像效果？

Question

我想将这个回放材料图标翻转，以便用作前进。

现有图标：

所需结果：

- Michael Hathi

---

使用 Transform 小部件 - 更多信息请参见变换矩阵 *F 镜像。 - pskink

@pskink 还有一个帮助进行转换的库：https://pub.dev/packages/matrix4_transform - MarcG

Answer 1

Before:

---

After:

import 'dart:math' as math; // import this

Transform(
  alignment: Alignment.center,
  transform: Matrix4.rotationY(math.pi),
  child: Icon(Icons.rotate_left, size: 100,),
)

- CopsOnRoad

---

好的。为了按照本地规则工作，我们可以执行 Matrix4.rotationY(isRtl() ? math.pi : 0)。这段代码的意思是根据布局方向旋转矩阵。 - jupi

一周前，一切都很好，但在更新Flutter后，它显示一个错误，即Matrix 4未定义。 - Wail Hayaly

@WailHayaly 你能在Dartpad上试试这个吗？ - CopsOnRoad

Answer 2

接受的答案可行，但是我想提供一些意见，你可以使用以下方法：

Transform.scale(
  scaleX: -1,
  child: Icon(
    Icons.rotate_left, 
    size: 100,
  ),
)

相同的效果，但没有import语句或任何明确的矩阵规范。

- Kwame Opare Asiedu

---

Transform.scale does not have the attribute scaleX, also it's job is to zoom- in or out the child Widget, scale: 1.25 = 125% - Abdallah A. Odeh

请参考Flutter文档中的Transform.scale。Transform.scale具有scaleX属性。此外，缩放是为了在其限制范围内执行数学操作，如果缩放<0，则包括在特定轴上进行反转... - Kwame Opare Asiedu

@AbdallahA.Odeh 这是 Transform.scale 构造函数的截图。 - Kwame Opare Asiedu

哦，我的错，看起来这是在新版本中添加的，我在我的Flutter中找不到它！非常感谢。 - Abdallah A. Odeh

非常欢迎您... - Kwame Opare Asiedu

这实际上比最佳答案解决方案更好。对于最佳答案，我必须在旋转后进行翻译。但是对于这个，我不需要。非常感谢。 - Zeyad Ahmad Aql

Answer 3

使用Flutter 3.10.2（不确定之前是否可用），您可以像下面这样翻转：

Transform.flip(
  flipX: true,
  child: const Icon(Icons.rotate_right),
)

- Deep Shah

Answer 4

只需将textDirection从右到左添加即可

Icon(
  Icons.reply_outlined,
  textDirection: TextDirection.rtl,
)

- Aleksey Kuzmin