Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I change the color of an string-input in a TextField?

Tags:

flutter

dart

I am working in the styles of my app, i am not able to change the color of the input of the TextField, there isn't any property to change it.

 Theme(             data: new ThemeData(               hintColor: Colors.white             ),             child:         TextField(           focusNode: _focusUsername,           controller: _controller,           decoration: InputDecoration(             border: InputBorder.none,             fillColor: Colors.grey,             filled: true,             hintText: 'Username',           ))), 
like image 610
Mauricio De armas Avatar asked May 04 '18 11:05

Mauricio De armas


People also ask

How do I change text color in Textformfield?

You are changing input text color in this line TextStyle(fontSize: 20.0, color: textTheme. button. color) , so in order to set in to white just use Colors. white constant instead of textTheme.

How do I change the color of a TextField hint?

Step 2: Inside the TextField widget, add the decoration parameter and assign the InputDecoration widget. Step 3: Inside the InputDecoration widget, add the hintStyle parameter and assign the TextStyle widget. Step 4: Inside the TextStyle , add color parameter and set the color of your choice.

How do you change the color of the TextField underline?

You can change the TextField underline color globally by defining the inputDecorationTheme and then adding the UnderlineInputBorder widget. Inside the UnderlineInputBorder widget, you can specify which type of border you want to change. for example, enabledBorder , focusedBorder , and so on, and then assign the color.

How do you give text a color in Flutter?

Steps. Step 1: Locate the file where you have placed the Text widget. Step 2: Inside the Text widget, add the Style parameter and assign the TextStyle widget. Step 3: Inside the TextStyle widget, add the color parameter and set the color of your choice.


2 Answers

You can assign a TextStyle

TextField(   style: TextStyle(color: Colors.white),   ... ) 

https://docs.flutter.io/flutter/painting/TextStyle-class.html

like image 86
Günter Zöchbauer Avatar answered Oct 23 '22 18:10

Günter Zöchbauer


In the example bellow, text is 'red' and the background of the TextField is 'orange'.

TextField(   style: TextStyle(color: Colors.red),   decoration: InputDecoration(fillColor: Colors.orange, filled: true), ) 

Is that what you mean?

If you want to do it generically through the app's theme, it's indeed tricky. It's probably going to be something like that:

theme: ThemeData(     textTheme: TextTheme(       bodyText1: TextStyle(color: Colors.black),       bodyText2: TextStyle(color: Colors.black),       button: TextStyle(color: Colors.black),       caption: TextStyle(color: Colors.black),       subtitle1: TextStyle(color: Colors.red), // <-- that's the one       headline1: TextStyle(color: Colors.black),       headline2: TextStyle(color: Colors.black),       headline3: TextStyle(color: Colors.black),       headline4: TextStyle(color: Colors.black),       headline5: TextStyle(color: Colors.black),       headline6: TextStyle(color: Colors.black),     ),     inputDecorationTheme: InputDecorationTheme(       fillColor: Colors.orange,       filled: true,     ) ) 
like image 25
Feu Avatar answered Oct 23 '22 17:10

Feu