Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set TextFromField style in Theme

So in my flutter app, I create TextFormField to use as an input like so (and return it in a scaffold):

final password = TextFormField(
      controller: passController,
      autofocus: false,
      obscureText: true,
      decoration: InputDecoration(hintText: 'Password'),
      style: new TextStyle(color: Colors.orange),
);

I would like to change the style property inside a themeData, but I couldn't find which property to specify.

The closest one I could get to was textTheme: new TextTheme(body1: new TextStyle(color: Colors.orange)), but this one does nothing to my TextFormField.

How can I set the TextFormField style? Please help, I'm really new to Dart and also programming. I'm currently 13 and I have nobody to help me out with these types of things.

P.S: The complete code is on GitHub if needed: https://github.com/Legolaszstudio/novynotifier

like image 430
NovyLevi Avatar asked Nov 18 '19 19:11

NovyLevi


People also ask

How do you change the TextField theme in Flutter?

Here is the step by step instructions: Step 1: Locate the file where you have placed the TextField widget. Step 2: Inside the TextField widget, add the style parameter and assign the TextField widget. Step 3: Inside the TextField widget, add the color parameter and set the color of your choice.

What is the difference between TextField and TextFormField in Flutter?

The main difference between TextFormField and TextField is that the TextFormField widget uses the Form widget, which can contain multiple TextField widgets.

How do you change the theme on Flutter?

Applying the Theme: To override the default theme of a widget in Flutter one can wrap the same widget inside the Theme widget. A Themedata() instance can be created and passed to the respective widget as shown below: Dart.


2 Answers

Update:

If you want to change the Text within TextField by Theme of your Flutter App. It's now subtitle1 of TextTheme.

textTheme: TextTheme(
    subtitle1: TextStyle(color: Colors.blue),
)
like image 190
Bliv_Dev Avatar answered Sep 26 '22 14:09

Bliv_Dev


Uhm! That's a long question. TextFormField are subclass of the TextField. The default style of TextField could be found from source below.

final TextStyle style = themeData.textTheme.subhead.merge(widget.style);

So, you have 2 solutions for your source code.

Solution 1

  • Delete style property are inputted to password.
final password = TextFormField(
  controller: passController,
  autofocus: false,
  obscureText: true,
  decoration: InputDecoration(hintText: 'Password'),
  style: new TextStyle(color: Colors.orange), // ★ => Delete this.
);
  • Define a custom subhead style from DataTheme and input into Material app.
MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      subhead: TextStyle(color: Colors.orange),
    ),
  ),
  home: null,
)

Solution 2

  • Define a custom subhead style from DataTheme and input into Material app.
MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      subhead: TextStyle(color: Colors.orange),
    ),
  ),
  home: null,
)
  • Copy this subhead style into password
final themes = Theme.of(context);
final password = TextFormField(
  controller: passController,
  autofocus: false,
  obscureText: true,
  decoration: InputDecoration(hintText: 'Password'),
  style: themes.textTheme.subhead, // ★ => Update this.
);
like image 22
Trần Đức Tâm Avatar answered Sep 23 '22 14:09

Trần Đức Tâm