如何改变文本字段提示颜色？

小开

最佳答案

You can do with hintStyle: in InputDecoration

TextField(
style: TextStyle(fontSize: 20),
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(fontSize: 20.0, color: Colors.redAccent),
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.teal,
),
),
prefixIcon: const Icon(
Icons.security,
color: Colors.white,
),
),
),

小开

As an addition to the accepted answer, to update the focused hint decoration you have to update the app's Theme.

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Colors.white,
inputDecorationTheme: const InputDecorationTheme(
labelStyle: TextStyle(color: Colors.black),
hintStyle: TextStyle(color: Colors.grey),
)),
home: MainScreen(),
);
}

小开

After digging the source code for the InputDecorator used to determine the label color, here's what I found.

TextStyle _getFloatingLabelStyle(ThemeData themeData) {
final Color color = decoration.errorText != null
? decoration.errorStyle?.color ?? themeData.errorColor
: _getActiveColor(themeData);
final TextStyle style = themeData.textTheme.subtitle1.merge(widget.baseStyle);
return style
.copyWith(color: decoration.enabled ? color : themeData.disabledColor)
.merge(decoration.labelStyle);
}


Color _getActiveColor(ThemeData themeData) {
if (isFocused) {
switch (themeData.brightness) {
case Brightness.dark:
return themeData.accentColor;
case Brightness.light:
return themeData.primaryColor;
}
}
return themeData.hintColor;
}

In short, to change the hint color, set hintColor using Theme and ThemeData.

Another tip: to change the label color, set the primaryColor light theme, or accentColor for dark theme.

ThemeData.dark().copyWith(
primaryColor: Colors.red,
accentColor: Colors.white,
hintColor: Colors.pink,
)

小开

change both hintStyle and labelStyle

TextFormField(
decoration: InputDecoration(
hintText: 'username@mail.com',
labelText: 'Email',
hintStyle: TextStyle(color: Colors.white), # change to your color
labelStyle: TextStyle(color: Colors.white), # change color
))

小开

TextField(
decoration: InputDecoration(
hintText: 'your hint',
hintStyle: Theme.of(context).textTheme.caption.copyWith(
fontSize: 20,
fontWeight: FontWeight.w600,
color: ColorConstants.kTextColor,  <--- // Set Your Own Color
),

小开

If you want to change the hintColor of all the TextField Widget in the app, you can apply it in the Theme.

example code:

import 'package:flutter/material.dart';


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


class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.light().copyWith(
hintColor: Colors.orange,
),
home: Scaffold(
body: Column(children: [
TextField(
decoration: InputDecoration(
hintText: "Email",
),
),
TextField(
decoration: InputDecoration(
hintText: "Password",
),
),
]),
),
);
}
}