Repository
https://github.com/flutter/flutter
What Will I Learn?
- You will learn How To Settup Flutter Environtment
- You will learn How To Create a Flutter Project
- You will learn all the fundamentals of Dart Language
Requirements
- A strong determination and developer passion to learn Flutter
- Basic Object Oriented Programming
System Requirements
- Operating Systems: Windows 7 SP1 or later , Ubuntu, or macOS (64-bit)
- Disk Space: 700 MB (does not include disk space for IDE/tools).
IDE/Tools Requirements
- PowerShell 5.0 or newer (For Windows) You can dowload it here
- Visual Studio Code. You can dowload it here
- Command Line Tools like bash, mkdir, rm, git, curl, unzip, which (For Linux & macOS)
Difficulty
- Basic / Intermediate
Tutorial Content
Flutter is Google's mobile apps SDK for crafting high quality native interfaces Android and IOS apps in record time. Flutter works with existing code, is used by developers and organizations around the world. Flutter free and open source. In this Tutorial series you will learn how to build a customizable consistent interactive app with flutter at a high velocity you'll learn about widgets app layout retrieving data from assets and api's and more.
Setup Flutter Environtment
The first step to do is to download the code editor. In this series of tutorials I will use Visual studio code. I chose this editor because of the lightness of this editor and the ease of integrating it with flutter plugin. please go to site https://code.visualstudio.com/ and download according to the operating system you use.
Then run the process of installing visual studio code. The process is very simple just like how to install software in general. After VSCode installation process is complete please continue the following process :
Go to this site https://flutter.io/get-started/install/ and download Flutter SDK that suitable to your operating system
Extract your downloaded Flutter SDK to a folder called flutter
Open the folder using terminal (Linux or macOS) or command prompt (windows)
Add the flutter tool to your path by typing this command on your terminal:
export PATH=`pwd`/flutter/bin:$PATH
- Run the following command to see if there are any dependencies you need to install to complete the setup:
flutter doctor
The process above will check whether your computer system is compliant with computer system standards to run mobile apps development using flutter.
For Example :
[-] Android toolchain - develop for Android devices
• Android SDK at /Users/obiwan/Library/Android/sdk
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
visit https://flutter.io/setup/#android-setup for detailed instructions.
Please fix anything that is still a flaw in your system then run again flutter doctor to check if your repair works. If you are having trouble, feel free to ask me in the comments field.
- Let's Back to Visual Studio Code and go to extensions tab search dart and flutter extensions. Then click install for each of them.
Create Flutter Project
Now let's create our first Flutter Project , On Visual Studio Code follow this step
- Go to Menu Bar "View > Command Palete"
- Type flutter then select Flutter: new project
- now let's type our project name on lower-case and select folder for your Flutter Project.
The flutter project has been successfully created and you can start the Mobile Apps development using the Flutter SDK.
Fundamentals of Dart Language
Before create applications using Flutter SDK, we should learn the programming language that we will use to develop applications using this SDK. By learning the basic of dart then you will more easily understand the flutter sdk tutorial that I teach in this series.
Variable
Variable Declaration
There are two ways of declaring variables on the dart, i.e.
a. Implicit Declaration
An implicit declaration is a way of declaring a variable without specifying the data type of a variable.
var name = "iqbalhood"; \\ string
var intNumber = 3; \\ int
var doubleValue = 3.7; \\double
var condition = false; \\boolean
the way of this declaration is by typing var then give a space, type variable name, type equal to sign (= ), variable value then end with semicolon.
b. Explicit Declaration
An Explicit declaration is a way of declaring a variable with specifying the data type of a variable.
String name = "iqbalhood"; \\ string
int intNumber = 3; \\ int
double doubleValue = 3.7; \\ double
bool condition = false; \\boolean
the way of this declaration is by typing variable type then give a space, type variable name, type equal to sign (= ), variable value then end with semicolon.
Displaying Data On Console
To display the results of the coding process sometimes we need a function to print the computational results of the program code we create. On the dart the print() command is available for that task.
print("Hello Utopian");
Basic Type
We have understood how to declare variables and some examples of data types such as int, double, boolean and string. Here are some additional basic types that you need to learn on Dart are :
Number
Dart handles two type of number to represent numeric literals. There are integer and double. Notice the code below on how to declare the data type:
int intNumber = 3;
double doubleNumber = 3.7;
Boolean
Boolean is a data type that has two values that are true and false. Only two objects have type bool: the boolean literals true and false, which are both compile-time constants.
// boolean type declaration
val boolTrue = true;
val boolFalse = false;
// Check for an empty string.
var fullName = '';
assert(fullName.isEmpty);
// Check for zero.
var hitPoints = 0;
assert(hitPoints <= 0);
// Check for null.
var unicorn;
assert(unicorn == null);
// Check for NaN.
var iMeantToDoThis = 0 / 0;
assert(iMeantToDoThis.isNaN);
The above code shows how to declare boolean and its operations. You can run the code to find out the results.
Strings
In Dart, string writing can use quotation marks ("") or single quotation marks ('') .
var singleQuotation = 'Hi, Utopian!';
var DoubleQuotation = "Hi, Utopian!";
You can put the value of an expression inside a string by using ${expression}.If the expression is an identifier, you can skip the {}.
var student ='Valentino Rossi';
print(" Hello $student, Welcome to Flutter Tutorial");
print(" Name ${student.toUpperCase()}, Must be written in uppercase");
Control Flow
Control Flow on Dart includes if, for loops, and while loops. In this section you will learn how to apply some of the control flow in Dart.
If and Else Expression
In Dart, if is an expression. if it will run the code if it has true condition, and will be skipped when condition false. Just like any other programming language, If expression can be written as follows:
var test_scores = 10;
if(test_scores > 50){
print ('you are pass the exam !');
}else if(test_scores < 40){
print ('your exam score too low');
}else{
print ('you are fail the exam !');
}
For Loops
The looping in Dart is relative same with another programming language. The loops work if the condition on the brackets fulfilled. Example.
for(int number = 1; number < 6; number++){
print(number);
}
If excecuted, the code will display the number 12345.
We can also print the index of the string using ${expression} to access an index of each element from the string, We can use the following code:
var name = 'UTOPIAN';
for(int x = 0; x < name.length; x++){
print('The $x letter is ${name[x]}');
}
If excecuted, the code will display like this following block code:
The 0 letter is U
The 1 letter is T
The 2 letter is O
The 3 letter is P
The 4 letter is I
The 5 letter is A
The 6 letter is N
Function on Dart
As a programming language that carries object oriented programming, Dart also has some basic functions similar to other programming languages.
Void Function
In Dart Programming Language. Functions that are voids or often called procedures also work the same way with other programming languages. the void function does not return an output value obtained from the result of the function process. Example.
multiply(int number1, int number2){
var result = number1 * number2;
print('Multiplication result from $number1 * $number2 = $result');
}
to see the result of the function then we we need a main function to execute the function.
main(){
multiply(80,99);
}
Return Function
Non-void function is also called the return function. It is called non-void or return function because it returns the return value that comes from the output of the function process. Example.
divide(double number1, double number2){
var result = number1/number2;
return result;
}
to see the result of the function then we we need a main function to execute the function.
main(){
var x = divide(1000.0, 50.0);
print('The result of the division is $x');
}
Thank you for your time and I hope to see you in the next part of this tutorial series, If you have any questions feel free to ask in the comment field below!