Leave a rating/review
Where to Go From Here: Flutter Widgets Catalog
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.