如何在没有动画的情况下旋转材质图标？答案

【问题标题】：How to rotate material icon in flutter without animation?如何在没有动画的情况下旋转材质图标？
【发布时间】：2019-11-09 03:52:45
【问题描述】：

我希望图标details 指向上方，如图所示。但材料图标列表中有图标details指向下方，那么如何在我的颤振项目中旋转材质图标，而不下载图标图像。


Column(
  children: <Widget>[
    Container(
      height: 48,
      decoration: BoxDecoration(
          color: Color(0xFFFBBC05),
          borderRadius: BorderRadius.circular(48),
          boxShadow: [
            BoxShadow(
                blurRadius: 16,
                offset: Offset(0, 8),
                color: Color(0XFFFBBC05),
                spreadRadius: -10)
          ]),
      child: IconButton(
        icon: Icon(
          Icons.details,
          color: Colors.white,
        ),
        onPressed: null,
      ),
    ),
    SizedBox(
      height: 8,
    ),
    Text(
      "Historical",
      style: TextStyle(fontFamily: 'AirbnbCerealMedium', fontSize: 12),
    ),
  ],
)

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

您可以使用rotate constructor 将IconButton 包装在Transform 小部件中：

import 'dart:math' as math;

Transform.rotate(
  angle: 180 * math.pi / 180,
  child: IconButton(
    icon: Icon(
      Icons.details,
      color: Colors.white,
    ),
    onPressed: null,
  ),
),

【讨论】：

我需要为math导入什么
导入 'dart:math'
在本例中为import 'dart:math' as math;

【解决方案2】：

另一种解决方案是：

RotatedBox(
  quarterTurns: 2,
  child: IconButton(
    icon: Icon(
      Icons.details,
      color: Colors.white,
    ),
    onPressed: null,
  ),
),

【讨论】：

我认为旋转框是一种更好的方法

【解决方案3】：

Transform.rotate(
  angle: 180 * pi / 180,
  child: IconButton(
    icon: Icon(
      Icons.details,
      color: Colors.white,
    ),
    onPressed: null,
  ),
),

【讨论】：

180 * pi / 180 等于 pi
为什么我们需要角度乘以 pi/180
@akshaybhange 因为它需要从度数转换为弧度（圆/旋转单位的度量）
使用import 'dart:math' as math; 并使用angle: 180 * pi / 180, 触发了错误：Error: The getter 'pi' isn't defined for the class 但是它与angle: 180 * math.pi / 180,（"math.pi" 而不是"pi" )。
@MarkGavagan 如果你导入 dart:math 没有别名（作为数学），它将像上面一样工作

【解决方案4】：

如果你想旋转像arrow_forward_ios这样的图标，可以帮助下面的代码。

icon: Transform.rotate(
       angle: 90 *math.pi /180,
       child: Icon(Icons.arrow_forward_ios,
       color: Colors.white,size: 18,),,

【讨论】：

【解决方案5】：

一种解决方案是使用Transform 小部件。

Column(children: <Widget>[
  Container(
    height: 48,
    decoration: BoxDecoration(
        color: Color(0xFFFBBC05),
        borderRadius: BorderRadius.circular(48),
        boxShadow: [
          BoxShadow(
              blurRadius: 16,
              offset: Offset(0, 8),
              color: Color(0XFFFBBC05),
              spreadRadius: -10)
        ]),
    child: Transform( //<--- This changed
        transform: Matrix4.rotationX(90),
        child: IconButton(icon: Icon(Icons.details), onPressed: () {})),
  ),
  SizedBox(
    height: 8,
  ),
  Text(
    "Historical",
    style: TextStyle(fontFamily: 'AirbnbCerealMedium', fontSize: 12),
  ),
])

【讨论】：

图标消失了，我觉得Matrix4.rotationX(90)这应该是别的东西