CODEWITHSUNDEEP
flutterdartflutter-layout
Tushar Rai
Tushar Rai

Reputation: 2519

How to rotate material icon in flutter without animation?

enter image description here

I want the icon details to point upward like as shown in the image. but the list of material icon has icon details points to downward, so how can I rotate the material icon in my flutter project, without downloading the icon image.

enter image description here


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

Upvotes: 44

Views: 63020

Answers (5)

gsm
gsm

Reputation: 2426

If you want to rotate icons like arrow_forward_ios, could help following code.

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

Upvotes: 6

Jordan Davies
Jordan Davies

Reputation: 10861

You can wrap your IconButton in a Transform widget using the rotate constructor:

import 'dart:math' as math;

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

Upvotes: 81

key
key

Reputation: 1404

One solution could be to use the Transform widget. 

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

Upvotes: 2

codepilot
codepilot

Reputation: 795

Another solution is:

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

Upvotes: 68

Tushar Rai
Tushar Rai

Reputation: 2519

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

Upvotes: 32

Related Questions