Update 'Material Components widgets' to M3 #8432

Page URL

https://docs.flutter.dev/development/ui/widgets/material/

Page source

https://github.com/flutter/website/tree/main/src/development/ui/widgets/material.md

Describe the problem

Flutter's M3 implementation is near complete, but the Material Components page in the Widget Catalog still shows widgets from M2 only. Outside getting started docs, this page is one of the top 10 most visited pages on docs.flutter.dev according to Google Analytics. It's also linked from https://m3.material.io/develop/flutter. Not showing M3 components makes it difficult for Flutter users to discover latest Material widgets and might cause confusion when M3 become the default in new Flutter projects.

Expected fix

A short-term fix is to create a Material 3 Components page but preserve the current Material 2 components page until the majority of Flutter users have migrated to M3. Specifically, this would involve the following steps:

• Gather and prepare preview images for M3 components
• Adjust Material widget categories used for M3 to account for additional widgets in M3
• Update the data files used to generate the widget catalog, including index.json and widgets.json
• Add a deprecation message the current M2 catalog to encourage migration to M3

In the long-run, we can consider making the M3 catalog more interactive through integrating with the Material 3 Flutter Demo.

Additional context

@sfshaza2 @HansMuller @Nancyhu2023 @QuncCccccc had an offline discussion about this issue.