how to use LinearGradient in flutter with transform?

Issue

how to use LinearGradient in flutter with transform?

decoration: BoxDecoration(
    gradient: LinearGradient(
    colors: [Colors.black, Colors.white],
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    transform: ???,
  )
 ),

Solution

You can use GradientRotation class, which extends the GradientTransform class. It takes an angle in radians as an argument and rotates the shader in the clockwise direction

Here is an example of GradientRotation:

Container(
        padding: const EdgeInsets.all(15),
        child: Text(title,
            style: TextStyle(
                fontFamily: 'RobotoCondensed',
                fontSize: 20,
                color: Colors.white)),
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            transform: GradientRotation(pi/2),
            colors: [
              color.withOpacity(0.5),
              color.withOpacity(0.55),
              color.withOpacity(0.65),
              color.withOpacity(0.75),
              color.withOpacity(0.85),
            ],
            begin: Alignment.centerRight,
            end: Alignment.bottomRight,
            stops: [0, 0.1, 0.2, 0.3, 0.4],
          ),
          borderRadius: BorderRadius.circular(15),
        ),

Here are the snapshots of the application of GradientRoation:

Without GradientRotation

With 90 degree rotation in clockwise direction

In the first image, I have not used GradientRotation; in the second image, I have passed 90 degrees (pi/2 radians) as an argument and, as a result it, has been rotated in the clockwise direction by 90 degrees.

Try to hot reload your application to see the change if hot restart fails.

Answered By – Rishabh Mishra

Answer Checked By – Pedro (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.