web-dev-qa-db-de.com

TextField Unterstrich in Flutter ändern

Ich arbeite an einer Anwendung, die Flutter SDK verwendet. Wenn ich ein TextField - Widget verwende und es fokussiere, wird die Unterstreichung blau. Ich muss diese Farbe in Rot ändern. Wie kann ich das tun? 

Screenshot von dem, was ich ändern muss. Ich möchte nur die Unterstreichung ändern, nicht die Etikettenfarbe.

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

14
Tiziano Gioè

Während diese anderen Antworten irgendwie funktionieren können, sollten Sie auf jeden Fall nicht verwenden.

Eine viel elegantere Lösung ist wie folgt:

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),
    ),
  ),
);

Wenn Sie nur einen Fehler anzeigen möchten (rot), verwenden Sie stattdessen errorText von InputDecoration. Die Farbe wird automatisch auf Rot gesetzt.

8
Rémi Rousselet

Ich habe InputDecoration.collapsed verwendet, um den Teiler zu entfernen, und ich ändere die Farbe des unteren Randes.

Wenn Sie einen Namen eingeben, ist die untere Randfarbe blau und wenn Sie eine Zahl oder andere Sonderzeichen eingeben, ist die untere Randfarbe rot.

 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),
              ),
            ),
          ),
        )
      ]),
    );
  }
}

Lass es mich wissen, wenn dies deine Frage beantwortet :)

4
AjayKumar

Sie können die Farbe auch folgendermaßen ändern.

  1. Wickle dein TextField in Theme und gib accentColor an

    Theme(
      data: Theme.of(context).copyWith(accentColor: Colors.red),
      child: TextField(),
    )
    
  2. Mit der Eigenschaft inputDecoration.

    TextField(
      decoration: InputDecoration(
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.red),
        ),
      ),
    )
    
0
CopsOnRoad

Ich habe gelöst mit:

    TextField(
decoration: InputDecoration(
focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red)),),)
0
Sameh Khemira

Ich habe es noch nicht ausprobiert, aber ich habe mir die Unterlagen für Sie angeschaut.

Wenn Sie sich die Klasse TextField anschauen, können Sie eine InputDecoration festlegen, die wiederum eine InputBorder hat. Wenn Sie diese Einstellung auf einen UnderlineInputBorder mit Ihrer eigenen BorderSide setzen, sollte dies vermutlich der Trick sein. Sie können die Farbe der BorderSide einstellen.

Sie können einen InputBorder auch in der globalen InputDecorationTheme festlegen, wenn alle Textfelder den gleichen Stil haben sollen.

0
Rene