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
Everything is a Widget in Flutter. You probably already heard that. And Flutter has tons of Widgets to choose from when it comes to UI.
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.
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.
Let’s dig into it.
Matching Widgets Cheat Sheet
First and foremost, let’s understand equivalent of the each widget for each platform. I’m reviewing Cupertino with current release number 0.1.3.
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)
AppBar vs CupertinoNavigationBar
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)
OutlineButton & RaisedButton & FlatButton vs CupertinoButton
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
Currently, there are some widgets which I didn’t find equivalent from Material tree. These are CupertinoPopupSurface, CupertinoContextMenu, CupertinoFullscreenDialogTransition, CupertinoPicker, CupertinoPageTransition, CupertinoScrollbar.
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!
