How to use Theme.of(context) to add color to labelTextStyle

Question

In the general ThemeData of my flutter app, I have the following code to give a general style to the NavigationBar. This is the way to style the label under the icon within NavigationBarTheme, based on the doc.

In the class that handles the Navigation, so elsewhere in the app, I need to add color property to the TextStyle, maintaining the other properties via Theme.of(context).

But how can I do this with WidgetStateProperty.all?

Thanks in advance!

@override
Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData(
      navigationBarTheme: NavigationBarThemeData(
        labelTextStyle: WidgetStateProperty.all(
          const TextStyle(
            fontSize: 16.0,
            fontWeight: FontWeight.w700,
            letterSpacing: 1.0,
          ),
        ),
      ),
    ),
  );
}

@Md. Yeasin Sheikh the theme is general at the beginning of the app, and I need to set color elsewhere in the app, then using Theme.of(context).copyWith, but I don't know how to do it with WidgetStateProperty.all — Giulia Santoiemma
– Giulia Santoiemma, Commented May 21, 2024 at 17:06
@pskink yes, I want to add color to TextStyle inside labelTextStyle — Giulia Santoiemma
– Giulia Santoiemma, Commented May 21, 2024 at 17:34
if you want to add a new property to ThemeData then why are you using NavigationBarThemeData? — pskink
– pskink, Commented May 21, 2024 at 17:38

Dhafin Rayhan · Accepted Answer · 2024-05-23 08:58:34Z

You can resolve the WidgetStateProperty for all the possible states (since you're applying the same style to every states anyway) to get the underlying TextStyle and use copyWith on that resolved value.

final theme = Theme.of(context);

final navigationBarTheme = theme.navigationBarTheme;

// Resolve the WidgetStateProperty for all possible states to get the underlying TextStyle
final labelTextStyle = navigationBarTheme.labelTextStyle!.resolve({...WidgetState.values})!;

final newTheme = theme.copyWith(
  navigationBarTheme: navigationBarTheme.copyWith(
    labelTextStyle: WidgetStatePropertyAll(
      labelTextStyle.copyWith(color: Colors.green),
    ),
  ),
);

You can also make extension methods to help with these tasks:

extension WidgetStatePropertyX<T> on WidgetStateProperty<T> {
  T resolveAll() => resolve({...WidgetState.values});

  WidgetStatePropertyAll<T> copyAll(T Function(T) transformer) {
    final newValue = transformer(resolveAll());
    return WidgetStatePropertyAll(newValue);
  }
}

And the usage is now much simpler:

final theme = Theme.of(context);

final navigationBarTheme = theme.navigationBarTheme;

final newTheme = theme.copyWith(
  navigationBarTheme: navigationBarTheme.copyWith(
    labelTextStyle: navigationBarTheme.labelTextStyle!
        .copyAll((textStyle) => (textStyle!.copyWith(color: Colors.green))),
  ),
);

John Wiese · Accepted Answer · 2024-05-21 19:37:17Z

0

Do you mean doing something like this??

MaterialStateProperty.all(TextStyle(color: Colors.white))

answered May 21, 2024 at 19:37

John Wiese

665 bronze badges

2 Comments

Giulia Santoiemma Over a year ago

this way the other font properties declared in the main ThemeData are overridden

John Wiese Over a year ago

Huh? what is your scenario, aren't you just trying to change a specific property on a widget at the local level, thus overriding the default theme? If so just set the color property there and it will override the theme entry for that single property and nothing else.

Collectives™ on Stack Overflow

How to use Theme.of(context) to add color to labelTextStyle

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related