Setting Up VS Code

We will use VS Code to write our flutter code throughout this tutorial. There are many other options available as well. I personally use IntelliJ IDEA as it comes with a ton of features and customisation.

  • Download the latest version of VS Code if you don’t have it installed from here.
  • Once installed, open the extensions tab and search ‘Flutter’.
  • Select the Flutter plugin and click install. Reload VS Code once installation is complete.

flutter

  • In VS Code, go to View > Command Palette and type in doctor. Click on Run Flutter Doctor. Flutter doctor is a tool that checks if there is any error with your flutter installation.

flutter

Project Setup

In VS Code, open the View > Command Palette. Type in ‘flutter’ and click on New Project. Enter any name that you want.

flutter

This will set up a base project for you. Let’s run this application. I will be running the application on an Android Device, so make sure you have Android SDK installed (instructions available on the same page when you install flutter). If you want to run the app on iOS check out these instructions.

Flutter provides simple commands to run the project from terminal, but the VS Code plugin also comes with a handy tool so you don’t have to type in terminal commands.

Make sure you have a device/emulator connected. Go to Debug > Start Debugging. Flutter will automatically detect the connected device and run the application on it.

Hot Reload and Restart

Hot Reload – When in debugging mode, and you change the code of your application, just press Ctrl+S (Windows) or Cmd+S (Mac), the changes will appear within a second. This is one of the very convenient and attractive feature of Flutter.

Hot Restart – If you want to Reload the whole application, press the green reload button in the debugging bar controls. Flutter’s Reload is also fast, within a few seconds.

This type of speed is not comparable with native iOS and Android development which take ages to r run the application after a change.

Application Basics

In the base project that Flutter has created, there will be a folder named lib, inside this folder will be a file named main.dart. This is the entry point of the application. Go ahead and delete all the code in that file, yes you read it right, delete all the existing code (Ctrl/Cmd + A and then Delete). You will write that code from scratch in this section so that you have a clear understanding of what’s going on.

Everything is a Widget

Everything in Flutter is a Widget. Almost every UI/non-UI element that you use is a Widget. In fact your complete application is a giant Widget.

Widget’s are the building blocks of Flutter. They are the lego pieces that you put together to build something bigger. Text, Buttons, Images, Cards, Dialogs, everything is a Widget.

There are two types of Widgets, Stateless Widget and Stateful Widget. Let’s first use a Widget or two and then we will learn more about these two types of widgets.

Basic App

As you know everything is a Widget and we need a Widget to show something up on the screen, but where do you get these widget’s from?…..From Flutter SDK, duhhh!!! Flutter provides different types of widgets, Basic widgets, Material style widgets and Cupertino styled widgets. We are going to use the Material styled Widgets to build our application.

It’s time to start writing code, open the main.dart file, and import the material package.

The entry point to all Dart applications is the main function, so we need to define one.

The material package that you just imported contains a function named runApp(), this function takes a Widget and shows it up on the screen. The material package has a Widget named MaterialApp that we will pass inside this function.

Now there is a lot going on in here, let’s break it down piece by piece. MaterialApp is a Widget that we need as root of our application. This widget takes in various parameters:

  • title: Main title of the application.
  • theme: Theme of the application that lets you define properties such as status bar colour and all.
  • home: This parameter takes in another Widget that is suppose to show up on the screen.

If you run the application, you will see a very ugly ‘Hello World’. Let’s fix this. Any Widget that we use such as Text or Button, if we need that Widget to look like a Material Widget, we need to make sure that it has Material as one of its parent. So let’s wrap the it with a Material widget.

Run the application and now our Hello World looks much better. There is a better way though. The Scaffold Widget.

Notice we have removed the Material Widget, in favour of a new widget called Scaffold. Scaffold widget applies the Material widget for you so you don’t have to do it manually. Scaffold also gives us various other functionalities such as AppBar, BottomBar (we will explore this in next tutorial). The Centre widget will centre the text inside the screen, which previously was lingering behind the status bar.

Nesting! Nesting everywhere!

You might be shocked or feeling weird seeing the code being nested so much. Well, get accustomed to it, because this is how Flutter is going to work. Lots and lots of nesting!

Never miss a post from TheTechnoCafe


Extracting Widgets

Don’t worry, your complete app is not going to be in a single file with 1000 level of nesting. Rather, this type of nesting makes the framework even more modular. We can extract and kind of Widget into its own Widget. Let’s see how.

Make a class named MyApp that extends StatelessWidget and override the build method. In the build method return the MaterialWidget that was earlier passed in the runApp function. Remove all the code inside runApp function and pass in an instance of MyApp class instead.

Slowly and steadily take in this practice of extracting widgets into their own class as you are going to do this a lot, and I mean A LOT! while developing Flutter applications.

In a nutshell, all you are doing is taking a few levels of nested widgets and grouping them into a single widget which can be reused all over the project. Make sure your class extends StatelessWidget (or StatefulWidget, you will see the difference in a short while).

Stateful VS Stateless Widgets

Pay close attention! Very important concepts ahead.

There are two types of widgets in Flutter, Stateful and Stateless. Stateless widgets don’t have any state and cannot be changed. For example, Text is a StatelessWidget, once created you cannot the change the text of the created Widget, if and when text is needed to be changed, a completely new Widget is created with the new text.

StatefulWidgets on the other hand, have an internal state attached to them. Now what do I mean when I say a state is attached. Basically the Widget contains in itself a set of data (can be anything), which can be changed and alter widget’s behaviour, look & feel or it’s functionality. For example, CheckBox is a StatefulWidget. CheckBox maintains a boolean in its self which donates if the box is checked or not, and depending on this boolean the UI of CheckBox changes. StatefulWidgets are created a bit differently than Stateless Widget.

Here is how we would write the MyApp class as a Stateful widget.

In a StatefulWidet, you also need to define a State class. Right now this doesn’t utilise the capability of having a State, so let’s do that.

Press the button and see the Text change. Make sure whenever you call the setState function when you want the changes to come into effect. With setState you are telling Flutter to redraw the MyApp Widget according to the new state. Try removing the setState function and you will notice nothing happens when you press the button. Don’t worry about the RaisedButton and Column Widget used in above example. You will learn more about them in next tutorial.

 

<< Previous Tutorial – 1 – Installation and Overview


Gurleen Sethi

How can I tell you about myself in just a few lines, to get to know me you can reach out to me, email, text, call, or any other method of communication you like. I am always there for you!

Leave a Reply

Your email address will not be published. Required fields are marked *

fifteen − seven =