loading...

Dart Basics - Flutter #1

incrypt0 profile image Krishnanand Updated on ・6 min read

So Trying to learn Flutter Huh📱? Let's begin with a Hello World program in dart.
Dart is the programming language in which you are going to write code for creating beautiful flutter apps.

Without further due, let's jump right in...
Jumpp!!!

So the first thing we will need is a place where we can code.
As our main goal is to learn flutter and not dart in specific we don't have to go through the process of setting up the dart SDK separately and run dart on your local machine when tools like dartpad are here to make our lives simpler.

So if you prefer to learn dart deeply and want to set up dart development environment locally in your system go ahead and google your way into it.

Here We Go

void main(){
  print('Hello World!!');
}

Thats it..!! simple and humble..
There is nothing much to explain in this code snippet. It's just the definition of a function named 'main',
which returns a void type and displays 'Hello World!!" .
Simple as that.

Now it's important that you try it out. Go to dartpad and code it in and fire🔥 that run button.

A quick run through dart language

Run !!

Variables

We can use the var keyword in dart to declare variables apart from that if we want a variable to only have values of a particular datatype we can use the datatype name instead of the var keyword.

void main(){
  //var is the keyword used by dart to declare variables

  var name1='Ronaldo'; //here we are storing the String 'Ronaldo' to the variable name1
  var number1=7;//here integer value of 7 is stored to the variable number2

  //to enable type checking we can use the Datatype name instead of the var keyword
  //eg:

  String name2='Messi';//here name2 can only accept String datatype
  //if we provide anyother datatype(eg:int,double) it will throw an error
  int number2=10;

  print(name1);
  print(number1);
  print(name2);
  print(number2);
}

Output :

Ronaldo
7
Messi
10

Lets check what will happen if we provide a different datatype to a variable declared with a static type .

For this, we are going to change the String name2 and pass it an int.

String name2=10

now, this code will throw an error :

main.dart:15:16:
Error: A value of type 'int' can't be assigned to a variable of type 'String'.
  String name2=10;
               ^
Error: Compilation failed.

But if we change name1 to 7 or any other integer dart will not complain because we haven't specified a datatype for that variable.

Now the variables which are declared without a static type that is the variables declared using var keyword can accept any type that is given to it.such variables are said to be of dynamic type meaning it can accept any datatype given to it.

So instead of using the var keyword, we can use dynamic to declare dynamic type independent variables.
eg:

dynamic name='Ronaldo'

final and const

Now let's play with some constants. Yes!! constants.
final and const are two keywords that we use to declare immutable objects.
Now there is some difference between these two keywords but for the time being let's consider them to be the same.
Both of them are used to declare an immutable object.
After it's declared we cannot change it.

Remember they have their differences as we dive deep into flutter and dart you'll figure it out.

void main(){
  final name1='Ronaldo'; //final variable declaration of dynamic type
  final String name2='Messi'; //final variable declaration with type specified
  const name3='Sachin Tendulkar';//using the const keyword for declaring a constant
  const name4='Virat Kohli';

  print('$name1 ,$name2 ,$name3 ,$name4'); 
  //here we used a special syntax
  //to embed the value of a variable within a String
  // we can use the '$' sign and the the variable name         
  //($variable_name)
}

Go try it out on dartpad.
What will happen if we try to modify a const or final value. Obviously it will throw an error.
Let's try it.

void main(){
  const name1='Ronaldo'; //final variable declaration of dynamic type
  name1='Ibrahimović';
}

Output :

Error: Setter not found: 'name1'.
  name1='Ibrahimović';
  ^^^^^
Error: Compilation failed.

Operators

As I said earlier I am assuming basic programming knowledge for every reader here. So everyone will be familiar with operator like,
= , == , != , < , > , >= , <= , / , * , % , ++ , -- etc ..

Apart from that. Logical operators like
AND && , OR |, NOT ! will also be familiar..

So no code snippets here 🤐

Decision making in dart

Here we are..! at the core of every programming language decision making.
The most basic unit of a decision-making program will be conditional statements and we all are familiar with the good old if and else statements. Apart from that, there are some other ways to write a conditional statement.
So let's analyze a code snippet. Make sure that you read each comment in the snippet :)

void main() { 
   var  num=1; 
   if (num>0) { 
      print("number is positive"); 
   }
  else if (num<0) {
    print("number is negative");
  }
  else{
    print("number is zero");
  }
}

Nothing fancy there just the good old familiar if..else if..if syntax.

Now with the help of some ternary operator, simple if-else statements can be converted into a single-liner.
When you dive deep into flutter you will use this a lot so make sure you practice it and make note of it 📝.

void main(){
  var num=2;
  //here we convert a if else statemet into a single liner with ternery operator
  num>0 ? print("number is positive") : print("number is either zero or negative");

  //now we are converting complex else if ladders to single liners but this not recomended
  //it is not a good practice to write single line code for a complex statement
  num>0 ? print("number is positive") : num==0 ? print("number is zero") : print("number is negative");
}

Now let me introduce to another special condition ??
?? checks whether the value of the operand is null. Let's look at an example.

void main(){
  var num1 = 2;
  var num2;

  var num3 = num1 ?? 10; //this means if num1 is null then make num3 = 10 
  var num4 = num2 ?? 10;//here since we have not given value for num2 it will be null
  //so the value of num4 will be 10

  print('$num3 , $num4');
}

output :

2, 10

switch..case statements

These statements are used when we have multiple cases to check. Check out the following code snippet.

  void main() { 
   var caseNum = 2; 
   switch(caseNum) { 
      case 1: {  print("Case number is one"); } 
      break; 

      case 2: {  print("Case number is two"); } 
      break; 

      case 3: {  print("Case number is three"); } 
      break; 

      case 4: {  print("Case number is four"); } 
      break; 

      default: { print("case number is $caseNum"); } 
      break; 
   } 
}  

Depending upon the value of caseNum appropriate code is executed.
Can you guess the output here?
Also, don't forget to go and try it out on dartpad.

Loops

LOOOOOP

The interesting part of every programming language looooops!!.Let's dig right into while loop and for loop.

while loop

We all know while loops take in a boolean value as long as the boolean is true while loop keeps on running.
The following code prints out the first 5 numbers. Here the condition provided to the while loop is (num <= 5) unless this condition is false while loop keeps on running.

void main() { 
   var num = 1; 

   while(num <=5) {
     print(num);
      num++; 
   }  
}  

for loop

Here is the for loop equivalent of the above code.

void main() { 
   var num = 1; 

   for( var i = num ; i<=5; i++ ) {
     print(num); 
     num++;
   } 
}

Apart from while and for loops dart also feature for..in loop to loop through properties of an object we will learn that when we learn about classes and as we dive deeper into flutter.

Those who have a mediocre programming knowledge know about break and continue statements for loop handling. Dart also supports these statements.
Since our main goal is to learn flutter we will try these out as we go.

So that's all for this post.
Next up in this series we will explore various datatypes in dart and also dive into object-oriented programming.

So stay tuned..

Discussion

pic
Editor guide