Skip to content

Commit

Permalink
Adding more info on writing adaptive apps (#9924)
Browse files Browse the repository at this point in the history
Fixes #6141
  • Loading branch information
sfshaza2 authored Dec 14, 2023
1 parent 4cf87a4 commit 512f569
Showing 1 changed file with 15 additions and 5 deletions.
20 changes: 15 additions & 5 deletions src/ui/layout/responsive/building-adaptive-apps.md
Original file line number Diff line number Diff line change
Expand Up @@ -324,14 +324,12 @@ There are times when you want to make layout decisions
based on the actual platform you're running on,
regardless of size. For example, when building a
custom title bar, you might need to check the operating
system type and tweak the layout of your title bar, so
it doesn't get covered by the native window buttons.
system type and tweak the layout of your title bar,
so it doesn't get covered by the native window buttons.

To determine which combination of platforms you're on,
you can use the [`Platform`][] API along with the `kIsWeb` value:

[`Platform`]: {{site.api}}/flutter/package-platform_platform/Platform-class.html

<?code-excerpt "lib/global/device_type.dart (Platforms)"?>
```dart
bool get isMobileDevice => !kIsWeb && (Platform.isIOS || Platform.isAndroid);
Expand All @@ -343,10 +341,18 @@ bool get isDesktopDeviceOrWeb => kIsWeb || isDesktopDevice;

The `Platform` API can't be accessed from web builds without
throwing an exception, because the `dart.io` package isn't
supported on the web target. As a result, this code checks
supported on the web target. As a result, the above code checks
for web first, and because of short-circuiting,
Dart never calls `Platform` on web targets.

Use `Platform`/`kIsWeb` when the logic absolutely <i>must</i>
run for a given platform. For example,
talking to a plugin that only works on iOS,
or displaying a widget that only conforms to
Play Store policy and not the App Store's.

[`Platform`]: {{site.api}}/flutter/package-platform_platform/Platform-class.html

### Single source of truth for styling

You'll probably find it easier to maintain your views
Expand Down Expand Up @@ -397,6 +403,10 @@ return Padding(
);
```

Use `Theme.of(context).platform` for theming and
design choices, like what kind of switches to show
and general Cupertino/Material adaptions.

With all views referencing the same shared-design system rules,
they tend to look better and more consistent.
Making a change or adjusting a value for a specific platform
Expand Down

0 comments on commit 512f569

Please sign in to comment.