skip to Main Content

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

2

Answers


  1. Do you mean doing something like this??

    MaterialStateProperty.all(TextStyle(color: Colors.white))
    
    Login or Signup to reply.
  2. 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});
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search