Flutter UI Widgets

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

We've covered both Concealer and Cupertino based widgets. Sometimes we might want to show a widget based on the underlying platform. Flutter gives 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 circular progress indicator on Android devices and the CupertinoActivityIndicator on an iOS device. Create a file named 'platform_spinner.dart' inside the widgets folder. Update this file to the following. Save your work. This widget checks the platform the app is running on and displays CupertinoActivityIndicator if the platform is iOS, else, it displays a circular progress indicator. The thing does off the platform is used to get a default target platform 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 encapsulate the platform checking logic inside our widgets. Next, let's head over to the article card widget. Scroll to the CardBanner widgets and update the loadingBuilder to display this widget. 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 homepage to use this widget. You can go ahead and try that out. And remember to do the hot restart when you change it. As you can see, creating widgets that adapt to different platforms is simple. So if you want to create something like a platform specific Tambar, create a separate widget that checks the platform and return the corresponding widgets. You can see the platform spinner we just created. We put it in and it adapts accordingly. Finally, let's update the article card class to correctly check the underlying platform. Scroll up to the article card class. Currently, we manually pass an isiOS Boolean. Let's update this to the current code like so. Now, with this, we correctly check if the target platform is iOS. Then we display the white 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 platform will display the corresponding design.