P2. 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.
As previously you got brief insides, of which widgets can be represent native look for Apple users, now I’ll show you from practical part, how easily and quickly it can be done.
TL;DR
Very distinctive platform looks with exactly same functionality in Flutter can be achieved very easily.
Repo
https://bitbucket.org/deimantasa/tutorial-material-and-cupertino/src/master/
Default — Material Widget looks
Let’s build quick app showing one screen, which includes Raised Button, Flat Button, TextFormField and CircularProgressIndicator. All of that we wrap in the list.
And after running the code, both on Android and iOS you can see something similar.
Native looks — Material and Cupertino widgets
I’ve been working on several projects and my approach to tackle this is quite simple — we’ve to create a separate class where we will handle all platform specific widgets. And from the main class all we need to do is to call one method, which will handle everything under the hood.
For my project, I call it PlatformWidgetHelper . It contains method:
getAppWidget for MaterialApp and CupertinoApp;
getScaffold for CupertinoPageScaffold and Scaffold;
getButton for CupertinoButton.filled and RaisedButton;
getTextButton for CupertinoButton and FlatButton;
getLoadingWidget for CupertinoActivityIndicator and CircularProgressIndicator;
getTextField for CupertinoTextField and TextFormField;
As a BONUS for this section, I’ve included getClickableIcon for Icon with GestureDetector for iOS and IconButton for Android.
That’s our method responsible for showing right Widget depending on the platform — it’s iOS or other.
To wrap it up, all we need just to include it in our main class.
For our entry point, we call getAppWidget — just like that.
In our main HomePage, let’s localise several objects (Line 19–30) so we can share them — let’s avoid silly mistakes.
And as for our dessert — respective Scaffold containing all views:
That’s it. Everything is very self explanatory.
Best part of it — extremely distinctive looks between devices, minimal amount of code and most importantly — very reusable code.
In the next part, I will introduce you to the Widgets, which needs some more work to be equally matched.
Stay tuned!
