flutter - 如何从父小部件获取原色？

Question

I have this code in my flutter app:

return ParentThemeWidget{
  child: MyChildWidget(
     backgroundColor: Theme.of(context).primaryColor,
     ....
  )
}

this is my ParentThemeWidget:

@override
Widget build(BuildContext context) {
  ThemeData themeData = ThemeData(primaryColor: MyColor);
  return Theme(data: themeData, child: child);
}

but this code:

Theme.of(context).primaryColor

return not MyColor, this return primaryColor for app level. How fix it? how do I get the MyColor in MyChildWidget?

Answer 1

Themes should be defined in main as root of your project, here is an approach that can help you with it. When building MaterialApp use:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  static final _themes = Themes();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
          // ... your configuration

          darkTheme: ThemeData.dark().copyWith(),

          theme: ThemeData(
              primarySwatch: Colors.indigo,
              primaryColor: _themes.primaryColor,
              appBarTheme: _themes.getAppBarTheme(),
              floatingActionButtonTheme: _themes.getFabTheme(),
              outlinedButtonTheme: _themes.outlinedButtonTheme(),
              elevatedButtonTheme: _themes.elevatedButtonTheme(),
              listTileTheme: _themes.listTileTheme(),
              inputDecorationTheme: _themes.inputDecorationTheme()
          ),
     );
  }
}

As you can see, there is a class that I defined called Themes(), this themes are shared across all widgets in the application.

import 'package:flutter/material.dart';

class Themes {
  final primaryColor = const Color.fromRGBO(48, 46, 122, 1);
  final secondaryColor = Colors.indigo;
  final filledColor = Colors.white;

  getAppBarTheme() {
    return const AppBarTheme().copyWith(backgroundColor: primaryColor);
  }

  getFabTheme() {
    return const FloatingActionButtonThemeData()
        .copyWith(backgroundColor: secondaryColor);
  }

  outlinedButtonTheme() {
    return OutlinedButtonThemeData(
        style: OutlinedButton.styleFrom(
            primary: secondaryColor,
            side: BorderSide(width: 1, color: secondaryColor),
            backgroundColor: const Color.fromRGBO(236, 236, 254, 1),
            padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 15),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(5))));
  }

  elevatedButtonTheme() {
    return ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
            primary: secondaryColor, // Button color
            padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 15),
            tapTargetSize: MaterialTapTargetSize.shrinkWrap,
            minimumSize: Size.zero,
            onPrimary: Colors.white, // Text color
            elevation: 0,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(5))));
  }

  listTileTheme() {
    return const ListTileThemeData().copyWith(horizontalTitleGap: 0);
  }

  inputDecorationTheme() {
    return const InputDecorationTheme().copyWith(
        filled: true,
        fillColor: filledColor,
        border: const OutlineInputBorder(),
        enabledBorder: const OutlineInputBorder(),
        disabledBorder: const OutlineInputBorder(),
        errorBorder: const OutlineInputBorder(),
        focusedBorder: const OutlineInputBorder(),
        focusedErrorBorder: const OutlineInputBorder());
  }

}

On the other hand, make sure to use.copyWith() function everytime you want to override a style or theme, to avoid creating new ones.

Answer 2

I solved my issue, I need to use widget Builder:

 return ParentThemeWidget{
   child: Builder(builder: (context) {
      return  MyChildWidget(
       backgroundColor: Theme.of(context).primaryColor,
      ....
  )});
 }

More detail here