Flutter中如何修改TextFormField的标签文本与边框颜色？

要把TextFormField的边框和labelText改成紫色，你需要在InputDecoration中配置不同状态下的边框样式，以及标签文字的颜色，具体操作如下：

关键修改点： #

• 定义统一的紫色值，方便复用
• 配置border（默认边框）、enabledBorder（未聚焦且可用状态）、focusedBorder（聚焦状态）的边框颜色
• 设置labelStyle指定标签文字的颜色

修改后的完整代码： #

import 'package:flutter/material.dart';

class InputTextFormField extends StatefulWidget {
  final String labelText;
  TextEditingController? controller;

  InputTextFormField({Key? key, required this.labelText, required this.controller});

  @override
  _InputTextFormFieldState createState() => _InputTextFormFieldState();
}

class _InputTextFormFieldState extends State<InputTextFormField> {
  // 定义紫色常量，可根据需求调整色值
  static const _purpleColor = Colors.purple;

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      decoration: InputDecoration(
        alignLabelWithHint: true,
        labelText: widget.labelText,
        // 设置标签文字颜色
        labelStyle: const TextStyle(color: _purpleColor),
        // 默认边框样式
        border: const OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(12.0)),
          borderSide: BorderSide(color: _purpleColor),
        ),
        // 未聚焦且可用状态的边框
        enabledBorder: const OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(12.0)),
          borderSide: BorderSide(color: _purpleColor),
        ),
        // 聚焦状态的边框（可适当加粗区分）
        focusedBorder: const OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(12.0)),
          borderSide: BorderSide(color: _purpleColor, width: 2.0),
        ),
      ),
      validator: (value) => value!.isEmpty ? 'Please, fill this field.' : null,
      controller: widget.controller,
    );
  }
}

额外说明： #

• 如果需要调整紫色的具体色值，可以替换Colors.purple为自定义的Color(0xFF你的十六进制色值)，比如Color(0xFF9C27B0)是标准的深紫色
• 聚焦状态的边框设置了width: 2.0，可以让用户更清晰地感知输入框处于激活状态，不需要的话可以去掉该参数

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