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
:
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)