Flutter Text Foreground Gradient Demonstration

main.dart

import 'dart:ui' as ui;

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Gradient Test',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new CustomPaint(
        painter: new GradientPainter(),
      ),
    );
  }
}

class GradientPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final fullRect = new Rect.fromLTWH(0.0, 0.0, size.width, size.height);

    final gradient = new LinearGradient(
      colors: [
        Color(0xffff0000),
        Color(0xffffff00),
        Color(0xff00ff00),
        Color(0xff00ffff),
        Color(0xff0000ff),
        Color(0xffff00ff),
        Color(0xffff0000),
      ],
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
    );

    final gradientPaint = new Paint()..shader = gradient.createShader(fullRect);

    final paragraphStyle = new ui.ParagraphStyle(
      fontSize: 60.0,
      textAlign: TextAlign.center,
    );
    final paragraphBuilder = new ui.ParagraphBuilder(paragraphStyle)
      ..pushStyle(new ui.TextStyle(foreground: gradientPaint))
      ..addText('TEST');
    final paragraph = paragraphBuilder.build();
    paragraph.layout(new ui.ParagraphConstraints(width: size.width / 2));

    // white background
    canvas.drawRect(fullRect, new Paint()..color = Colors.white);

    // full gradient on the left
    final halfRect = new Rect.fromLTWH(0.0, 0.0, size.width / 2, size.height);
    canvas.drawRect(halfRect, gradientPaint);

    // text on the right
    final offset1 = new Offset(size.width * 0.5, size.height * 0.33);
    canvas.drawParagraph(paragraph, offset1);

    final offset2 = new Offset(size.width * 0.5, size.height * 0.66);
    canvas.drawParagraph(paragraph, offset2);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}