Skip to content

Simplify design systems section on widget catalog index page #12711

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 18, 2025
+18 −19
Merged

Simplify design systems section on widget catalog index page #12711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/lib/src/components/common/card.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ class Card extends StatelessComponent {
],
content: [?child],
link: link,
filled: link != null,
filled: link != null && attributes['filled'] != 'false',
outlined: outlined,
);
}
Expand Down
35 changes: 17 additions & 18 deletions src/content/ui/widgets/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,26 +14,25 @@ you can also see all the widgets in the [widget index][].
Flutter ships with two design systems as part of the SDK.

<div class="card-grid">
{% assign categories = catalog.index | sortBy: 'name' -%}
{% for section in categories %}
{%- if section.name == "Cupertino" or section.name == "Material components" -%}
<a class="card outlined-card" href="{{page.url}}/{{section.id}}">
<div class="card-header">
<span class="card-title">{{section.name}}</span>
</div>
<div class="card-content">
<p>{{section.description}}</p>
</div>
</a>
{% endif -%}
{% endfor %}
<Card title="Cupertino" link="/ui/widgets/cupertino" outlined="true" filled="false">
Beautiful and high-fidelity widgets that align with
Apple's Human Interface Guidelines for iOS and macOS.
</Card>
<Card title="Material design" link="/ui/widgets/material" outlined="true" filled="false">
Visual, behavioral, and motion-rich widgets implementing
the Material 3 design specification.
</Card>
</div>

You can find many more designs systems created by the Flutter community
on [pub.dev]({{site.pub}}), the package repository for Dart and Flutter,
like for example the Windows-inspired [fluent_ui]({{site.pub-pkg}}/fluent_ui),
macOS-inspired [macos_ui]({{site.pub-pkg}}/macos_ui),
and the Ubuntu-inspired [yaru]({{site.pub-pkg}}/yaru) widgets.
You can find many more design systems created by the Flutter community
on [pub.dev]({{site.pub}}), the package repository for Dart and Flutter.
For example, the Windows-inspired [fluent_ui][],
macOS-inspired [macos_ui][],
and the Ubuntu-inspired [yaru][] widgets.

[fluent_ui]: {{site.pub-pkg}}/fluent_ui
[macos_ui]: {{site.pub-pkg}}/macos_ui
[yaru]: {{site.pub-pkg}}/yaru

## Base widgets

Expand Down