All Ruby on Rails Node JS Android iOS React Native Frontend

Introduction to Flutter: Part 1

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.

Getting started - installing

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:

  • Download Flutter SDK from official website and extract it
  • Add path to previously extracted SDK to your PATH variable
  • Run flutter doctor tool to check if everything is configured correctly

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.

Creating your first application

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.

Create project

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).

Dart

To write applications in Flutter, You need to use the Dart language. Dart is scripting language, which in my opinion, is somewhat similar to both Java and JavaScript. You can check this language following this link: https://www.dartlang.org/ I will not be writing more about Dart in this post - it is about Flutter, not Dart. All examples of code mentioned in this post are written in Dart, that’s why you can learn this language a little bit during reading it (but if you would like to learn it a bit more, please look at link mentioned above).

Widgets

Ok, let’s look at application we just created. We are interested in main.dart file, located as shown here:

pasted image 0

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.

Creating your own Widget

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):

pasted image 0 (1)

Ok, now let’s add our TextFields. Update your note_details_widget as shown below:

Let me explain the code in detail:

  • TextFormField is text field widget, we specify decoration and label for both of them - try to change it to different value to see results
  • Both TextFormFields are wrapped into column widget, which makes them aligned one above another
  • MainAxisAlignment makes our widgets align to left
  • Column is wrapped into container in case to add some margins

Now, build your application and run it. It should look like this:

pasted image 0 (2)

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/


Part 2: https://www.netguru.co/codestories/introduction-to-flutter-part-2

Part 3: https://www.netguru.co/codestories/introduction-to-flutter-part-3 

Let's make the world better for everyone - join us
New Call-to-action
READ ALSO FROM iOS
Read also
Need a successful project?
Estimate project or contact us