P1. Flutter — Making Platform Specific UI Mobile Application (Android with Material, iOS with Cupertino)

Hello there,

as most of you know, Flutter is a great way to speed up the development of mobile application. It provides single codebase for both — Android and iOS apps to run. But what about the UI?

In this series, I’ll walk you through:

P1. Different widgets in Flutter and matching between Material and Cupertino widgets;

P2. Implementation of basic widget distinction (Android with Material, iOS with Cupertino with same codebase);

P3. Implementation of custom widget distinction (Android with Material, iOS with Custom Cupertino with same codebase).

Widgets

Part of the Widgets

By default, Flutter is using Material components. It closely mimics Google’s Material Design by sticking with its guidelines. Therefore after using Material widgets, even on iOS, you app will have material widgets which might attract interest for hardcore iOS users.

https://medium.com/nusanet/flutter-cupertino-app-76c33768c242
https://medium.com/nusanet/flutter-cupertino-app-76c33768c242

Worry not! There is a great way to make your iOS to look like Native iOS app!

Google’s Flutter team has this special section for iOS widgets called Cupertino (iOS Style widgets).

Within that section, we can explore tons of native look and feel having widgets.

Some of Cupertino widgets

Let’s dig into it.

Matching Widgets Cheat Sheet

You can use Search function, if you already know one or other Widget’s name — you will be able to find equivalent in second.

Directly Matching Widgets (Android <-> iOS)

Scaffold vs CupertinoPageScaffold

TabBarView vs CupertinoTabView

Slider vs CupertinoSlider

Date & Time Pickers vs CupertinoTimePicker with CupertinoDatePicker

TextField vs CupertinoTextField

BottomSheet vs CupertinoActionSheet

Switch vs CupertinoSwitch

CircularProgressIndicator vs CupertinoActivityIndicator

AlertDialog vs CupertinoAlertDialog (for actions used CupertinoDialogActions widget)

SimpleDialog vs CupertinoDialog (for actions used CupertinoDialogActions widget)

Indirect Matching (Android <-> iOS)

Based on parameters, CupertinoButton can be customised as following three buttons from Material.

BottomNavigationBar and TabBar vs CupertinoTabScaffold & CupertinoTabBar & CupertinoSegmentedControls & CupertinoSlidingSegmentedControls

This one is quite tricky. BottomNavigationBar shall go with CupertinoTabScaffold & CupertinoTabBar when we want to make some navigation within our app. As well as TabBar could be used as exchange with CupertinoSegmentedControl and CupertinoSlidingSegmentedControl.

Standalone iOS widgets

That’s about it. Now we know, which widgets from Cupertino corresponds to which widgets in Material.
In the next tutorial article, I will explain, how to use same codebase and have different UI, based on the device — it’s Android or iOS.

Stay tuned and subscribe for updates!

I build kick-ass mobile apps @ https://isawthatguy.com || Product Virtuoso and Startup Freak

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store