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!
