In Chapter 2, Hello, Flutter, Section, Styling your app, we theme our app like this:
@override
Widget build(BuildContext context) {
final ThemeData theme = ThemeData();
return MaterialApp(
title: 'Recipe Calculator',
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(
primary: Colors.grey,
secondary: Colors.black,
),
),
home: const MyHomePage(title: 'Recipe Calculator'),
);
}
Not liking the creation of an intermediate variable, theme
, I changed it as follows:
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Recipe Calculator',
theme: ThemeData(
colorScheme: Theme.of(context).colorScheme.copyWith(
primary: Colors.grey,
secondary: Colors.black,
),
),
home: const MyHomePage(title: 'Recipe Calculator'),
);
}
So far so good—no visual differences. However, rather than using the ThemeData()
constructor, my first attempt was instead using ThemeData.from()
, like this:
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Recipe Calculator',
theme: ThemeData.from(
colorScheme: Theme.of(context).colorScheme.copyWith(
primary: Colors.grey,
secondary: Colors.black,
),
),
home: const MyHomePage(title: 'Recipe Calculator'),
);
}
The results, however, are not the same. When using ThemeData.from()
, the background color of the screen is blue, whereas when using ThemeData()
, the background is white.
The documentation for ThemeData.from()
states:
Create a ThemeData based on the colors in the given
colorScheme
…
Whereas, the documentation of ThemeData() constructor
does not specifically mention anything about the colorScheme
other than that Material components use it. Not getting into the documentation, one would logically guess that the constructor ought to create a ThemeData
instance with its colors in the given colorScheme
, just like ThemeData.from()
does.
So I fail to understand the difference.
Can someone shed some light on when to prefer one of these constructors over the other?