Update 'Material Components widgets' to M3 #8432
Assignees
Labels
Comments
InMatrix
added
documentation
t.ui.com.material3
3 tasks
esouthren
added a commit
that referenced
this issue
Apr 24, 2023
Fixes #8432. Site changes are viewable at the staging site: https://flutter-site-73ed1.web.app/development/ui/widgets/. Primary changes: - Addition of Material 3 Components card [(view)](https://flutter-site-73ed1.web.app/development/ui/widgets/). - New Material 3 page showing M3 widgets as displayed in matching categories to material.io/components. This also includes a note about Material 3 becoming the default - this text is not final and can be iterated on in review. - Widget cards in the M3 page have a hover effect applied. - In the widgets overview page, Material now links to M3, and contains a link to the previous M2 widgets page. General notes: - Material 2 page ~~remains unchanged~~ has a notice about Material 3. - No light/dark modes - this was explored but decided against, with the possibility of returning to it if the site undergoes a site-wide dark mode addition. ## Presubmit checklist - [x] This PR doesn’t contain automatically generated corrections (Grammarly or similar). - [x] This PR follows the [Google Developer Documentation Style Guidelines](https://developers.google.com/style) — for example, it doesn’t use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person). - [x] This PR uses [semantic line breaks](https://github.com/dart-lang/site-shared/blob/master/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks) of 80 characters or fewer.
atsansone
pushed a commit
that referenced
this issue
Apr 24, 2023
Fixes #8432. Site changes are viewable at the staging site: https://flutter-site-73ed1.web.app/development/ui/widgets/. Primary changes: - Addition of Material 3 Components card [(view)](https://flutter-site-73ed1.web.app/development/ui/widgets/). - New Material 3 page showing M3 widgets as displayed in matching categories to material.io/components. This also includes a note about Material 3 becoming the default - this text is not final and can be iterated on in review. - Widget cards in the M3 page have a hover effect applied. - In the widgets overview page, Material now links to M3, and contains a link to the previous M2 widgets page. General notes: - Material 2 page ~~remains unchanged~~ has a notice about Material 3. - No light/dark modes - this was explored but decided against, with the possibility of returning to it if the site undergoes a site-wide dark mode addition. ## Presubmit checklist - [x] This PR doesn’t contain automatically generated corrections (Grammarly or similar). - [x] This PR follows the [Google Developer Documentation Style Guidelines](https://developers.google.com/style) — for example, it doesn’t use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person). - [x] This PR uses [semantic line breaks](https://github.com/dart-lang/site-shared/blob/master/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks) of 80 characters or fewer.
atsansone
pushed a commit
that referenced
this issue
Apr 25, 2023
Fixes #8432. Site changes are viewable at the staging site: https://flutter-site-73ed1.web.app/development/ui/widgets/. Primary changes: - Addition of Material 3 Components card [(view)](https://flutter-site-73ed1.web.app/development/ui/widgets/). - New Material 3 page showing M3 widgets as displayed in matching categories to material.io/components. This also includes a note about Material 3 becoming the default - this text is not final and can be iterated on in review. - Widget cards in the M3 page have a hover effect applied. - In the widgets overview page, Material now links to M3, and contains a link to the previous M2 widgets page. General notes: - Material 2 page ~~remains unchanged~~ has a notice about Material 3. - No light/dark modes - this was explored but decided against, with the possibility of returning to it if the site undergoes a site-wide dark mode addition. ## Presubmit checklist - [x] This PR doesn’t contain automatically generated corrections (Grammarly or similar). - [x] This PR follows the [Google Developer Documentation Style Guidelines](https://developers.google.com/style) — for example, it doesn’t use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person). - [x] This PR uses [semantic line breaks](https://github.com/dart-lang/site-shared/blob/master/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks) of 80 characters or fewer.
atsansone
pushed a commit
that referenced
this issue
Apr 26, 2023
Fixes #8432. Site changes are viewable at the staging site: https://flutter-site-73ed1.web.app/development/ui/widgets/. Primary changes: - Addition of Material 3 Components card [(view)](https://flutter-site-73ed1.web.app/development/ui/widgets/). - New Material 3 page showing M3 widgets as displayed in matching categories to material.io/components. This also includes a note about Material 3 becoming the default - this text is not final and can be iterated on in review. - Widget cards in the M3 page have a hover effect applied. - In the widgets overview page, Material now links to M3, and contains a link to the previous M2 widgets page. General notes: - Material 2 page ~~remains unchanged~~ has a notice about Material 3. - No light/dark modes - this was explored but decided against, with the possibility of returning to it if the site undergoes a site-wide dark mode addition. - [x] This PR doesn’t contain automatically generated corrections (Grammarly or similar). - [x] This PR follows the [Google Developer Documentation Style Guidelines](https://developers.google.com/style) — for example, it doesn’t use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person). - [x] This PR uses [semantic line breaks](https://github.com/dart-lang/site-shared/blob/master/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks) of 80 characters or fewer.
atsansone
pushed a commit
that referenced
this issue
Apr 26, 2023
Fixes #8432. Site changes are viewable at the staging site: https://flutter-site-73ed1.web.app/development/ui/widgets/. Primary changes: - Addition of Material 3 Components card [(view)](https://flutter-site-73ed1.web.app/development/ui/widgets/). - New Material 3 page showing M3 widgets as displayed in matching categories to material.io/components. This also includes a note about Material 3 becoming the default - this text is not final and can be iterated on in review. - Widget cards in the M3 page have a hover effect applied. - In the widgets overview page, Material now links to M3, and contains a link to the previous M2 widgets page. General notes: - Material 2 page ~~remains unchanged~~ has a notice about Material 3. - No light/dark modes - this was explored but decided against, with the possibility of returning to it if the site undergoes a site-wide dark mode addition. - [x] This PR doesn’t contain automatically generated corrections (Grammarly or similar). - [x] This PR follows the [Google Developer Documentation Style Guidelines](https://developers.google.com/style) — for example, it doesn’t use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person). - [x] This PR uses [semantic line breaks](https://github.com/dart-lang/site-shared/blob/master/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks) of 80 characters or fewer.
khanhnwin
added a commit
that referenced
this issue
May 10, 2023
* Adding state restoration pages (#8424) Fixes #2004 Fixes another issue that I can't find atm. [Staged link](https://sz-flutter-2.web.app/development/platform-integration/android/restore-state-android) @goderbauer, there are questions for you in this PR. cc @goderbauer --------- Co-authored-by: Parker Lougheed <parlough@gmail.com> * Fix typo "priori" -> "prior" (#8573) _Description of what this PR is changing or adding, and why:_ _Issues fixed by this PR (if any): Fix typo in `src/resources/inside-flutter.md:589` - [x] This PR doesn’t contain automatically generated corrections (Grammarly or similar). - [x] This PR follows the [Google Developer Documentation Style Guidelines](https://developers.google.com/style) — for example, it doesn’t use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person). - [x] This PR uses [semantic line breaks](https://github.com/dart-lang/site-shared/blob/master/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks) of 80 characters or fewer. --------- Co-authored-by: Brett Morgan <brettmorgan@google.com> Co-authored-by: Shams Zakhour (ignore Sfshaza) <44418985+sfshaza2@users.noreply.github.com> * Replace Webby mention with I/O in banner (#8627) The Webby voting has ended. This PR removes the Webby mention and reintroduces the I/O call to action. <img width="559" alt="Screenshot of banner" src="https://user-images.githubusercontent.com/18372958/234385170-785d7be7-9b39-4752-b398-95a7e7f987a7.png"> Co-authored-by: Brett Morgan <brettmorgan@google.com> * [Proposal] Breakup development directory (#8624) This pull request extracts all subcategories from `/development` to top-level entries, to match similar entries like "Deployment" and "Testing and debugging". The subcategories under Development are perhaps the most important categories for learning Flutter, but they were hidden under Development. This made them harder to navigate, with smaller text, and with deeper links and breadcrumbs. Work done: - Pulled subdirectories out of `/development` - Updated all old redirects and links to new destination - Introduce new redirects so old links keep working - Add some of the new top-level dividers to visually distinguish content - Enable breadcrumbs in moved content - Enable breadcrumbs within "Deployment" - Moved "Add to app" below "Deployment" - Add a short title for Add to app This is part of incremental work, and will be followed up with breaking up and reorganization "User interface", adjusting titles of content, and adding some cookbooks to the sidenav. Staged: https://flutter-docs-prod--pr8624-feature-breakup-deve-00ees3e9.web.app/ * Deprecate `describeEnum`. (#8571) Tied to flutter/flutter#125016 --------- Co-authored-by: Shams Zakhour (ignore Sfshaza) <44418985+sfshaza2@users.noreply.github.com> * Moving migration guides to the release directory (#8629) Part of the IA cleanup, moving migration guides to the /release directory and removing them from the sidenav. cc @parlough --------- Co-authored-by: Parker Lougheed <parlough@gmail.com> * flavors.md - Updated path of "New Scheme" in the XCode menu. (#8599) Updated path of "New Scheme" in the XCode menu.  **IMPORTANT:** Due to work on the docs.flutter.dev infrastructure, **all open pull requests will be closed April 26.** If your PR needs to be merged by April 26, please say that in your PR. Otherwise, please [file an issue](https://github.com/flutter/website/issues/new/choose) about the needed change, and (if you submit a PR) be prepared to recreate the PR May 10 or later. --- _Description of what this PR is changing or adding, and why:_ _Issues fixed by this PR (if any):_ - [ ] This PR doesn’t contain automatically generated corrections (Grammarly or similar). - [ ] This PR follows the [Google Developer Documentation Style Guidelines](https://developers.google.com/style) — for example, it doesn’t use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person). - [ ] This PR uses [semantic line breaks](https://github.com/dart-lang/site-shared/blob/main/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks) of 80 characters or fewer. * Bump site-shared from `04a5353` to `74292e2` (#8630) * Fix apostrophe in contextual-survey-metadata.json (#8631) Changing apostrophe character in description --- Makes it so that we can parse the json in dart code in the response * Document the new `canvasKitVariant` runtime configuration (#8475) Add documentation for the new [`canvasKitVariant`](https://github.com/flutter/engine/blob/0776f38b87137ad2535d77e91a79b8b6c80f16fb/lib/web_ui/lib/src/engine/configuration.dart#L221-L224) runtime configuration. Closes flutter/flutter#123048 - [x] This PR doesn’t contain automatically generated corrections (Grammarly or similar). - [x] This PR follows the [Google Developer Documentation Style Guidelines](https://developers.google.com/style) — for example, it doesn’t use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person). - [x] This PR uses [semantic line breaks](https://github.com/dart-lang/site-shared/blob/master/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks) of 80 characters or fewer. --------- Co-authored-by: Anthony Sansone <atsansone@users.noreply.github.com> * Adding wireless debugging information to the docs (#8456) We've added support for wireless debugging of iOS devices. This PR adds documentation for setting it up. To do: - [x] Add in information about IPv4 and IPv6 to `flutter attach` page - [ ] Specify the Flutter release where this feature is available - [x] See if there's any information needed for Android wireless debugging _Issues fixed by this PR (if any):_ #8425 - [x] This PR doesn’t contain automatically generated corrections (Grammarly or similar). - [x] This PR follows the [Google Developer Documentation Style Guidelines](https://developers.google.com/style) — for example, it doesn’t use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person). - [x] This PR uses [semantic line breaks](https://github.com/dart-lang/site-shared/blob/master/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks) of 80 characters or fewer. --------- Co-authored-by: Victoria Ashworth <vashworth@google.com> Co-authored-by: Brett Morgan <brettmorgan@google.com> Co-authored-by: Shams Zakhour (ignore Sfshaza) <44418985+sfshaza2@users.noreply.github.com> * Adaptation information for inputs and app bars (#8509) This PR adds some information on how to adapt styling for input widgets with .adaptive() constructors, as well as top app bars. Note that I am not sure of the best way to style the tables or size the images. Also, I have added some commented out sections that should be added when stable release goes live. Fixes: #8428 - [X] This PR doesn’t contain automatically generated corrections (Grammarly or similar). - [X] This PR follows the [Google Developer Documentation Style Guidelines](https://developers.google.com/style) — for example, it doesn’t use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person). - [X] This PR uses [semantic line breaks](https://github.com/dart-lang/site-shared/blob/master/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks) of 80 characters or fewer. @MitchellGoodwin could you take a quick peak at the code and make sure it looks okay? @InMatrix feel free to propose any edits! --------- Co-authored-by: Shams Zakhour (ignore Sfshaza) <44418985+sfshaza2@users.noreply.github.com> * Adapting bottom navigation bar (#8541) This adds to our platform adaptation documentation to add a section on tab bars. This fixes this issue: https://github.com/flutter/website/issues/8540. Builds on top of this PR: #8509 - [X] This PR doesn’t contain automatically generated corrections (Grammarly or similar). - [X] This PR follows the [Google Developer Documentation Style Guidelines](https://developers.google.com/style) — for example, it doesn’t use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person). - [X] This PR uses [semantic line breaks](https://github.com/dart-lang/site-shared/blob/master/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks) of 80 characters or fewer. --------- Co-authored-by: Shams Zakhour (ignore Sfshaza) <44418985+sfshaza2@users.noreply.github.com> Co-authored-by: Anthony Sansone <atsansone@users.noreply.github.com> * Updated Impeller details (#8607) Fixes #8608 --------- Co-authored-by: Loïc Sharma <737941+loic-sharma@users.noreply.github.com> * Enable build checks and tests in next branch (#8609) * Update widget catalog to show Material 3 widgets (#8574) Fixes #8432. Site changes are viewable at the staging site: https://flutter-site-73ed1.web.app/development/ui/widgets/. Primary changes: - Addition of Material 3 Components card [(view)](https://flutter-site-73ed1.web.app/development/ui/widgets/). - New Material 3 page showing M3 widgets as displayed in matching categories to material.io/components. This also includes a note about Material 3 becoming the default - this text is not final and can be iterated on in review. - Widget cards in the M3 page have a hover effect applied. - In the widgets overview page, Material now links to M3, and contains a link to the previous M2 widgets page. General notes: - Material 2 page ~~remains unchanged~~ has a notice about Material 3. - No light/dark modes - this was explored but decided against, with the possibility of returning to it if the site undergoes a site-wide dark mode addition. - [x] This PR doesn’t contain automatically generated corrections (Grammarly or similar). - [x] This PR follows the [Google Developer Documentation Style Guidelines](https://developers.google.com/style) — for example, it doesn’t use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person). - [x] This PR uses [semantic line breaks](https://github.com/dart-lang/site-shared/blob/master/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks) of 80 characters or fewer. * Updated the threading notice for platform channel responses. (#7901) This updates the guidelines about threading and the responses to platform channels. Once the following PRs are on `main` all official platforms (minus web where it doesn't make sense) support thread-safe responses. issue: flutter/flutter#93945 Do no land until the following are on stable: 1) flutter/engine#37689 1) flutter/engine#37607 1) flutter/engine#36909 - [x] This PR doesn’t contain automatically generated corrections (Grammarly or similar). - [x] This PR follows the [Google Developer Documentation Style Guidelines](https://developers.google.com/style) — for example, it doesn’t use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person). - [x] This PR uses [semantic line breaks](https://github.com/dart-lang/site-shared/blob/main/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks) of 80 characters or fewer. Co-authored-by: Shams Zakhour (ignore Sfshaza) <44418985+sfshaza2@users.noreply.github.com> Co-authored-by: Parker Lougheed <parlough@gmail.com> * Update PR Template for Website Freeze (#8632) --------- Co-authored-by: Shams Zakhour (ignore Sfshaza) <44418985+sfshaza2@users.noreply.github.com> Co-authored-by: Parker Lougheed <parlough@gmail.com> Co-authored-by: 失魂魚 <satwanjyu@outlook.com> Co-authored-by: Brett Morgan <brettmorgan@google.com> Co-authored-by: Bernardo Ferrari <bernaferrari2@gmail.com> Co-authored-by: Dimitris Paxinos <dpaxinos@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Elias Yishak <42216813+eliasyishak@users.noreply.github.com> Co-authored-by: Mouad Debbar <mouad.debbar@gmail.com> Co-authored-by: Anthony Sansone <atsansone@users.noreply.github.com> Co-authored-by: Leigha Jarett <leighaj@google.com> Co-authored-by: Victoria Ashworth <vashworth@google.com> Co-authored-by: Loïc Sharma <737941+loic-sharma@users.noreply.github.com> Co-authored-by: Eilidh Southren <esouthren@google.com> Co-authored-by: gaaclarke <30870216+gaaclarke@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
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.
The text was updated successfully, but these errors were encountered: