The cause of

A friend in the group asked this question:

How does PopupMenuButton change the background color?

Just finished writing the PopupMenuButton article, it has to be installed.

PopupMenuButton does not provide a parameter to change color.

There is no way, can only find the source of the pop-up page.

After searching for a long time, I found the place to return to the pop-up box, added a Container, set a color, and finished!

So I posted this:

Dart line 466, add a Container and set the color

Quit!

You’d expect the group to say something like:

Wow, big guy is awesome!

How how…

However, the fate of the ill-fated, loaded force road is always so bumpy. Otherwise I wouldn’t be writing this article.

Another group member said:

He: “Can’t you just use Theme to fix this?”

Me: “No, it doesn’t set the color according to Theme, you can check the source code.”

He: “Picture + link”

Me (inner OS) : “Oh my God, the fake failed? Go and see what happened!”

after

When I open the link, I see that I’ve wrapped the PopupMenuButton with a Theme, and I’ve defined a cardColor. What’s that?

I hastened to try:

Theme(
  data: ThemeData(cardColor: Colors.red),
  child: PopupMenuButton<WhyFarther>(
    // ...),),Copy the code

Add a Theme directly to the previous code and set the color to red.

Debug started!

Emmmmmmmmmm,

So now the question is, what’s the cardColor?

ThemeData

We all know that you can define a Theme to control global color text and things like that, but I never knew there was a cardColor,

Find information!

Everything pays off, let me find the Book “Flutter: Theme” written by The Magician,

CardColor = ‘ThemeData’; cardColor = ‘ThemeData’;

Cardcolor-color type, Material is used as the Color of Card.

What the hell, Material is used as a Card?

At that time I was very angry, I looked at the source code for a long time, but I did not see any build returned Card!

No way, global search card keyword! You always know what’s wrong!

Material

Finally, with my unremitting efforts, I found something suspicious:

return Opacity(
  opacity: opacity.evaluate(route.animation),
  child: Material(
    type: MaterialType.card,
    / / /...),),);Copy the code

The Material component has a type parameter that is defined as a MaterialType.card!

Who else is it if not you?!

This time I finally understand the above text:

Cardcolor-color type, Material is used as the Color of Card.

MaterialType

You think this is where it ends? No, I also need to look at the types of this type:

enum MaterialType {
  /// a rectangle using the default theme canvas color.
  canvas,

  /// Round edge, card theme color.
  card,

  /// No colored circles by default (for floating action buttons).
  circle,

  /// Round edges, no color by default (for the [MaterialButton] button).
  button,

  /// A piece of transparent material for ink-jet and highlights. While the Material metaphor describes the child printed on the Material itself without hiding the inkblot effect, the [Material] widget actually paints the child on top of the inkblot effect. Materials with type transparency can be placed on top of the opaque widget to show the ink effect on top of it. It is preferred to use the [ink] widget to display ink effects on opaque widgets.
  transparency
}
Copy the code

Don’t guess, the above Chinese is my translation software translation!

In that case, let’s change the type to canvas and see if it’s still red:

conclusion

Although the make-believe failed, I have a better understanding of the Theme.

And later, if you need to define widgets, you can use this method to define a Material type,

This will be consistent with the overall style of the APP.