Nerd For Tech
Published in

Nerd For Tech

Summer Training Program | Flutter — part 2| Vimal Daga | LW | Sarath Kumar

In our previous article, we have completed our installation process and created our flutter demo app. It is a by default hello world kind of app in flutter, which we didn’t do any coding. So in this article we will be learning how to do that. We know that flutter is a framework and the language used inside the flutter is Dart. So it is obviously important to learn the language, but learning from this article you will see a entirely different approach, we will be learning and doing the practicals rather than learning everything upfront and then developing. This approach will help you learn the concepts much more clearly.

Let’s recap of what we have done, for this example I will be creating a basics app.

Create an App

flutter create basics

So when we run this command a basics directory with a lot of files is created.

cd basics

There we can see a lot of folders and files, don’t be overwhelmed with that, Our main code of the project is lying on the lib/main.dart .

Let’ run the project:

flutter run

By this command the flutter will build your apk and install it on your android virtual device(AVD).

After it is successfully build, we can see a default screen with a counter and plus button. If you see the lib/main.dart file, you can also see the code, you won’t understand anything but simply looking at the code won’t hurt your either. Try to tweak something and see what you see. If you change the code or anything on the file, then you need to compile it. Compile means, the changes must be send to flutter. There is a concept in flutter which is called hot reload, which is one of the most preferred feature of flutter, which help to speed up the development process, one it is build for the first time, any other change you do on the code only take some seconds to reflect on the mobile app and this concept is called hot reload, after you change the code, come to the terminal and use the key “r” to hot reload. The change will be immediately reflected on the screen.

So let’s learn some basics first, Dart is a pure programming language, concept is same, syntax is different, if you are coming from any other programming language, you will be able to relate. If not don’t worry.

DART Basics

lets make a folder for learning the dart language

mkdir dart_code

cd dart_code

touch basics.dart

In dart whatever code we write, we need to write it inside a main function, that is the convention and we all should follow that because we are not the creator of dart language. So lets see how we can print something!

our code:

print(“This is a simple text to print”)

As we are using dart, if this need to be printed we need to put it inside the main function

main(){

print(“This is a simple text to print”);

}

It is very important that we need to close the statement with a semicolon(;)

To run this code,

dart basics.dart

#output

This is a simple text to print

We can define a function outside the main function and then call the function inside the main function to execute the code.

lw(){

print(“this is a simple text to print”);

}

main(){

lw();

}

This will also get the same output, so this is how we can do the programming in dart.

comments in dart

// -> this is used for single line comments

/*

This is used for multi line comments

*/

When writing the function we also pass arguments with them. Either positional arguments or named arguments.

lw({name, company_name}){

print(“this is you name, ” + name + “ and this is your company name,” + company_name);

}

lw(name:”sarath”, company:”Efuturex”);

#OUTPUT

This is your name, sarath and your company is Efuturex

This is called named arguments in Dart.

lw(name, company_name){

print(“this is you name, ” + name + “ and this is your company name,” + company_name);

}

lw(”sarath”, ”Efuturex”);

#OUTPUT

This is your name, sarath and your company is Efuturex

This is the way of writing positional arguments. We pass the data in the positional index of the arguments. We need to remember the order.

Assume that this is developed by some other developer and we want to use the function in our code. How do we use it in our code?

We need to load the file in our code, In dart it is called Library. The file basics.dart will be our library and the function we want to use is lw().

basics.dart

lw(name, company){

print(“My name is “ + name + “ and I am from company is “ + company);

}

If we want to use the lw() in any our file, we need to import it, let’s see how we can do that.

main.dart

import “basics.dart”;

main(){

lw(“sarath”, “Efuturex”);

}

#OUTPUT

This is your name, sarath and your company is Efuturex

We can use import to load the file in our code.

All the function we write , we put it in one Library, we just use it.

Flutter is where there is so many functions and give us to use that, that is why it is called a framework.

material.dart is this kind of library which flutter gives us a lot of function to use.

If you want to present something in the mobile screen, we have Text function.

This is where we end our article, in next article we will build our app and will see a lot more things there.

Cheers!

Sarath Kumar R S

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sarath Kumar R S

Sarath Kumar R S

9 Followers

Highly enthusiastic individual who is constantly looking solutions by using technology.