diff --git a/src/assets/images/docs/platform-adaptations/hig-tabbar.png b/src/assets/images/docs/platform-adaptations/hig-tabbar.png
new file mode 100644
index 00000000000..197437e1fcc
Binary files /dev/null and b/src/assets/images/docs/platform-adaptations/hig-tabbar.png differ
diff --git a/src/assets/images/docs/platform-adaptations/mat-navbar.png b/src/assets/images/docs/platform-adaptations/mat-navbar.png
new file mode 100644
index 00000000000..03369742c1b
Binary files /dev/null and b/src/assets/images/docs/platform-adaptations/mat-navbar.png differ
diff --git a/src/resources/platform-adaptations.md b/src/resources/platform-adaptations.md
index 57cc09dfe74..346cf16e3c9 100644
--- a/src/resources/platform-adaptations.md
+++ b/src/resources/platform-adaptations.md
@@ -568,6 +568,7 @@ Your feedback is welcomed on [issue #8427][].
### Widgets with .adaptive() constructors
Several widgets support `.adaptive()` constructors.
+The following table lists these widgets.
Adaptive constructors substitute the corresponding Cupertino components
when the app is run on an iOS device.
@@ -583,14 +584,13 @@ Therefore, we recommend that you follow platform conventions.
| `Switch`| `CupertinoSwitch`|[`Switch.adaptive()`][]|
| `Slider`| `CupertinoSlider`|[`Slider.adaptive()`][]|
| `CircularProgressIndicator`| `CupertinoActivityIndicator`|[`CircularProgressIndicator.adaptive()`][]|
-
-
+| `Checkbox`| `CupertinoCheckbox`|[`Checkbox.adaptive()`][]|
+| `Radio`| `CupertinoRadio`|[`Radio.adaptive()`][]|
### Top app bar and navigation bar
Since Android 12, the default UI for top app
-bars follow the design guidelines defined in [Material 3][mat-appbar].
+bars follows the design guidelines defined in [Material 3][mat-appbar].
On iOS, an equivalent component called "Navigation Bars"
is defined in [Apple’s Human Interface Guidelines][hig-appbar] (HIG).
@@ -656,7 +656,90 @@ AppBar(
But, because app bars are displayed alongside
other content in your page, it's only recommended to adapt the styling
so long as its cohesive with the rest of your application. You can see
-additional code samples and a further explanation in [the GitHub discussion on app bar adaptations][appbar-post].
+additional code samples and a further explanation in
+[the GitHub discussion on app bar adaptations][appbar-post].
+
+### Bottom navigation bars
+
+Since Android 12, the default UI for bottom navigation
+bars follow the design guidelines defined in [Material 3][mat-navbar].
+On iOS, an equivalent component called "Tab Bars"
+is defined in [Apple’s Human Interface Guidelines][hig-tabbar] (HIG).
+
+
+
+
+
+
+
+ Bottom Navigation Bar in Material 3
+
+
+
+
+
+
+
+ Tab Bar in Human Interface Guidelines
+
+
+
+
+
+
+Since tab bars are persistent across your app, they should match your
+own branding. However, if you choose to use Material's default
+styling on Android, you might consider adapting to the default iOS
+tab bars.
+
+To implement platform-specific bottom navigation bars,
+you can use Flutter’s `NavigationBar` widget on Android
+and the `CupertinoTabBar` widget on iOS.
+Below is a code snippet you can
+adapt to show a platform-specific navigation bars.
+
+```dart
+final Map _navigationItems = {
+ 'Menu': Platform.isIOS ? Icon(CupertinoIcons.house_fill) : Icon(Icons.home),
+ 'Order': Icon(Icons.adaptive.share),
+ };
+
+...
+
+Scaffold(
+ body: _currentWidget,
+ bottomNavigationBar: Platform.isIOS
+ ? CupertinoTabBar(
+ currentIndex: _currentIndex,
+ onTap: (index) {
+ setState(() => _currentIndex = index);
+ _loadScreen();
+ },
+ items: _navigationItems.entries
+ .map(
+ (entry) => BottomNavigationBarItem(
+ icon: entry.value,
+ label: entry.key,
+ ))
+ .toList(),
+ )
+ : NavigationBar(
+ selectedIndex: _currentIndex,
+ onDestinationSelected: (index) {
+ setState(() => _currentIndex = index);
+ _loadScreen();
+ },
+ destinations: _navigationItems.entries
+ .map((entry) => NavigationDestination(
+ icon: entry.value,
+ label: entry.key,
+ ))
+ .toList(),
+ ));
+```
+
### Alert dialog
@@ -728,7 +811,7 @@ void _showAdaptiveDialog(
}
```
-Further detail about adapting alert dialogs is available in
+To learn more about adapting alert dialogs, check out
[the GitHub discussion on dialog adaptations][alert-post].
You can leave feedback or ask questions in the discussion.
@@ -756,9 +839,11 @@ You can leave feedback or ask questions in the discussion.
[appbar-post]: {{site.repo.uxr}}/discussions/93
[mat-appbar]: https://m3.material.io/components/top-app-bar/overview
[hig-appbar]: https://developer.apple.com/design/human-interface-guidelines/components/navigation-and-search/navigation-bars/
-
+[`Checkbox.adaptive()`]: {{site.api}}/flutter/material/Checkbox/Checkbox.adaptive.html
+[`Radio.adaptive()`]: {{site.api}}/flutter/material/Radio/Radio.adaptive.html
[`Switch.adaptive()`]: {{site.api}}/flutter/material/Switch/Switch.adaptive.html
[`Slider.adaptive()`]: {{site.api}}/flutter/material/Slider/Slider.adaptive.html
[`CircularProgressIndicator.adaptive()`]: {{site.api}}/flutter/material/CircularProgressIndicator/CircularProgressIndicator.adaptive.html
-[UI Component section]: {{site.api}}/resources/platform-adaptations/#ui-components
\ No newline at end of file
+[UI Component section]: {{site.api}}/resources/platform-adaptations/#ui-components
+[mat-navbar]: https://m3.material.io/components/navigation-bar/overview
+[hig-tabbar]: https://developer.apple.com/design/human-interface-guidelines/components/navigation-and-search/tab-bars/
+ 
+ 
