diff --git a/src/_data/catalog/index.json b/src/_data/catalog/index.json index b5ce4d9dc7c..ed6d109609a 100644 --- a/src/_data/catalog/index.json +++ b/src/_data/catalog/index.json @@ -6,8 +6,9 @@ "id": "basics" }, { - "name": "Material Components", - "description": "Visual, behavioral, and motion-rich widgets implementing the Material Design guidelines.", + "name": "Material 2 Components", + "description": "Widgets implementing the Material 2 Design guidelines.", + "pagecontent": "Flutter will make Material 3 (M3), the latest version of Material Design, the default in late 2023. Check out our M3 widget catalog now.", "subcategories": [ { "name": "App structure and navigation" @@ -28,6 +29,40 @@ "name": "Layout" } ], + "id": "material2" + }, + { + "name": "Material Components", + "description": "Visual, behavioral, and motion-rich widgets implementing the Material 3 design specification.

Material 3 becomes the default Flutter interface in late 2023. To learn more about this transition, check out Flutter support for Material 3.", + "pagecontent": "To opt into Material 3, set the useMaterial3 flag to true in your theme.

To catch these widgets in action, check out our live Material 3 demo app.

You can still check out our legacy Material 2 widgets over at their catalog page.", + "subcategories": [ + { + "name": "Actions", + "color": "#D9E7CB" + }, + { + "name": "Communication", + "color": "#F9DBDA" + }, + { + "name": "Containment", + "color": "#F9DBDA" + }, + { + "name": "Navigation", + "color": "#E5E4C2" + + }, + { + "name": "Selection", + "color": "#D9E7CB" + + }, + { + "name": "Text Inputs", + "color": "#E5E4C2" + } + ], "id": "material" }, { diff --git a/src/_data/catalog/widgets.json b/src/_data/catalog/widgets.json index 60147befa0a..f26ddef47a3 100644 --- a/src/_data/catalog/widgets.json +++ b/src/_data/catalog/widgets.json @@ -31,9 +31,9 @@ }, { "name": "AnimatedAlign", - "description": "Animated version of Align which automatically transitions the child's position over a given duration whenever the given alignment changes.", + "description": "Animated transition that moves the child's position over a given duration whenever the given alignment changes.", "categories": [ - "Animation and Motion" + "Animation and Motion" ], "subcategories": [], "link": "https://api.flutter.dev/flutter/widgets/AnimatedAlign-class.html", @@ -169,9 +169,20 @@ "link": "https://api.flutter.dev/flutter/widgets/AnimatedWidgetBaseState-class.html", "image": "" }, + { + "name": "App bar", + "description": "Container that displays content and actions at the top of a screen.", + "categories": [], + "subcategories": [ + "Navigation" + ], + "link": "https://api.flutter.dev/flutter/material/AppBar-class.html", + "image": "", + "hoverimage": "" + }, { "name": "AppBar", - "description": "A Material Design app bar. An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar.", + "description": "A toolbar that might contain other widgets such as a `TabBar` and a `FlexibleSpaceBar`.", "categories": [ "Basics" ], @@ -221,9 +232,20 @@ "link": "https://api.flutter.dev/flutter/widgets/BackdropFilter-class.html", "image": "" }, + { + "name": "Badge", + "description": "Icon-like block that conveys dynamic content such as counts or status. It can include labels or numbers.", + "categories": [], + "subcategories": [ + "Communication" + ], + "link": "https://api.flutter.dev/flutter/material/Badge-class.html", + "image": "", + "hoverimage": "" + }, { "name": "Baseline", - "description": "A widget that positions its child according to the child's baseline.", + "description": "Container that positions its child according to the child's baseline.", "categories": [], "subcategories": [ "Single-child layout widgets" @@ -231,9 +253,31 @@ "link": "https://api.flutter.dev/flutter/widgets/Baseline-class.html", "image": "Abc " }, + { + "name": "Bottom app bar", + "description": "Container that displays navigation and key actions at the bottom of a screen.", + "categories": [], + "subcategories": [ + "Navigation" + ], + "link": "https://api.flutter.dev/flutter/material/BottomAppBar-class.html", + "image": "", + "hoverimage": "" + }, + { + "name": "Bottom sheet", + "description": "Containers that anchor supplementary content to the bottom of the screen.", + "categories": [], + "subcategories": [ + "Containment" + ], + "link": "https://api.flutter.dev/flutter/material/BottomSheet-class.html", + "image": "", + "hoverimage": "" + }, { "name": "BottomNavigationBar", - "description": "Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. The BottomNavigationBar widget implements this component.", + "description": "Container that includes tools to explore and switch between top-level views in a single tap.", "categories": [], "subcategories": [ "App structure and navigation" @@ -261,9 +305,20 @@ "link": "https://api.flutter.dev/flutter/material/Card-class.html", "image": "" }, + { + "name": "Card", + "description": "Container for short, related pieces of content displayed in a box with rounded corners and a drop shadow.", + "categories": [], + "subcategories": [ + "Containment" + ], + "link": "https://api.flutter.dev/flutter/material/Card-class.html", + "image": "", + "hoverimage": "" + }, { "name": "Center", - "description": "A widget that centers its child within itself.", + "description": "Alignment block that centers its child within itself.", "categories": [], "subcategories": [ "Single-child layout widgets" @@ -281,9 +336,20 @@ "link": "https://api.flutter.dev/flutter/material/Checkbox-class.html", "image": "" }, + { + "name": "Checkbox", + "description": "Form control that app users can select or clear to select one or more options from a set. Select the option to enable it or clear it to disable it.", + "categories": [], + "subcategories": [ + "Selection" + ], + "link": "https://api.flutter.dev/flutter/material/Checkbox-class.html", + "image": "", + "hoverimage": "" + }, { "name": "Chip", - "description": "A Material Design chip. Chips represent complex entities in small blocks, such as a contact.", + "description": "Small blocks that represent complex entities such as a contact.", "categories": [], "subcategories": [ "Information displays" @@ -291,9 +357,20 @@ "link": "https://api.flutter.dev/flutter/material/Chip-class.html", "image": "" }, + { + "name": "Chip", + "description": "Small blocks that simplify entering information, making selections, filtering content, or triggering actions.", + "categories": [], + "subcategories": [ + "Selection" + ], + "link": "https://api.flutter.dev/flutter/material/Chip-class.html", + "image": "", + "hoverimage": "" + }, { "name": "CircularProgressIndicator", - "description": "A material design circular progress indicator, which spins to indicate that the application is busy.", + "description": "Circular progress indicator that spins to indicate a busy application.", "categories": [], "subcategories": [ "Information displays" @@ -343,6 +420,17 @@ "link": "https://api.flutter.dev/flutter/widgets/Column-class.html", "image": "" }, + { + "name": "Common buttons", + "description": "Clickable blocks that start an action, such as sending an email, sharing a document, or liking a comment.", + "categories": [], + "subcategories": [ + "Actions" + ], + "link": "https://api.flutter.dev/flutter/material/ButtonStyle-class.html#material-3-button-types", + "image": "", + "hoverimage": "" + }, { "name": "ConstrainedBox", "description": "A widget that imposes additional constraints on its child.", @@ -445,9 +533,29 @@ "link": "https://api.flutter.dev/flutter/cupertino/CupertinoFullscreenDialogTransition-class.html", "image": "" }, + { + "name": "CupertinoListSection", + "description": "Container that uses the iOS style to display a scrollable view.", + "categories": [ + "Cupertino (iOS-style widgets)" + ], + "subcategories": [], + "link": "https://api.flutter.dev/flutter/cupertino/CupertinoListSection-class.html", + "image": "" + }, + { + "name": "CupertinoListTile", + "description": "A block that uses the iOS style to create a row in a list.", + "categories": [ + "Cupertino (iOS-style widgets)" + ], + "subcategories": [], + "link": "https://api.flutter.dev/flutter/cupertino/CupertinoListTile-class.html", + "image": "" + }, { "name": "CupertinoNavigationBar", - "description": "An iOS-style top navigation bar. Typically used with CupertinoPageScaffold.", + "description": "Container at the top of a screen that uses the iOS style. Many developers use this with `CupertinoPageScaffold`.", "categories": [ "Cupertino (iOS-style widgets)" ], @@ -607,26 +715,6 @@ "link": "https://api.flutter.dev/flutter/cupertino/CupertinoTextField-class.html", "image": "" }, - { - "name": "CupertinoListSection", - "description": "An iOS-style container for a scrollable view.", - "categories": [ - "Cupertino (iOS-style widgets)" - ], - "subcategories": [], - "link": "https://api.flutter.dev/flutter/cupertino/CupertinoListSection-class.html", - "image": "" - }, - { - "name": "CupertinoListTile", - "description": "An iOS-style tile that makes up a row in a list.", - "categories": [ - "Cupertino (iOS-style widgets)" - ], - "subcategories": [], - "link": "https://api.flutter.dev/flutter/cupertino/CupertinoListTile-class.html", - "image": "" - }, { "name": "CupertinoTimerPicker", "description": "An iOS-style countdown timer picker.", @@ -699,6 +787,17 @@ "link": "https://api.flutter.dev/flutter/material/showDatePicker.html", "image": "" }, + { + "name": "Date picker", + "description": "Calendar interface used to select a date or a range of dates.", + "categories": [], + "subcategories": [ + "Selection" + ], + "link": "https://api.flutter.dev/flutter/material/showDatePicker.html", + "image": "", + "hoverimage": "" + }, { "name": "DecoratedBox", "description": "A widget that paints a Decoration either before or after its child paints.", @@ -729,6 +828,17 @@ "link": "https://api.flutter.dev/flutter/widgets/DefaultTextStyle-class.html", "image": "" }, + { + "name": "Dialog", + "description": "Hovering containers that prompt app users to provide more data or make a decision.", + "categories": [], + "subcategories": [ + "Containment" + ], + "link": "https://api.flutter.dev/flutter/material/AlertDialog-class.html", + "image": "", + "hoverimage": "" + }, { "name": "Dismissible", "description": "A widget that can be dismissed by dragging in the indicated direction. Dragging or flinging this widget in the DismissDirection causes the child to slide out of view. Following the slide animation, if resizeDuration is non-null, the Dismissible widget animates its height (or width, whichever is perpendicular to the dismiss direction) to zero over the resizeDuration.", @@ -749,6 +859,17 @@ "link": "https://api.flutter.dev/flutter/material/Divider-class.html", "image": "" }, + { + "name": "Divider", + "description": "Thin line that groups content in lists and containers.", + "categories": [], + "subcategories": [ + "Containment" + ], + "link": "https://api.flutter.dev/flutter/material/Divider-class.html", + "image": "", + "hoverimage": "" + }, { "name": "DragTarget", "description": "A widget that receives data when a Draggable widget is dropped. When a draggable is dragged on top of a drag target, the drag target is asked whether it will accept the data the draggable is carrying. If the user does drop the draggable on top of the drag target (and the drag target has indicated that it will accept the draggable's data), then the drag target is asked to accept the draggable's data.", @@ -863,6 +984,17 @@ "link": "https://api.flutter.dev/flutter/widgets/FittedBox-class.html", "image": "" }, + { + "name": "FAB", + "description": "Clickable block that triggers a key action. This block contains an icon and floats in the app interface to keep the key action within reach.", + "categories": [], + "subcategories": [ + "Actions" + ], + "link": "https://api.flutter.dev/flutter/material/FloatingActionButton/FloatingActionButton.html", + "image": "", + "hoverimage": "" + }, { "name": "FloatingActionButton", "description": "A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action buttons are most commonly used in the Scaffold.floatingActionButton field.", @@ -873,6 +1005,17 @@ "link": "https://api.flutter.dev/flutter/material/FloatingActionButton-class.html", "image": "" }, + { + "name": "Extended FAB", + "description": "Clickable block that triggers an action. These wider blocks can fit a text label and provide a larger target area.", + "categories": [], + "subcategories": [ + "Actions" + ], + "link": "https://api.flutter.dev/flutter/material/FloatingActionButton/FloatingActionButton.extended.html", + "image": "", + "hoverimage": "" + }, { "name": "Flow", "description": "A widget that implements the flow layout algorithm.", @@ -991,6 +1134,17 @@ "link": "https://api.flutter.dev/flutter/widgets/Icon-class.html", "image": "" }, + { + "name": "Icon button", + "description": "Clickable icons to prompt app users to take supplementary actions.", + "categories": [], + "subcategories": [ + "Actions" + ], + "link": "https://api.flutter.dev/flutter/material/IconButton-class.html", + "image": "", + "hoverimage": "" + }, { "name": "IconButton", "description": "An icon button is a picture printed on a Material widget that reacts to touches by filling with color (ink).", @@ -1094,6 +1248,17 @@ "link": "https://api.flutter.dev/flutter/material/LinearProgressIndicator-class.html", "image": "" }, + { + "name": "List", + "description": "Continuous, vertical indexes that display text or images.", + "categories": [], + "subcategories": [ + "Containment" + ], + "link": "https://api.flutter.dev/flutter/material/ListTile-class.html", + "image": "", + "hoverimage": "" + }, { "name": "ListBody", "description": "A widget that arranges its children sequentially along a given axis, forcing them to the dimension of the parent in the other axis.", @@ -1156,6 +1321,17 @@ "link": "https://api.flutter.dev/flutter/widgets/MediaQuery-class.html", "image": "" }, + { + "name": "Menu", + "description": "Container that displays a list of choices on a temporary surface.", + "categories": [], + "subcategories": [ + "Selection" + ], + "link": "https://api.flutter.dev/flutter/material/PopupMenuButton-class.html", + "image": "", + "hoverimage": "" + }, { "name": "MergeSemantics", "description": "A widget that merges the semantics of its descendants.", @@ -1166,6 +1342,39 @@ "link": "https://api.flutter.dev/flutter/widgets/MergeSemantics-class.html", "image": "" }, + { + "name": "Navigation bar", + "description": "Persistent container that enables switching between primary destinations in an app.", + "categories": [], + "subcategories": [ + "Navigation" + ], + "link": "https://api.flutter.dev/flutter/material/NavigationBar-class.html", + "image": "", + "hoverimage": "" + }, + { + "name": "Navigation drawer", + "description": "Container that slides from the leading edge of the app to navigate to other sections in an app. The leading edge falls on the left side for left-to-right languages.", + "categories": [], + "subcategories": [ + "Navigation" + ], + "link": "https://api.flutter.dev/flutter/material/NavigationDrawer-class.html", + "image": "", + "hoverimage": "" + }, + { + "name": "Navigation rail", + "description": "Persistent container on the leading edge of tablet and desktop screens to navigate to parts of an app. The leading edge falls on the left side for left-to-right languages.", + "categories": [], + "subcategories": [ + "Navigation" + ], + "link": "https://api.flutter.dev/flutter/material/NavigationRail-class.html", + "image": "", + "hoverimage": "" + }, { "name": "Navigator", "description": "A widget that manages a set of child widgets with a stack discipline. Many apps have a navigator near the top of their widget hierarchy to display their logical history using an Overlay with the most recently visited pages visually on top of the older pages. Using this pattern lets the navigator visually transition from one page to another by moving the widgets around in the overlay. Similarly, the navigator can be used to show a dialog by positioning the dialog widget above the current page.", @@ -1288,6 +1497,17 @@ "link": "https://api.flutter.dev/flutter/widgets/PositionedTransition-class.html", "image": "" }, + { + "name": "Progress indicator", + "description": "Vertical line that changes color as an ongoing process, such as loading an app or submitting a form, completes.", + "categories": [], + "subcategories": [ + "Communication" + ], + "link": "https://api.flutter.dev/flutter/material/LinearProgressIndicator-class.html", + "image": "", + "hoverimage": "" + }, { "name": "Radio", "description": "Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side. ", @@ -1298,6 +1518,17 @@ "link": "https://api.flutter.dev/flutter/material/Radio-class.html", "image": "" }, + { + "name": "Radio button", + "description": "Form control that app users can select or clear to select only one option from a set. Select the option to enable it or clear it to disable it.", + "categories": [], + "subcategories": [ + "Selection" + ], + "link": "https://api.flutter.dev/flutter/material/Radio-class.html", + "image": "", + "hoverimage": "" + }, { "name": "RawImage", "description": "A widget that displays a dart:ui.Image directly.", @@ -1434,6 +1665,17 @@ "link": "https://api.flutter.dev/flutter/material/Scrollbar-class.html", "image": "" }, + { + "name": "Segmented button", + "description": "Single or multiple selected clickable blocks to help people select options, switch views, or sort elements.", + "categories": [], + "subcategories": [ + "Actions" + ], + "link": "https://api.flutter.dev/flutter/material/SegmentedButton-class.html", + "image": "", + "hoverimage": "" + }, { "name": "Semantics", "description": "A widget that annotates the widget tree with a description of the meaning of the widgets. Used by accessibility tools, search engines, and other semantic analysis software to determine the meaning of the application.", @@ -1514,6 +1756,17 @@ "link": "https://api.flutter.dev/flutter/material/Slider-class.html", "image": "" }, + { + "name": "Slider", + "description": "Form control that enables selecting a range of values.", + "categories": [], + "subcategories": [ + "Selection" + ], + "link": "https://api.flutter.dev/flutter/material/Slider-class.html", + "image": "", + "hoverimage": "" + }, { "name": "SliverAppBar", "description": "A material design app bar that integrates with a CustomScrollView.", @@ -1615,6 +1868,17 @@ "link": "https://api.flutter.dev/flutter/material/SnackBar-class.html", "image": "" }, + { + "name": "Snackbar", + "description": "Brief messages about app processes that display at the bottom of the screen.", + "categories": [], + "subcategories": [ + "Communication" + ], + "link": "https://api.flutter.dev/flutter/material/SnackBar-class.html", + "image": "", + "hoverimage": "" + }, { "name": "Stack", "description": "This class is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom.", @@ -1657,6 +1921,28 @@ "link": "https://api.flutter.dev/flutter/material/Switch-class.html", "image": "" }, + { + "name": "Switch", + "description": "Toggle control that changes the state of a single item to on or off.", + "categories": [], + "subcategories": [ + "Selection" + ], + "link": "https://api.flutter.dev/flutter/material/Switch-class.html", + "image": "", + "hoverimage": "" + }, + { + "name": "Tab bar", + "description": "Layered containers that organize content across different screens, data sets, and other interactions.", + "categories": [], + "subcategories": [ + "Navigation" + ], + "link": "https://api.flutter.dev/flutter/material/TabBar-class.html", + "image": "", + "hoverimage": "" + }, { "name": "TabBar", "description": "A Material Design widget that displays a horizontal row of tabs.", @@ -1677,16 +1963,6 @@ "link": "https://api.flutter.dev/flutter/material/TabBarView-class.html", "image": "" }, - { - "name": "Table", - "description": "A widget that uses the table layout algorithm for its children.", - "categories": [], - "subcategories": [ - "Multi-child layout widgets" - ], - "link": "https://api.flutter.dev/flutter/widgets/Table-class.html", - "image": "" - }, { "name": "TabController", "description": "Coordinates tab selection between a TabBar and a TabBarView.", @@ -1707,6 +1983,16 @@ "link": "https://api.flutter.dev/flutter/material/TabPageSelector-class.html", "image": "" }, + { + "name": "Table", + "description": "Displays child widgets in rows and columns.", + "categories": [], + "subcategories": [ + "Multi-child layout widgets" + ], + "link": "https://api.flutter.dev/flutter/widgets/Table-class.html", + "image": "" + }, { "name": "Text", "description": "A run of text with a single style.", @@ -1728,6 +2014,17 @@ "link": "https://api.flutter.dev/flutter/material/TextButton-class.html", "image": "" }, + { + "name": "Text field", + "description": "Box into which app users can enter text. They appear in forms and dialogs.", + "categories": [], + "subcategories": [ + "Text Inputs" + ], + "link": "https://api.flutter.dev/flutter/material/TextField-class.html", + "image": "", + "hoverimage": "" + }, { "name": "TextField", "description": "Touching a text field places the cursor and displays the keyboard. The TextField widget implements this component.", @@ -1748,6 +2045,17 @@ "link": "https://api.flutter.dev/flutter/material/Theme-class.html", "image": "" }, + { + "name": "Time picker", + "description": "Clock interface used to select and set a specific time.", + "categories": [], + "subcategories": [ + "Selection" + ], + "link": "https://api.flutter.dev/flutter/material/showTimePicker.html", + "image": "", + "hoverimage": "" + }, { "name": "Tooltip", "description": "Tooltips provide text labels that help explain the function of a button or other user interface action. Wrap the button in a Tooltip widget to show a label when the widget long pressed (or when the user takes some other appropriate action).", @@ -1790,4 +2098,4 @@ "link": "https://api.flutter.dev/flutter/widgets/Wrap-class.html", "image": "" } -] +] \ No newline at end of file diff --git a/src/_includes/docs/catalogpage-material.html b/src/_includes/docs/catalogpage-material.html new file mode 100644 index 00000000000..d254e034034 --- /dev/null +++ b/src/_includes/docs/catalogpage-material.html @@ -0,0 +1,53 @@ + +{% for section in site.data.catalog.index %} + {% if section.name == include.category %} + {% assign category = section %} + {% break %} + {% endif %} +{% endfor %} + +
+
+

{{category.description}}

+
+ {% if category.subcategories and category.subcategories.size != 0 -%} + + {% endif -%} + +

{{ category.pagecontent }}

+ + {% assign components = site.data.catalog.widgets | where_exp:"comp","comp.categories contains include.category" -%} + + {% if category.subcategories and category.subcategories.size != 0 -%} + {% for sub in category.subcategories -%} + {% assign components = site.data.catalog.widgets | where_exp:"comp","comp.subcategories contains sub.name" -%} + {% if components.size != 0 -%} +

{{sub.name}}

+
+ {% for comp in components -%} +
+ +
+ {{ comp.image }} +
+ {{ comp.hoverimage }} +
+
+ +
+
{{comp.name}}
 +

{{ comp.description | truncatewords: 25 }}

+
+
+ {% endfor -%} +
+ {% endif -%} + {% endfor -%} + {% endif -%} + +

Check out more widgets in the widget catalog.

+
diff --git a/src/_includes/docs/catalogpage.html b/src/_includes/docs/catalogpage.html index d35e90b11b6..806ca57bafd 100644 --- a/src/_includes/docs/catalogpage.html +++ b/src/_includes/docs/catalogpage.html @@ -17,6 +17,8 @@ {% endif -%} +

{{ category.pagecontent }}

+

See more widgets in the widget catalog.

{% assign components = site.data.catalog.widgets | where_exp:"comp","comp.categories contains include.category" -%} diff --git a/src/_sass/base/_base.scss b/src/_sass/base/_base.scss index d30be3db29c..a77f2aec274 100644 --- a/src/_sass/base/_base.scss +++ b/src/_sass/base/_base.scss @@ -63,6 +63,48 @@ dd { } } +.card-title-material-3 { + color: $site-color-body; +} + +.card-image-holder-material-3 { + align-items: center; + z-index: -1; + background-size: 0%; + opacity: .999; + background-color: var(--bg-color, white); + + img { + max-width: 100%; + max-height: 100%; + width: auto; + z-index: 1; + } +} + +.card-image-material-3-hover { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + opacity: 0; + transition: .25s ease; + z-index: -1; + + img { + max-width: 100%; + max-height: 100%; + width: auto; + z-index: -1; + + } +} + +.card-image-holder-material-3:hover .card-image-material-3-hover { + opacity: 1; +} + .happy-paths-image-holder { align-items: left; display: flex; diff --git a/src/assets/images/docs/widget-catalog/material-3-badge.png b/src/assets/images/docs/widget-catalog/material-3-badge.png new file mode 100644 index 00000000000..8f5f116cac4 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-badge.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-bottom-app-bar.png b/src/assets/images/docs/widget-catalog/material-3-bottom-app-bar.png new file mode 100644 index 00000000000..d5881ca8cbe Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-bottom-app-bar.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-bottom-sheet.png b/src/assets/images/docs/widget-catalog/material-3-bottom-sheet.png new file mode 100644 index 00000000000..409c17e7c23 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-bottom-sheet.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-bubbles.png b/src/assets/images/docs/widget-catalog/material-3-bubbles.png new file mode 100644 index 00000000000..b29eeef0ac9 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-bubbles.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-buttons.png b/src/assets/images/docs/widget-catalog/material-3-buttons.png new file mode 100644 index 00000000000..de9665e2b99 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-buttons.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-card.png b/src/assets/images/docs/widget-catalog/material-3-card.png new file mode 100644 index 00000000000..df2e32a8c5b Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-card.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-checkbox.png b/src/assets/images/docs/widget-catalog/material-3-checkbox.png new file mode 100644 index 00000000000..878b9028fb5 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-checkbox.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-chip.png b/src/assets/images/docs/widget-catalog/material-3-chip.png new file mode 100644 index 00000000000..7e273fbf0e6 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-chip.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-coral.png b/src/assets/images/docs/widget-catalog/material-3-coral.png new file mode 100644 index 00000000000..693609297ff Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-coral.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-date-picker.png b/src/assets/images/docs/widget-catalog/material-3-date-picker.png new file mode 100644 index 00000000000..1869e779b26 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-date-picker.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-dialog.png b/src/assets/images/docs/widget-catalog/material-3-dialog.png new file mode 100644 index 00000000000..83e29bf30d4 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-dialog.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-divider.png b/src/assets/images/docs/widget-catalog/material-3-divider.png new file mode 100644 index 00000000000..32eeee6529a Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-divider.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-extended-fab.png b/src/assets/images/docs/widget-catalog/material-3-extended-fab.png new file mode 100644 index 00000000000..063f5e4f253 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-extended-fab.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-floating-action-button.png b/src/assets/images/docs/widget-catalog/material-3-floating-action-button.png new file mode 100644 index 00000000000..7b4752dbf10 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-floating-action-button.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-icon-button.png b/src/assets/images/docs/widget-catalog/material-3-icon-button.png new file mode 100644 index 00000000000..faefe3d1a16 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-icon-button.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-leaves.png b/src/assets/images/docs/widget-catalog/material-3-leaves.png new file mode 100644 index 00000000000..888d059022a Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-leaves.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-list.png b/src/assets/images/docs/widget-catalog/material-3-list.png new file mode 100644 index 00000000000..32a6877af5f Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-list.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-menu.png b/src/assets/images/docs/widget-catalog/material-3-menu.png new file mode 100644 index 00000000000..abeb815ac80 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-menu.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-navigation-bar.png b/src/assets/images/docs/widget-catalog/material-3-navigation-bar.png new file mode 100644 index 00000000000..3eccb5dec0d Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-navigation-bar.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-navigation-drawer.png b/src/assets/images/docs/widget-catalog/material-3-navigation-drawer.png new file mode 100644 index 00000000000..f3eb2d4903c Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-navigation-drawer.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-navigation-rail.png b/src/assets/images/docs/widget-catalog/material-3-navigation-rail.png new file mode 100644 index 00000000000..060003afce6 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-navigation-rail.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-progress-indicator.png b/src/assets/images/docs/widget-catalog/material-3-progress-indicator.png new file mode 100644 index 00000000000..295487c485e Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-progress-indicator.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-radio-button.png b/src/assets/images/docs/widget-catalog/material-3-radio-button.png new file mode 100644 index 00000000000..fbfbd2e0f6c Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-radio-button.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-search-bar.png b/src/assets/images/docs/widget-catalog/material-3-search-bar.png new file mode 100644 index 00000000000..e9686d90ca5 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-search-bar.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-segmented-button.png b/src/assets/images/docs/widget-catalog/material-3-segmented-button.png new file mode 100644 index 00000000000..31cce723873 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-segmented-button.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-side-sheet.png b/src/assets/images/docs/widget-catalog/material-3-side-sheet.png new file mode 100644 index 00000000000..d855c9d6bf4 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-side-sheet.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-slider.png b/src/assets/images/docs/widget-catalog/material-3-slider.png new file mode 100644 index 00000000000..d8abaefc1ad Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-slider.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-snackbar.png b/src/assets/images/docs/widget-catalog/material-3-snackbar.png new file mode 100644 index 00000000000..af08d31fafd Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-snackbar.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-switch.png b/src/assets/images/docs/widget-catalog/material-3-switch.png new file mode 100644 index 00000000000..6fa5f63a574 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-switch.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-tab-bar.png b/src/assets/images/docs/widget-catalog/material-3-tab-bar.png new file mode 100644 index 00000000000..e10ce3ee5d2 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-tab-bar.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-text-field.png b/src/assets/images/docs/widget-catalog/material-3-text-field.png new file mode 100644 index 00000000000..9778eb87b9e Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-text-field.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-time-picker.png b/src/assets/images/docs/widget-catalog/material-3-time-picker.png new file mode 100644 index 00000000000..b0a5d88774d Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-time-picker.png differ diff --git a/src/assets/images/docs/widget-catalog/material-3-top-app-bar.png b/src/assets/images/docs/widget-catalog/material-3-top-app-bar.png new file mode 100644 index 00000000000..33578c6cfe4 Binary files /dev/null and b/src/assets/images/docs/widget-catalog/material-3-top-app-bar.png differ diff --git a/src/development/ui/widgets/index.md b/src/development/ui/widgets/index.md index e32318e46fc..b03d967ce05 100644 --- a/src/development/ui/widgets/index.md +++ b/src/development/ui/widgets/index.md @@ -11,15 +11,18 @@ you can also see all the widgets in the [widget index][].
{% assign categories = site.data.catalog.index | sort: 'name' -%} {% for section in categories %} -
-
-
{{section.name}}
 -

{{section.description}}

-
-
- Visit + + {% if section.name != "Material 2 Components" %} +
+
+
{{section.name}}
 +

{{section.description}}

+
+
+ Visit +
-
+ {% endif -%} {% endfor %}
diff --git a/src/development/ui/widgets/material.md b/src/development/ui/widgets/material.md index 2b2490bf855..4915adf2985 100644 --- a/src/development/ui/widgets/material.md +++ b/src/development/ui/widgets/material.md @@ -2,7 +2,7 @@ title: Material Components widgets short-title: Material description: > - A catalog of Flutter's widgets implementing the Material design guidelines. + A catalog of Flutter's widgets implementing Material 3 design guidelines. --- -{% include docs/catalogpage.html category="Material Components" %} +{% include docs/catalogpage-material.html category="Material Components" %} diff --git a/src/development/ui/widgets/material2.md b/src/development/ui/widgets/material2.md new file mode 100644 index 00000000000..c3fc7a50e74 --- /dev/null +++ b/src/development/ui/widgets/material2.md @@ -0,0 +1,16 @@ +--- +title: Material 2 Components widgets +short-title: Material +description: > + A catalog of Flutter's widgets implementing the Material 2 design guidelines. +--- + +{% include docs/catalogpage.html category="Material 2 Components" %} +--- +title: Material 2 Components widgets +short-title: Material +description: > + A catalog of Flutter's widgets implementing the Material 2 design guidelines. +--- + +{% include docs/catalogpage.html category="Material 2 Components" %} \ No newline at end of file