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

This is continuation from my previous article about flutter and material with cupertino widgets.

This is the final part of my three part series for aligning widgets on both — Android and iOS in Flutter. And in this part, I’m showing you most of widget customisations I’ve made during my current project’s implementation.

Some context about the project — requirement is to strictly differentiate between Android and iOS UI. That’s how I came up with this idea, to show all of you, how easy it is (mostly).

My provided example will contain also several different toggles, so you can really test in UI level, how elements work together. It especially is helpful for ListTile.

Alright, let’s dig into it!

TL;DR

Video. iOS (first part), Android (second part).

Customised Widget List

Generic -> Android <-> iOS
Button -> Raised Button <-> CupertinoButton.filled
Text Button ->Flat Button <-> CupertinoButton
Clickable Text -> Flat Button <-> GestureDetector + Text
Scaffold -> Scaffold <-> CupertinoPageScaffold
List Section Name -> Custom <-> Custom
List Tile -> Customised List Tile <-> Custom
Search -> Custom <-> Custom
Text Field -> TextFormField <-> Container + CupertinoTextField
Bottom Sheet/Action Sheet -> showModalBottomSheet(..) <-> showCupertinoModalPopup(..)
Clickable Icon -> IconButton <-> GestureDetector + Icon
Icon -> Icon <-> Icon
Loading Widget -> CircularProgressIndicator <-> CupertinoActivityIndicator
Alert Dialog -> AlertDialog <-> CupertinoAlertDialog
Notification Icon -> Icon <-> Icon
Check Box -> CheckBox <-> GestureDetector + Icon
Date Time Picker -> showDateTimePicker(..) <-> showModalBottomSheet(..) + CupertinoDatePicker

Repo (Advanced branch)

https://bitbucket.org/deimantasa/tutorial-material-and-cupertino/src/advanced/

Basic Widgets

With widgets as Text Button, ClickableText, Icon, etc there is not much to say. You generally just split logic for Android and iOS and use appropriate widgets (which are already implemented) to render visually.

Advance Widgets

Now here is more interesting, because Flutter as for this day doesn’t have many equivalent widgets as it has for Material. And one of the examples is ListTile. It took me quite a while to make it bullet proof. But I tried to match it to our design and iOS standards as much as possible.
You also might face issue for ListTile, once trailing text is too long. For that, you can use FixedListTileTrailingWidget. It simply limits width of the widget so you won’t have any overflowing errors.

Also we have separate implementation for picking the date. That’s quite unfortunate. For Android side we can simply use showDatePicker but on iOS we’ve to use custom implementation to make it look natively .

Platform Widget Button

Within the project you will notice use of PlatformWidgetButton. That’s the generic class, which is used in order to gather generic data for the data requirements and it’s used while showing Dialogs or BottomSheet/ActionSheet.

Afterwards, logic is strictly split between Android and iOS in order to render a perfect UI which matches both designs reusing same data.

And that’s about it. Hopefully it helps you to build native UI’s and get even better in Flutter land!

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