web-dev-qa-db-fra.com

Modifier le soulignement de TextField dans Flutter

Je travaille sur une application utilisant Flutter SDK. Lorsque j'utilise un TextField widget et que je le focalise, le soulignement devient bleu. J'ai besoin de changer cette couleur en rouge, comment puis-je le faire? 

Capture d'écran de ce que je dois changer. Je veux juste que le soulignement change, pas la couleur de l'étiquette.

Screenshot of what I need to change.(I want the underline to change, not the label color)

dartflutter
14
Tiziano Gioè

Bien que ces autres réponses puissent en quelque sorte fonctionner, vous devez absolument pas l’utiliser ..__ Ce n’est pas la bonne façon d’obtenir un thème personnalisé dans Flutter.

Une solution beaucoup plus élégante est la suivante:

final theme = Theme.of(context);

return new Theme(
  data: theme.copyWith(primaryColor: Colors.red),
  child: new TextField(
    decoration: new InputDecoration(
      labelText: "Hello",
      labelStyle: theme.textTheme.caption.copyWith(color: theme.primaryColor),
    ),
  ),
);

Dans le même temps, si vous souhaitez simplement afficher une erreur (rouge), utilisez plutôt errorText of InputDecoration. Il définira automatiquement la couleur sur le rouge.

8
Rémi Rousselet

J'ai utilisé InputDecoration.collapsed pour supprimer le séparateur et je change la couleur de la bordure inférieure.

Si vous entrez un nom, la couleur de la bordure inférieure est blue et si vous entrez un nombre ou d'autres caractères spéciaux, la couleur de la bordure inférieure est red.

 demo 

import 'package:flutter/material.Dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const EdgeInsets _padding = const EdgeInsets.symmetric(horizontal: 20.0, vertical: 8.0);
  Color borderColor = Colors.blue;
  bool nameFlag = false;

  @override
  void initState() {
    super.initState();
  }

  void validateName(String value) {
    final RegExp nameExp = new RegExp(r'^[A-Za-z ]+$');
    if (!nameExp.hasMatch(value) || value.isEmpty)
      borderColor = Colors.red;
    else
      borderColor = Colors.blue;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Column(children: <Widget>[
        new Flexible(
          child: new Container(
            margin: _padding,
            padding: _padding,
            child: new TextField(
              decoration: new InputDecoration.collapsed(
                hintText: "Enter Name",
              ),
              onChanged: (s) {
                setState(() => validateName(s));
              },
            ),
            decoration: new BoxDecoration(
              color: Colors.white,
              border: new Border(
                bottom: new BorderSide(color: borderColor, style: BorderStyle.solid),
              ),
            ),
          ),
        )
      ]),
    );
  }
}

Faites-moi savoir si cela répond à votre question :)

4
AjayKumar

Je n'ai pas encore essayé, mais j'ai jeté un œil à la documentation pour vous.

En regardant dans la classe TextField , vous pouvez définir un InputDecoration , qui à son tour possède un InputBorder . Définir ce paramètre sur UnderlineInputBorder avec votre propre BorderSide devrait faire l'affaire, je suppose. Vous pouvez définir la couleur de BorderSide.

Vous pouvez également définir un InputBorder dans le global InputDecorationTheme si vous voulez que tous les champs de texte aient le même style.

0
Rene