How to get the theme that comes with the component in Flutter

user_10642055 0
Viewed 1465

How to get the theme that comes with the component in Flutter, such as TextFormField, how do I get the style that comes with his default decoration

I tried the following way, but the obtained theme attributes is null

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: TestPage(),
    );
  }
}

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    var inputTheme = Theme.of(context).inputDecorationTheme;
    print(inputTheme.labelStyle); // is null
    print(inputTheme.fillColor); // is null
    
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test'),
      ),
      body: TextFormField(),
    );
  }
}

enter image description here

flutter
3 Answers

Theme.of(context).inputDecorationTheme

will get you the theme thats used with InputField

Theme.of(context)

will get you everything related to your app theme

try copyWith() and apply() to play around or apply the theme to a component

Theme.of(context).inputDecorationTheme.copyWith();

user_123410990

Some themes depends on the state of the widget itself. That is the case for InputDecoration.

To get the internal theme of a widget what you need is to either get this property if the widget exposes it (which is rare), or intercept it somehow by overriding the class and methods and getting the theme after it is created. That is difficult because usually it runs after the build.

One option is to look at the source code of the widget and copy the code that build the theme into your own code.

For example for InputDecoration.:

TextStyle _getHelperStyle(ThemeData themeData) {
    final Color color = decoration!.enabled ? themeData.hintColor : Colors.transparent;
    return themeData.textTheme.caption!.copyWith(color: color).merge(decoration!.helperStyle);
  }

Another option is to create your own theme, set the properties you need and get them after.

user_143909820

Is the parent of TestPage a MaterialApp widget? It should look something like this:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'YOUR APP NAME',
      theme: ThemeData( //can be omitted if you want the default theme
        primarySwatch: Colors.blue,
      ),
      home: TestPage(),
    );
  }
}

EDIT:

If no InputDecorationTheme is passed to your ThemeData flutter will pass an 'empty' InputDecorationTheme. You can change it for your entire app by creating a ThemeData object and passing it your own InputDecorationTheme.

For example:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'YOUR APP NAME',
      theme: ThemeData.light().copyWith(
        inputDecorationTheme: InputDecorationTheme(
          labelStyle: TextStyle(), //your custom label style
          fillColor: Colors.orange  //your colour of preference
        ),
      ),
      home: TestPage(),
    );
  }
}

Or pass an InputDecoration object to your TextFormField directly

TextFormField(
  decoration: InputDecoration(
    //change what you want in here
  )
)
user_67040330
Related