Flutter UI Widgets

Nov 9 2021 · Dart 2.14, Flutter 2.5, VS Code 1.61

Part 1: Flutter UI Widgets

15. Adapt Designs Based on Platforms

Episode complete

About this episode

Leave a rating/review

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 14. Build iOS Styled Forms

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Notes: 15. Adapt Designs Based on Platforms

Where to Go From Here: Flutter Widgets Catalog

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

We’ve covered both material and cupertino based widgets. Sometimes, we might want to show a widget based on the platform. Flutter offers us a way to manually check for the platform our app is running on. We can then use this information and adapt our designs based on the underlying platform.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class PlatformSpinner extends StatelessWidget {
  const PlatformSpinner({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final isIOS = Theme.of(context).platform == TargetPlatform.iOS;
    return Center(
      child: isIOS
          ? const CupertinoActivityIndicator()
          : const CircularProgressIndicator(),
    );
  }
}
...
return Center(child: PlatformSpinner());
...
// Remove the isIOS boolean member
...
  @override
  Widget build(BuildContext context) {
    bool isIOS = Theme.of(context).platform == TargetPlatform.iOS;
    if (isIOS) {
...