In this article, we’ll learn about different design systems in iOS and Android. Also how to plaform check and make customised native experience.

What is Material and Cupertino ?

Material package is designed to match the design system for google and android and cupertino is designed to match the iOS design system. But, don’t worry you can completly build a custom experience that doesn’t require any platform checking. However there are cases where you may want to show iOS looking widget on iOS apps and material looking widget on android devices. As this helps the users understand the contents easily.

Let’s start learning by implementing it in our app.

Platform checking in flutter apps

Using Platform

Start by importing both the material and cupertino packages to your widget.

Platform package check

Now we also need one more import for performing the platform checking which is “dart:io Platform”. This package allows us to determine our environment in the code.

import dart:io

The platform package provides a bunch of boolean values like “isAndroid”, “isIOS” etc.. We can use these to write conditional logic in your code to display different wigets according to the platform that user is using the app on.

boolean values of platform

You can also observe that material and cupertino library share a lot of similarities. Usually when you’re working with material widgets they don’t have any pre-fix to the name of the widget for example.

Switch image material

This is going to look like a material switch which you might be familiar with if you’re an android user. This works completely fine in any platform but you might want to make the experience more polished and familiar for an iOS user. To do that we can change it to a CupertinoSwitch which should make it look like an iOS switch using exact same api.

Cupertino Switch

We can write some code to display right widget to the right user. We’ll just write a ternary operator to check the platform and display relevant widget.

ternary operator

Use adaptive widgets

Adaptive image

Just use the wiget with adaptive parameter and this will do the platform checking for you. It automatically shows the relevant widget to the relevant platform. Flutter takes care of it so you don’t have to do it manually every single time.

Note : At the time of writing this blog, this adaptive param is not available for all of the wigets. For widgets which doesn’t have the adaptive option you can go with platform check to optimise the experience.

When to do platform checking ?

Dialogs

Now the amount of platform checking depends on the experience you’re trying to create. I recommend to perform platform checking on alert dialogs and certain types of menus and pickers. But, ultimately this depends on your personal preference.

Hope this helped you a bit in personalising the experience across the platforms. Feel free to share your own preferences on when to use the plaform specific widgets in the comments section below.