CODEWITHSUNDEEP
flutter
zhengliang
zhengliang

Reputation: 293

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

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

Upvotes: 2

Views: 3532

Answers (3)

Roddy R
Roddy R

Reputation: 1470

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.

Upvotes: 1

Er1
Er1

Reputation: 2758

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

Upvotes: 0

Yadu
Yadu

Reputation: 3305

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

Upvotes: 1

Related Questions