Question

我希望图标details指向上方，如图所示。但是材料图标列表的图标details指向下方，因此如何在我的flutter项目中旋转材质图标，而无需下载图标图像。

main.dart

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),),
                    ],
                  ),

Answer 1

另一个解决方案是：

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

Answer 2

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

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

Answer 3

一种解决方案是使用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),),
                      ],
                    ),

Answer 4

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

Answer 5

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

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

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

5 个答案: