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

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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