Flutter中如何为TextField组件添加渐变效果？

完全可以实现，不需要引入第三方依赖，用Flutter内置组件就能做出你需要的渐变输入框效果，核心是绕开TextField自带的边框属性，用自定义容器实现渐变层，再把输入框的原生边框设为透明即可。

常用渐变效果实现 #

• 渐变描边输入框（对应参考示例的效果）
  实现逻辑：外层用Container承载渐变描边，内部嵌套TextField，通过FocusNode监听输入框聚焦状态，动态调整边框粗细、渐变透明度，交互和原生输入框完全一致。
  完整可运行示例代码：

import 'package:flutter/material.dart';

class GradientBorderTextField extends StatefulWidget {
  const GradientBorderTextField({super.key, this.hintText});
  final String? hintText;

  @override
  State<GradientBorderTextField> createState() => _GradientBorderTextFieldState();
}

class _GradientBorderTextFieldState extends State<GradientBorderTextField> {
  final FocusNode _focusNode = FocusNode();
  bool _inputFocused = false;

  @override
  void initState() {
    super.initState();
    _focusNode.addListener(() {
      setState(() => _inputFocused = _focusNode.hasFocus);
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      // 渐变边框宽度，聚焦时加粗
      padding: EdgeInsets.all(_inputFocused ? 2.0 : 1.0),
      decoration: BoxDecoration(
        // 自定义渐变颜色、方向
        gradient: LinearGradient(
          colors: _inputFocused 
            ? const [Color(0xFF4A90E2), Color(0xFF9013FE)]
            : [Colors.grey.shade400, Colors.grey.shade300],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: TextField(
        focusNode: _focusNode,
        decoration: InputDecoration(
          filled: true,
          fillColor: Colors.white,
          contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
          // 全透明隐藏原生边框
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(7.0),
            borderSide: BorderSide.none,
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(7.0),
            borderSide: BorderSide.none,
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(7.0),
            borderSide: BorderSide.none,
          ),
          hintText: widget.hintText ?? '请输入内容',
          hintStyle: TextStyle(color: Colors.grey.shade500),
        ),
      ),
    );
  }
}

• 渐变输入文字效果
  如果需要输入的文字也带渐变，可以用ShaderMask包裹TextField，给文字着色即可，注意需要把文字样式的颜色设为实色，才能正常显示渐变：

ShaderMask(
  shaderCallback: (Rect bounds) {
    return const LinearGradient(
      colors: [Color(0xFF4A90E2), Color(0xFF9013FE)],
    ).createShader(bounds);
  },
  child: const TextField(
    style: TextStyle(
      color: Colors.white,
      fontSize: 16,
    ),
    decoration: InputDecoration(
      hintText: '渐变文字输入框',
    ),
  ),
)

调参提示：如果要完全匹配参考效果，只需要修改LinearGradient的色值、起始/终止位置，以及Container的圆角、内边距数值即可，不需要改动核心逻辑。

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