Pracuję nad aplikacją za pomocą trzepotnego SDK. Kiedy używam a TextField widget, a ja skupić się , podkreślenie staje się niebieskie. Muszę zmienić ten kolor na czerwony, jak mogę to zrobić?

Zrzut ekranu tego, czego potrzebuję, aby się zmienić. Chcę tylko zmienić podkreślenie, , a nie koloru etykiety.

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

29
Tiziano Gioè 9 luty 2018, 16:23

5 odpowiedzi

Najlepsza odpowiedź

Podczas gdy te inne odpowiedzi mogą w jakiś sposób pracować, powinieneś zdecydowanie , a nie użyć go. To nie jest właściwy sposób, aby uzyskać niestandardowy motyw w trzepotanie.

O wiele bardziej eleganckie rozwiązanie jest następujące:

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

W tym samym czasie, jeśli chcesz wyświetlić błąd (czerwony), użyj errorText InputDecoration. Będzie automatycznie ustawił kolor na czerwony.

12
Rémi Rousselet 9 luty 2018, 23:49

Użyłem InputDecoration.collapsed , aby usunąć rozdzielacz i zmieniam kolor dolnej granicy.

Jeśli wprowadzisz nazwę dolny kolor obramowania jest niebieski , a jeśli wprowadzisz numer lub inne znaki specjalne, dolny kolor granicy jest czerwony

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

Daj mi znać, jeśli to odpowiada na twoje pytanie :)

5
Ajay Kumar 9 luty 2018, 17:13

Możesz także zmienić swój kolor, zgodnie z drogami.

  1. Owinąć swój TextField w Theme i zapewnij accentColor

    Theme(
      data: Theme.of(context).copyWith(accentColor: Colors.red),
      child: TextField(),
    )
    
  2. Korzystanie z nieruchomości inputDecoration.

    TextField(
      decoration: InputDecoration(
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.red),
        ),
      ),
    )
    
4
CopsOnRoad 1 sierpień 2019, 12:06

Rozwiązałem, używając:

    TextField(
decoration: InputDecoration(
focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red)),),)
2
Sameh Khemira 15 sierpień 2019, 12:35

Jeszcze nie próbowałem, ale spojrzałem na Dokumenty dla Ciebie.

Patrząc na TextField <<> Możesz ustawić InputDecoration, co z kolei ma Inputorder. Ustawienie do Podnośnie ZIPUTERBERDER z własnym Borderside powinien zrobić sztuczkę. Możesz ustawić kolor bordowskiego.

Można również ustawić wejście w globalnej InputDecorationTheme Jeśli chcesz wszystkie TextFields, aby mieć ten sam styl.

0
Rene 9 luty 2018, 13:42