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've reached locked video content where the transcript will be shown as obfuscated text.

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.