Flutter’s Cross-Platform Approach
--
Run one codebase but provide a multi-platform look!
Possibly, like myself, when you began learning Flutter, you yourself went through the lab exercise called, Write your first Flutter app. You may even remember, at the end when you completed both Part 1 and 2 of this exercise, you’re then greeted with this message:
I remember being somewhat disappointed with that message. Yes, indeed it runs on both an iOS phone and an Android phone, but on both phones, the app has only one ‘look and feel.’ Both used the Material design theme. If running on an iPhone, wouldn’t you have preferred the iOS-style Cupertino design theme instead? Of course, you’ve got to implement all that yourself and run the appropriate theme depending on the phone your running on.
Below are two screenshots. On the left, is the ‘Material theme’, and on the right, is the ‘Cupertino theme.’ On the left, is the chosen theme for Android phones. On the right, the theme more familiar to iPhones. Both are in the same codebase. In this article, I’ll show you how I can pick which theme to use no matter what type of phone. Wanna know how? Read on.
As in most of my articles, I use well-founded examples to demonstrate the topic at hand. In this article, as you may have already guessed, I’m going to use the very same “Write Your First App” example. However, this example will be modified to either convey the appropriate ‘look and feel’ depending on the platform it’s running on, or you can specify which look you would prefer when running it. You can get a copy for this from the following gist, write_your_first_app.dart.
I Like Screenshots. Click For Gists.
As always, I prefer using screenshots over gists to show concepts rather than just show code in my articles. I find them easier to work with frankly. However, you can click or tap on these screenshots to see the code they represent in a gist or in Github. Ironically, it’s better to read this article about mobile development on your computer than on your phone. Besides, we program on our computers — not on our phones. For now.
