PP Gradient Text #

A simple and easy-to-use custom text gradient component for Flutter.

Features #

• 🎨 Easy to use: Simple API with sensible defaults
• 🎭 Customizable: Support for any gradient type (Linear, Radial, Sweep)
• 📝 Flexible: Can be used with custom Text widgets via child parameter
• 🎯 Complete control: Full control over text style, alignment, and gradient properties
• 💪 Compatible: Works with all Flutter platforms

Screenshots #

Getting started #

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  pp_gradient_text: ^1.0.0

Then run:

flutter pub get

Import #

Import the package in your Dart code:

import 'package:pp_gradient_text/pp_gradient_text.dart';

Usage #

Basic Usage #

GradientText(
  text: 'Hello Gradient Text!',
)

Custom Colors #

GradientText(
  text: 'Custom Colors',
  gradient: const LinearGradient(
    colors: [Colors.orange, Colors.pink],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  textStyle: const TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
)

Horizontal Gradient #

GradientText(
  text: 'Horizontal Gradient',
  gradient: const LinearGradient(
    colors: [Colors.blue, Colors.green],
    begin: Alignment.centerLeft,
    end: Alignment.centerRight,
  ),
  textStyle: const TextStyle(fontSize: 28, fontWeight: FontWeight.w600),
)

Vertical Gradient #

GradientText(
  text: 'Vertical Gradient',
  gradient: const LinearGradient(
    colors: [Colors.red, Colors.yellow],
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
  ),
  textStyle: const TextStyle(fontSize: 28, fontWeight: FontWeight.w600),
)

Rainbow Gradient #

GradientText(
  text: 'Rainbow Gradient',
  gradient: const LinearGradient(
    colors: [
      Colors.red,
      Colors.orange,
      Colors.yellow,
      Colors.green,
      Colors.blue,
      Colors.indigo,
      Colors.purple,
    ],
    begin: Alignment.centerLeft,
    end: Alignment.centerRight,
  ),
  textStyle: const TextStyle(fontSize: 28, fontWeight: FontWeight.w600),
)

Radial Gradient #

GradientText(
  text: 'Radial Gradient',
  gradient: const RadialGradient(
    colors: [Colors.purple, Colors.blue],
    center: Alignment.center,
    radius: 0.5,
  ),
  textStyle: const TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
)

Using Child Parameter #

GradientText(
  text: 'This won\'t be shown',
  gradient: const LinearGradient(
    colors: [Colors.green, Colors.lime],
  ),
  child: const Text(
    'Using Child Parameter',
    style: TextStyle(
      fontSize: 28,
      fontWeight: FontWeight.w600,
      letterSpacing: 2,
    ),
  ),
)

In Container #

Container(
  padding: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.black,
    borderRadius: BorderRadius.circular(12),
  ),
  child: GradientText(
    text: 'In Black Container',
    gradient: const LinearGradient(
      colors: [Colors.white, Colors.grey],
    ),
    textStyle: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
  ),
)

API Reference #

GradientText #

Example App #

Check out the example directory for a complete example app demonstrating all the features of this package.

To run the example:

cd example
flutter run

Additional information #

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

Issues #

If you encounter any issues, please file an issue on the GitHub repository.

License #

This package is licensed under the MIT License. See the LICENSE file for more information.