Flutter is a multi platform, open source, and free framework for creating mobile applications, created by Google. It is very easy to learn and currently it is getting more and more popular. With this blogpost you will learn some basic stuff about Flutter, and after reading it, you will be able to create a simple application using this technology.
First step, which you need to do, if you want to create Flutter applications, is of course installing Flutter. You can follow this tutorial, to install it on your platform: https://flutter.io/get-started/install/
If you have got Android SDK installed and configured, to install Flutter you only need to:
To create applications using Flutter, you can use either Android Studio or IntelliJ IDEA. The only requirement is a Flutter plugin installed in your IDE.
Ok, let’s start with creating a simple application, which will explain you the basic ideas of flutter. I will explain it using a simple notepad application as an example. This application will allow you to create notes and keep them in a local database.
To create a new application project, In your IntelliJ IDEA select File > New > Project, then choose Flutter option (If you have Flutter plugin installed, you will see this option). Choose a name for the project (I’ve named it ‘notepad’) and leave all other options with default values (we will be using neither Android nor iOS native code, so it does not matter which languages you choose).
Ok, let’s look at application we just created. We are interested in main.dart file, located as shown here:
If you open this file, you will see this code (I have removed all comments, to make it shorter):
As you can see, MyApp class is extending StatelessWidget, and MyHomePage is extending StatefulWidget. Widgets are one of the most important components in Flutter. If you are creating Android application, you are using Activities, Fragments and Views. In Flutter, instead of all these components, you have Widgets. Your application is always hierarchy of widgets. Every widget defines its own layout. You can combine many small widgets (for example using Row, Column or any other widget which is defined in Flutter framework) to create layout for your Widget.
There are 2 basic types of widgets: StatefulWidget and StatelessWidget. StatelessWidget displays only static data, and cannot change any of it’s own properties, while StatefulWidget has state, which can be updated. Let’s look at the simplest example of StatelessWidget:
As I mentioned above, StatelessWidget only displays static data - like text or images - they cannot update its state, for example while animating (of course, they can contain StatefulWidgets, which can be animated, scrollable etc.). Now let’s look at an example StatefulWidget:
As you can see, StatefulWidget has a setState() method, which takes a lambda as a parameter. Whenever you call the setState method, it executes this lambda, rebuilding your widget. That’s why you can use this method for updating you state properties. In this example, after pressing button, it is incrementing counter, and then building your layout again, so you will see text with updated counter value.
You can see many examples of applications written with this architecture: every action (like pressing of a button) is updating state of one of your top-level widgets, and according to its properties, is displaying proper view. I agree this architecture is perfect when you are learning Flutter, but I do not recommend this solution for building larger applications. Please take a look at the Architecture section to find out which of the popular architecture patterns are most suitable for Flutter.
Ok, it’s high time to try creating widgets yourself. As you can remember, we are creating application for creating notes. So let’s create Widget, which gives us ability to enter note’s title and description.
We would like to create two text fields, one above another. To do it, we will use the Column widget. Our top level widget will be the Scaffold. Scaffold is basic material design screen - it contains AppBar, a floating action button, bottom navigation etc.
We’ll start with creation of a new dart file. Come back to your IDE, right-click on your lib folder (where currently is main.dart file), and create new dart file note_details_widget.dart. Open it (it’s empty), and paste the following code:
Then, go back to your main.dart file, remove all code inside it and replace it with this:
Check if your application is working. Run it and you should see this screen (on android device):
Ok, now let’s add our TextFields. Update your note_details_widget as shown below:
Let me explain the code in detail:
Now, build your application and run it. It should look like this:
And that’s it! You have just created your first layout in Flutter. To find out more about Widgets please look at this link: https://flutter.io/widgets/ and on this tutorial: https://flutter.io/tutorials/layout/