如何在Flutter中实现类似Instagram的多色TextField？

要实现类似Instagram的多色渐变输入框，核心是利用ShaderMask组件为文本（包括提示文本和输入内容）添加渐变效果，以下是两种常见场景的实现方案：

方案一：输入内容与提示文本均渐变 #

创建一个可复用的渐变输入框组件，让输入的文字和提示文字都呈现多色渐变效果：

import 'package:flutter/material.dart';

class GradientTextField extends StatefulWidget {
  final String hintText;
  final TextStyle? textStyle;

  const GradientTextField({
    super.key,
    required this.hintText,
    this.textStyle,
  });

  @override
  State<GradientTextField> createState() => _GradientTextFieldState();
}

class _GradientTextFieldState extends State<GradientTextField> {
  final TextEditingController _controller = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    // 定义Instagram风格的线性渐变色彩
    final gradient = LinearGradient(
      colors: [Colors.pink.shade400, Colors.purple.shade400, Colors.blue.shade400],
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
    );

    return ShaderMask(
      shaderCallback: (bounds) => gradient.createShader(Rect.fromLTWH(0, 0, bounds.width, bounds.height)),
      blendMode: BlendMode.srcIn, // 让渐变仅作用于文本内容
      child: TextField(
        controller: _controller,
        style: widget.textStyle ?? const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
        decoration: InputDecoration(
          hintText: widget.hintText,
          hintStyle: widget.textStyle ?? const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
          border: const OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
          enabledBorder: const OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
        ),
      ),
    );
  }
}

使用示例 #

在页面中直接调用该组件即可：

Scaffold(
  appBar: AppBar(title: const Text('渐变输入框示例')),
  body: Padding(
    padding: const EdgeInsets.all(16.0),
    child: GradientTextField(hintText: '分享你的故事...'),
  ),
);

方案二：仅提示文本渐变 #

如果只需要提示文字呈现多色渐变，输入内容保持普通颜色，可以自定义InputDecoration的hint属性：

TextField(
  style: const TextStyle(color: Colors.black, fontSize: 16),
  decoration: InputDecoration(
    border: const OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
    enabledBorder: const OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
    // 给提示文本单独添加渐变效果
    hint: ShaderMask(
      shaderCallback: (bounds) => LinearGradient(
        colors: [Colors.pink.shade400, Colors.purple.shade400, Colors.blue.shade400],
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
      ).createShader(Rect.fromLTWH(0, 0, bounds.width, bounds.height)),
      blendMode: BlendMode.srcIn,
      child: const Text('分享你的故事...'),
    ),
  ),
)

关键说明 #

• ShaderMask的blendMode: BlendMode.srcIn是核心，它能让渐变只覆盖文本区域，不会影响输入框的边框等其他元素。
• 你可以根据需求调整LinearGradient的colors、begin和end参数，自定义渐变的色彩和方向。

内容的提问来源于stack exchange，提问作者Mohammad Hosseini