[102] Image BoxFit.fixWidth now requires a clipBehavior to be passed to the parent card

[ratiofu]

material-components-flutter-codelabs/mdc_100_series/lib/home.dart

Line 47 in 635c42b

fit: BoxFit.fitWidth,

I am new to Flutter. Working through the Material tutorial, the product images were not being clipped at the rounded card edges:

As the linked Flutter issue describes, it's now required to specify the clip behavior of the card:

      return Card(
+       clipBehavior: Clip.antiAlias,
        // TODO: Adjust card heights (103)
        child: Column(

As an aside, adding/changing that parameter and letting Hot Reload do its thing did not result in the cards being repainted with the proper clipping behavior. I had to Hot Restart the app on the device to make the change stick. Perhaps I am doing something wrong or this is another (Flutter? Material?) bug.

[willlarche]

Thank you! This has been corrected in document and code.

[xpat]

Everything looks good until the final step in this second part of the codelab. The height seems off. The tops and bottoms are missing after adding this last piece of code:

fit: BoxFit.fitWidth,

Is this just particular to me since I'm doing this on an HP Chromebook and using the nami(mobile) virtual device? Let me try it on Chrome. Nope, same thing: missing the tops (heads of the models, for example) and bottoms of the image (legs and feet of the models, for example).

Should I open a new issue? @willlarche @ratiofu