Impossible de changer la couleur de la bordure TextField
J'essaie de changer la couleur de la bordure de mon TextField en utilisant un BorderSide, mais cela ne fonctionne pas.
Ceci est mon code ci-dessous.
new TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.teal)
),
hintText: 'Tell us about yourself',
helperText: 'Keep it short, this is just a demo.',
labelText: 'Life story',
prefixIcon: const Icon(Icons.person, color: Colors.green,),
prefixText: ' ',
suffixText: 'USD',
suffixStyle: const TextStyle(color: Colors.green)),
)
)
Une capture d'écran du résultat est présentée ci-dessous.
La nouvelle façon de le faire est d'utiliser enabledBorder comme ceci:
new TextField(
decoration: new InputDecoration(
enabledBorder: const OutlineInputBorder(
borderSide: const BorderSide(color: Colors.grey, width: 0.0),
),
focusedBorder: ...
border: ...
),
)
Cela ne change pas en raison du thème par défaut défini à l'écran.
Il suffit donc de changer les éléments pour le widget que vous dessinez en enveloppant votre TextField de new ThemeData ()
child: new Theme(
data: new ThemeData(
primaryColor: Colors.redAccent,
primaryColorDark: Colors.red,
),
child: new TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.teal)),
hintText: 'Tell us about yourself',
helperText: 'Keep it short, this is just a demo.',
labelText: 'Life story',
prefixIcon: const Icon(
Icons.person,
color: Colors.green,
),
prefixText: ' ',
suffixText: 'USD',
suffixStyle: const TextStyle(color: Colors.green)),
),
));
Le code dans lequel vous modifiez la couleur de primaryColor et primaryColorDark ne modifie pas la couleur officielle de la bordure, uniquement après avoir tapé sur la couleur noire
L'attribut qui doit être changé est hintColor
BorderSide ne devrait pas être utilisé pour cela, vous devez changer de thème.
Pour que la couleur rouge par défaut mette le thème dans MaterialApp(theme: ...) et pour changer le thème d'un widget spécifique, par exemple pour remplacer la couleur rouge par défaut par la couleur jaune du widget, entourez le widget avec:
new Theme(
data: new ThemeData(
hintColor: Colors.yellow
),
child: ...
)
Ci-dessous le code et le gif:
Notez que si nous définissons la couleur primaryColor comme noire, en appuyant sur le widget, il est sélectionné avec la couleur noire.
Mais pour changer le libellé et le texte à l'intérieur du widget, nous devons définir le thème sur InputDecorationTheme
Le widget qui commence par la couleur jaune a son propre thème et le widget qui commence par la couleur rouge a le thème par défaut défini avec la fonction buildTheme()
import 'package:flutter/material.Dart';
void main() => runApp(new MyApp());
ThemeData buildTheme() {
final ThemeData base = ThemeData();
return base.copyWith(
hintColor: Colors.red,
primaryColor: Colors.black,
inputDecorationTheme: InputDecorationTheme(
hintStyle: TextStyle(
color: Colors.blue,
),
labelStyle: TextStyle(
color: Colors.green,
),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
theme: buildTheme(),
home: new HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
String xp = '0';
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(),
body: new Container(
padding: new EdgeInsets.only(top: 16.0),
child: new ListView(
children: <Widget>[
new InkWell(
onTap: () {},
child: new Theme(
data: new ThemeData(
hintColor: Colors.yellow
),
child: new TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder(),
hintText: 'Tell us about yourself',
helperText: 'Keep it short, this is just a demo.',
labelText: 'Life story',
prefixIcon: const Icon(Icons.person, color: Colors.green,),
prefixText: ' ',
suffixText: 'USD',
suffixStyle: const TextStyle(color: Colors.green)),
)
)
),
new InkWell(
onTap: () {},
child: new TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.teal)
),
hintText: 'Tell us about yourself',
helperText: 'Keep it short, this is just a demo.',
labelText: 'Life story',
prefixIcon: const Icon(Icons.person, color: Colors.green,),
prefixText: ' ',
suffixText: 'USD',
suffixStyle: const TextStyle(color: Colors.green)),
)
)
],
),
)
);
}
}
Eh bien, je ne sais vraiment pas pourquoi la couleur affectée à la bordure ne fonctionne pas. Mais vous pouvez contrôler la couleur de la bordure en utilisant d'autres propriétés de bordure du champ de texte. Elles sont:
- disabledBorder: est activé lorsque enabled est défini sur false
- enabledBorder: est activé lorsque enabled est défini sur true (la propriété activée par défaut de TextField est true)
- errorBorder: est activé en cas d'erreur (validation échouée)
- focusBorder: est activé lorsque nous cliquons/concentrons sur le TextField.
- restrictedErrorBorder: est activé en cas d'erreur et nous nous concentrons actuellement sur ce TextField.
Un extrait de code est donné ci-dessous:
TextField(
enabled: false, // to trigger disabledBorder
decoration: InputDecoration(
filled: true,
fillColor: Color(0xFFF2F2F2),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.red),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.orange),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.green),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,)
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.black)
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.yellowAccent)
),
hintText: "HintText",
hintStyle: TextStyle(fontSize: 16,color: Color(0xFFB3B1B1)),
errorText: snapshot.error,
),
controller: _passwordController,
onChanged: _authenticationFormBloc.onPasswordChanged,
obscureText: false,
),
disabledBorder:
enabledBorder:
focusBorder:
errorBorder:
errorFocusedBorder:
J'espère que ça vous aide.
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(color: Colors.red)
),