2nd day with Flutter - Dive into Dart!!

             

Hello Friends,

This is 2nd blog on this series #30DaysOfFlutter.

In the last blog we learn about how to install/setup the flutter. You can check my previous blog if you had not done it yet -

https://bigakash.blogspot.com/2021/02/1st-day-with-flutter-hello-flutter.html

I know I am not able to post blog regularly but I will try now to be regular for this series.

So Lets Gets Start!!

As we know for flutter development the programming language used is #Dart which is made by Google, so in this post we will dive into dart language and try to get familiar with it so that we can start writing flutter applications.

Dart is an object oriented programming language and its syntax is very much smilar to java or other object oriented langauge. We will see here some important concepts/features/syntax that differentiate it with other languages -

1. Main function - Each app must have a top level main function as shown below -

// Entry point of the application
void main() {
  var name = 'XYZ'; // Declare and initialize a  string variable.
  print(name); // Display name on console.
}

2. Functions - Function are usually created in following way -

Integer sun(Integer a, Integer b) {
  return a+b;
}

You just need to define return type, function name and function body to create a function. In Dart inserting the return type is even not required as it can use type inference to infer the return type.

Arrow function can also be used which is a function with only one line of code for example -

void printName(String name) => print(name);

3. Function Parameters - A function can have 2 types of parameters : Required & Optional

The optional parameter can be of two types - Named & Positional.

Lets see an example of 'Named' parameter first which are declared using curly brackets ({}).

/// Two optional parameters - firstName & lastName
void printHelloWorld({String firstName, String lastName}) { print(...) }

We can call this function as -

printHelloWorld(firstName: 'ABCD', lastName: 'EFGH');

Also If required you can make 'Named' parameters mandatory in a function by annotating them with @required attribute.

To declare 'Positional' parameters we need to use square brackets ([]). Following is an example of it -

String printMessage(String firstName, String lastNAme, [String message]) {
  var text = 'Hello $firstName $lastNAme';
  if (message != null) {
    text = '$result $message!!';
  }
  return text;
}

You can call this function with or without the 'message' parameter as -

printMessage('Akash', 'Bisariya');   // Hello Akash Bisariya

printMessage('Akash', 'Bisariya', 'Good evening')   // Hello Akash Bisariya GoodEvening!!

 

4. Variables - Dart does not have keywords public, protected and private. If an identifier starts with an underscore ( _ ) , it will be private to its library/dart app. You can also use 'var' keyword to create a variable -

var name = 'XYZ';

Dart language has some built in types -

• numbers - It's further divided into 2 types - integers(int) & doubles(double)
• strings - You can use either single '' or double "" quotes to create string.
• booleans - 
• lists (also known as arrays)
• sets
• maps
• runes (for expressing Unicode characters in a string such as laughing emojis)
• symbols (these are compile time constants)

5. Classes - You can define a class simply by using 'class' keyword followed by its name. You can create object of this class by using its constructor. To define class constructor we have 2 ways  -

1) Generative constructor & 2) Named constructor.

Follwing is an example of both -

class Person{ String name; String lastName; String this.age;

Person(this.name, this.lastName);  Person.newEntry(){this.age=0}   }

var p1 = new Person(2, 2);
var p2 = new Person.newEntry();

6. Mixins - Its a relatively new feature when comapring with other object oriented language like java.

By 'Mixin' we can reuse the class code in mulitple class hiearchies. Dart uses 'with' keyword for this feature.

class A extends object {
  .....

  void printMessgae() {
    print("This is mixin class")
  }
}

class B with A
  {
 ....
}

Now you can use the 'printMessage' method with the object of class B.

You can only extend the 'Mixin' class with Object class.

So friends these are some features of Dart language, we will use these features when developing the Flutter applications later.

For more detailed review of Dart language you can use the following official Doc -

https://dart.dev/guides/language/language-tour

Thanks for reading. From next post we will start developing the Flutter application.

1st day with flutter - Hello Flutter!!

Hi Friends,

I am here with you to share the First day experience of #30DaysOfFlutter.

In this series we will learn flutter together!!

So we will run today hello world application using flutter step by step.

First Step - Installation

This is the most tricky part for any new developer who is started learning Flutter. Go through following steps of installing flutter sdk.

First you need to go to flutter get-started link  as below -

https://flutter.dev/docs/get-started/install

You need to select you operating system here for downloading the Flutter installation bundle.

Here I will go for the windows OS but the steps for all the OS will be same.

After downloading extract the zip file and place the flutter folder in the desired directory for ex -  C:\src\flutter

Second Step - Add Environment Variable

This is the second important step before running our first Flutter application. 

In this we will add Flutter to Path environment variable. So first type 'env' in the start bar and select Edit Environment variables for your account.

Now under User variable  check if there is an entry called 'Path'

• If the entry exists, append the full path to flutter\bin using ; as a separator from existing values.
• If the entry doesn’t exist, create a new user variable named Path with the full path to flutter\bin as its value.

This step is also required to run Flutter commands in terminal.

Third Step - Run Flutter Doctor

From the terminal window goto the Flutter directory and run the following command -

This command will check your environment and displays a report of the status of our Flutter installation.

Final Step - Set up IDE :- Android Studio

Android studio offers a complete IDE experience for Flutter. You can also use others IDEs such as IntelliJ for an Android developer android studio is preferrable option. 

Start Android Studio and open Plugins from menu. Search for Flutter plugin and install that. Click yes when prompted to install the Dart plugin.

Now restart the Android Studio.

Create Flutter Project

Start a new Flutter project from File --> New.

Select Flutter application as the project type then click on Next.

Verify the Flutter Sdk path specifies the SDK's location. If this field is empty then provide the Flutter SDK path here - for example

C:\src\flutter

Enter the project name and then click on Next. 

Click finish.

Wait for android studio to create the project.

You may need to configure the Dart Sdk path if Dart not configure error is coming after the project creation.

You can provide Dart sdk path as below -

c:\src\flutter\bin\cache\dart-sdk

Run your First Flutter App now

In the android studio toolbar select the android device emulator before running your first app. You can also connect your own device via Usb and run the app on the device.

Yeah we have done that!!!

This is our first Flutter app running in the device. 

So we have completed the first day with flutter and running our sample flutter application.

You can find the source code on my github repository -

https://github.com/akash-bisariya/FirstFlutterApp

Thanks guys please do post any question or issue in the comments.