Flutter UI Widgets

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.

First, we’ll create a widget that shows the CircularProgressIndicator on android devices and the CupertinoActivityIndicator on iOS devices. Create a file named platform_spinner.dart inside the widgets folder. Update this file to the following:

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(),
    );
  }
}

Save your work. This widget checks the platform the app is running on and displays a CupertinoActivityIndicator if the platform iOS else it displays a CircularProgressIndicator. The Theme.of(context).platform is used to get the defaultTargetPlatform of the app. The key point to note here is that whenever you want to create a platform specific widget, create a custom widget and encapulate the platform checking logic inside that widget.

Next, let’s head over to the ArticleCard widget. Scroll to the CardBanner widget and update the loadingBuilder to display this widget:

...
return Center(child: PlatformSpinner());
...

Save your work. Then do a hot restart. The android spinner shows up. Let’s try it out for iOS. Head over to main.dart file and uncomment the platform line. Do a hot restart. You can see the CupertinoActivityIndicator shows up.

We could also update the spinner in the home page to use this widget. You can go ahead and try that out, and remember to do a hot restart when you change it.As you can see, creating a widget that adapts to different platforms is simple. So if you want to create a platform specific tab bar, create a separate widget that checks the plaform and returns the corrensponding widget. You can see the PlatformSpinner widget we just created, we pass it in and it adapts accordingly.

Finally, let’s update the ArticleCard class to correctly check the underlying platform. Scroll up to the ArticleCard class. Currently we manually pass an isIOS boolean. Let’s update this to the correct code like so:

// Remove the isIOS boolean member
...
  @override
  Widget build(BuildContext context) {
    bool isIOS = Theme.of(context).platform == TargetPlatform.iOS;
    if (isIOS) {
...

Now, with this, we correctly check if the target platfom is iOS then we display the wide card. We also removed the previous definition from the constructor. Save your work. And there you have it, everything works as expected and changing the platorm would display the corresponding design.