Exploring Flutter #1: Fast native Android & iOS apps - Should you care?
- Flutter has “hot reload” which instantly refreshes only the updated widgets in your app when you change something.
Flutter apps are coded in Dart, a modern object-oriented language.
Flutter will let you build high-performance, high-fidelity, apps for Android and iOS – all from a single codebase.
Yes, you should care because working with Flutter is fun and productive
Your first Flutter app
In this article I’ll explore:
- A look at the tiny sample app
- Use hot reload to update your app instantly
- Use a third party library for extra functionality
To get started you’ll need some tools. I’ll be using Android Studio on Ubuntu, but the SDK is of course also available for Windows and MacOS. I won’t repeat the installation guides for Android Studio and Flutter since the official guides are very good: https://flutter.io/get-started/install/
With all of that out of the way, let’s get started!
When you first start up Android Studio and have Flutter SDK installed you’ll have the option to create a new Flutter project. Flutter Application populates your project with a well commented sample application to give you a running start.
|The second step in the wizard lets you pick a name and location for the project.||I tend to avoid spaces in project names and directory names out of habit since paths with spaces sometimes is considered to be divided into two parts. The problem is less frequent these days, but using for example _ or – as a replacement is a good practice.|
|The third and last step lets you enter the company domain. For this sample I’ll pretend to be “testingflutter.com”.
The package derived for us from this domain is com.testingflutter.simpleflutterapp which is fine for us.
|Packages is a way to organize classes. You might for example want to separate logic concerning customer and supplier in two different packages like com.testingflutter.simpleflutterapp.customer and com.testingflutter.simpleflutterapp.supplier
It’s good practice to use a full domain for packages even if you don’t (yet?) own one since a package is globally unique.
Run the tiny sample app
The project created for us is ready to run from the start so let’s go ahead and try it out. The app simply shows a counter and a button to increment the counter.
The sample app in all its glory
Not very exciting, but it will let us play with Flutter with minimal effort.
The first feature to attract me to Flutter was the hot reload. A simple way to see it in action is to change something simple.
Look for the first class MyApp and change the primarySwatch to orange and the MyHomePage title to something new.
|Now press Ctrl+S to trigger hot reload.
Less than a second to refresh the app, not bad.
|Ctrl+S is actually the shortcut for “Save All” in Android Studio and IntelliJ IDEA (which AS is built on). However as you might know, there is no need to manually save files in IDEA because files are saved automatically.|
One more point worth mentioning about hot reload is that the state is preserved. As you can see in the GIF the counter continues from the previous state even after the app is reloaded.
Third party libraries
Most apps depends on third party libraries to get easy access to extra functionality. Flutter (Dart) has an easy way to add dependencies on third party libs which will be familiar to you if you’ve workd with for example Android Java/Kotlin development.
Most apps depends on third party libraries to get easy access to extra functionality. Flutter (Dart) has an easy way to add dependencies on third party libs which will be familiar to you if you’ve workd with for example Android Java/Kotlin development. You'll find plenty of useful libraries at https://pub.dartlang.org
In Flutter you’ll find the dependencies in the file pubspec.yaml in the project root directory.
I'm going to add the most simple package I know of and have it generate random English words for us: https://pub.dartlang.org/packages/english_words. I got the package name and version from the installation tab at the package page and there I can also see the import statement needed to use it in my code as well as example code in the example tab.
I'll replace the text above the counter with two new random words for every click on the button. The code to generate these words is "generateWordPairs().take(2).join(' & ')". One hot reload later and the app will now change this text on every click.
Platform specific implementation and look & feel for Android and iOS remains to be seen, but I at least seem be able to have most code in Dart.
Of course, I'm well aware that it's always easy to go through a simple tutorial in a new framework or on a new platform. I'll dig a bit deeper in the next article and I hope I'll keep liking Flutter!
I encourage you to try it out if you haven't and let me know what you think in the comments!