fade_text 1.0.0

A Flutter widget that renders text with a smooth horizontal fade (gradient mask) at the leading and/or trailing edge.

example/lib/main.dart

import 'package:fade_text/fade_text.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FadeText Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const DemoPage(),
    );
  }
}

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  late final TapGestureRecognizer _tapRecognizer;

  @override
  void initState() {
    super.initState();
    _tapRecognizer = TapGestureRecognizer()
      ..onTap = () {
        // Use debugPrint so tests can capture output more reliably.
        debugPrint('Tapped on faded text!');
      };
  }

  @override
  void dispose() {
    _tapRecognizer.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('FadeText Showcase')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          const Text(
            'Simple usage:',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          const FadeText(
            'This is a long text that will fade at the end.',
            fadeDirection: FadeDirection.trailing,
            fadeWidth: 40,
            style: TextStyle(fontSize: 18),
          ),
          const SizedBox(height: 24),

          const Text(
            'Fade at the start:',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          const FadeText(
            'This is a long text that will fade at the start.',
            fadeDirection: FadeDirection.leading,
            fadeWidth: 40,
            style: TextStyle(fontSize: 18),
          ),
          const SizedBox(height: 24),

          const Text(
            'Fade on both sides:',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          const FadeText(
            'This is a long text that will fade at both the start and the end.',
            fadeDirection: FadeDirection.both,
            fadeWidth: 40,
            style: TextStyle(fontSize: 18),
          ),
          const SizedBox(height: 24),

          const Text(
            'Multi-line fade:',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          const SizedBox(
            width: 200,
            child: FadeText(
              'This is a very long text that will wrap to multiple lines and fade at the end of the last line.',
              fadeDirection: FadeDirection.leading,
              fadeWidth: 40,
              style: TextStyle(fontSize: 18),
              maxLines: 2,
              ellipsis: '...',
            ),
          ),
          const SizedBox(height: 24),

          const Text(
            'Rich text (different styles):',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          FadeText.rich(
            TextSpan(
              children: [
                const TextSpan(
                  text: 'Bold ',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.blue,
                  ),
                ),
                const TextSpan(
                  text: 'and ',
                  style: TextStyle(color: Colors.black),
                ),
                const TextSpan(
                  text: 'faded ',
                  style: TextStyle(
                    fontStyle: FontStyle.italic,
                    color: Colors.red,
                  ),
                ),
                TextSpan(
                  text: 'text!',
                  style: TextStyle(
                    decoration: TextDecoration.underline,
                    color: Colors.green,
                  ),
                  recognizer: _tapRecognizer,
                ),
              ],
            ),
            fadeDirection: FadeDirection.both,
            fadeWidth: 40,
            style: const TextStyle(fontSize: 18),
          ),
          const SizedBox(height: 24),
          const Text(
            'RTL text:',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          const Directionality(
            textDirection: TextDirection.rtl,
            child: FadeText(
              'هذا نص طويل باللغة العربية مع fade effect',
              fadeDirection: FadeDirection.leading,
              fadeWidth: 40,
              style: TextStyle(fontSize: 18),
            ),
          ),
        ],
      ),
    );
  }
}