Gradient Text Effect in Flutter Without Package

In this Flutter tutorial, we will explore how to create a gradient text effect using the ShaderMask widget. We'll build a sample HomeScreen widget that displays a gradient text with a shadow effect. Let's dive into the code step by step.

Step 1: Defining the HomeScreen Widget To begin, we define a stateless widget called HomeScreen. This widget will serve as the main screen of our application.

class HomeScreen extends StatelessWidget {
  // ...
}

Step 2: Initializing Variables Inside the HomeScreen class, we initialize two variables: gradient and textStyle. These variables will be used to define the properties of the gradient and text style applied to the text widget.

final gradient = LinearGradient(
  begin: Alignment.topCenter,
  end: Alignment.centerLeft,
  colors: [
    Colors.blueAccent,
    Colors.redAccent,
    Colors.amber,
  ],
);

final textStyle = TextStyle(
  fontSize: 50,
  fontWeight: FontWeight.bold,
  shadows: [
    BoxShadow(
      color: Colors.white,
      spreadRadius: 5,
      offset: Offset(1, 1),
    ),
  ],
);

• gradient: We create a LinearGradient object with a vertical gradient that starts from the top center and ends at the center left of the screen. The gradient consists of three colors: Colors.blueAccent, Colors.redAccent, and Colors.amber.
• textStyle: We define a TextStyle object with a font size of 50 and a bold font weight. Additionally, we provide a list of shadows using the shadows property. In this case, we add a single BoxShadow with a white color, a spread radius of 5, and an offset of (1, 1), creating a subtle shadow effect.

Step 3: Building the Widget Tree In the build method of the HomeScreen widget, we construct the widget tree for our screen.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: ShaderMask(
        shaderCallback: (bounds) {
          return gradient.createShader(
            Rect.fromLTWH(0, 0, bounds.width, bounds.height),
          );
        },
        child: Text(
          "DO NOT\nUSE\nPACKAGE\nFOR THIS",
          style: textStyle,
        ),
      ),
    ),
  );
}

• Scaffold: We start by returning a Scaffold widget, which provides a basic layout structure for our screen.

• Center: Inside the Scaffold, we place a Center widget to horizontally and vertically align its child.

• ShaderMask: We use the ShaderMask widget as the child of the Center widget. The ShaderMask applies a shader effect to its child widget.

  • shaderCallback: The shaderCallback property of ShaderMask takes a function that creates a shader. In this case, we create a shader using the gradient.createShader() method. We pass a Rect to define the bounds of the shader, which is obtained from the bounds parameter of the shaderCallback function.
  • Text: We use the Text widget as the child of ShaderMask. It displays the text “DO NOT\nUSE\nPACKAGE\nFOR THIS” and applies the textStyle we defined earlier.

Step 4: Running the App To see the gradient text effect in action, we need to run the app. Ensure that you have set up the Flutter development environment correctly and can run Flutter applications.

Conclusion: In this tutorial, we learned how to create a gradient text effect using the ShaderMask widget in Flutter. We explored the step-by-step implementation of a HomeScreen widget that displays a gradient text with a shadow effect. You can customize the gradient colors, text style, and shader bounds to create various unique and visually appealing text effects in your Flutter applications.

---

See Also