Elementary Dart, Flutter for Beginners (Sanjib Sinha) (z-library.sk, 1lib.sk, z-lib.sk)

Elementary Dart and Flutter for Beginners Sanjib Sinha This book is for sale at http://leanpub.com/elementarydartandflutterforbeginners This version was published on 2022-03-22 This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and many iterations to get reader feedback, pivot until you have the right book and build traction once you do. © 2022 Sanjib Sinha

Contents What are important concepts in Dart . . . . . . . . . . . . 1 A Few Words About DART IDE . . . . . . . . . . . . . . 5 Why Dart Language? . . . . . . . . . . . . . . . . . . . . 9 Variable in Dart . . . . . . . . . . . . . . . . . . . . . . . . 14 What is null safety in Dart . . . . . . . . . . . . . . . . . 16 What is Null Safety in Flutter . . . . . . . . . . . . . . . . 19 What is “type” in Dart and Flutter . . . . . . . . . . . . . 23 How to implement types in Flutter . . . . . . . . . . . . . 28 Difference between final and constant . . . . . . . . . . . 31 Introduction to core libraries in Dart . . . . . . . . . . . . 35 What is a Boolean in Dart and Flutter . . . . . . . . . . . 38 What are String values in Dart and Flutter . . . . . . . . 43 Lists in Dart . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Why Map is important in Dart and Flutter . . . . . . . . 54 Arithmetic Operators in Dart . . . . . . . . . . . . . . . . 62 Equality and relational operators . . . . . . . . . . . . . . 65 What are Logical Operators . . . . . . . . . . . . . . . . . 70 Logical Operators in Dart . . . . . . . . . . . . . . . . . . 72 Assignment Operators . . . . . . . . . . . . . . . . . . . . 73 What is Conditional Expressions in Dart . . . . . . . . . 77 Does Flutter require Dart . . . . . . . . . . . . . . . . . . . . 80 Structure of a Flutter Application . . . . . . . . . . . . . 83 What is Dart and Flutter function . . . . . . . . . . . . . 85 What are parameters in Dart . . . . . . . . . . . . . . . . 91

CONTENTS What are top level functions in Dart . . . . . . . . . . . . 97 What is Class in Dart . . . . . . . . . . . . . . . . . . . . 106 How to use Dart and Flutter Class . . . . . . . . . . . . . 112 Flutter Structure for Beginner . . . . . . . . . . . . . . . . 116 How the class extends in Flutter . . . . . . . . . . . . . . . 124 What is static in Flutter . . . . . . . . . . . . . . . . . . . 131 Let’s build the first Flutter App . . . . . . . . . . . . . . . 142 What is Flutter Container . . . . . . . . . . . . . . . . . . 150 Column, Image and Card in Flutter . . . . . . . . . . . . 157 How to use Google Fonts in Flutter . . . . . . . . . . . . 166 Refactoring Code, Anonymous function, Stateful Widget 177 Refactoring code in Flutter and building Custom Widgets 177 How to place Images properly inside a Row in Flutter . . 190 What is anonymous function in Flutter . . . . . . . . . . 199 How to use variable in Flutter . . . . . . . . . . . . . . . 205 Stateful Widget in Flutter . . . . . . . . . . . . . . . . . . 214 Dart Math and List in Flutter . . . . . . . . . . . . . . . . . 226 What is dart Math? . . . . . . . . . . . . . . . . . . . . . . 229 How to use Dart package in Flutter . . . . . . . . . . . . 232 What is a Flutter function example . . . . . . . . . . . . . 237 What do you mean by function . . . . . . . . . . . . . . . 244 How does a function return a Type . . . . . . . . . . . . 254 What is return type in Flutter? . . . . . . . . . . . . . . . 261 How to use list in Flutter . . . . . . . . . . . . . . . . . . 267 What Next? . . . . . . . . . . . . . . . . . . . . . . . . . . 277

What are important concepts in Dart In dart everything is Object. What does that mean actually? Let’s learn the important concepts. Are you planning to learn Flutter? Then learn the Dart Program- ming Language. At least, learn the important concepts in Dart. And the basics. It will help you to grasp the concepts of Flutter-Framework easily. We presume, you are a beginner. You have no coding background. But do not worry. We will start from the beginning. Let us learn the important concepts first. Firstly, Dart is an Object-Oriented-Programming Language. What does that mean? It means in Dart, everything is Object. To understand this, look at the world around you. We cannot live without this planet. Therefore, if this planet is an object, it must be very powerful. Because this “object” planet contains several other “objects”. We, humans are also a kind of “object”. Think about the trees. Trees are also objects. Basically, the Object-Oriented-Programming Language emulates the real world. As a result, we can quite easily build relationships between different “types” of “objects”. Now, as you probably notice, another word “type” enters our Dart- Vocabulary.

What are important concepts in Dart 2 Every object has a “type”. And we should define the “Type” before we create an “Object”. We can define the “type” of the Planet by the following way. 1 class Planet {} The same way, we can create another object Tree. And we can define the type the same way. 1 class Tree {} We can create a planet object, or a tree object in a very simple way. 1 var planet = Planet(); 2 var tree = Tree(); Since these two objects are of different types, they are not equal. Subsequently, we can check that. 1 void main() { 2 var planet = Planet(); 3 var tree = Tree(); 4 planet.runtimeType == tree.runtimeType ? print('Yes, Plan\ 5 et is Tree') 6 : print('No, Planet is not Tree.'); 7 8 // Output: No, Planet is not Tree. 9 } 10 11 class Planet {} 12 class Tree {}

What are important concepts in Dart 3 As a result, we have learned two most important concepts. Dart has many “types” of “objects”. We will learn them as we progress. We will also learn how to write a Class, and create an Object in detail. As an absolute beginner you just remember a few rules. 1 Dart is an Object-Oriented-Programming. 2 3 Everything in Dart is Object. 4 5 Everything we can place in a variable is an Object. 6 7 Every Object has its own Type. Therefore two different ty\ 8 pe of Objects are not same. 9 10 Last but not least. We can place any “Type” of “Object” i\ 11 n a “Variable”. As a result, a “Variable” can change the \ 12 value of that “Type” of “Object” only. But the “Variable”\ 13 cannot change the “Type”. We can take a look at the following code. The syntax may be unknown. However, as a beginner you do not have to worry. We will learn them in the coming sections. 1 main() { 2 /// everything in Dart is Object 3 /// Object is an instance of Class 4 /// 5 6 Person? person = Person(); 7 person.name = 'I am a Person Object in Dart'; 8 print(person.name); 9 // I am a Person Object in Dart 10

What are important concepts in Dart 4 11 Employee? emp = Employee(); 12 emp.person = Person(); 13 emp.person!.name = 'I am an Employee Object with name X'; 14 print(emp.person!.name); 15 // I am an Employee Object with name X 16 /// Now we can place the objects in variables 17 /// 18 var placeHolder = emp; 19 placeHolder.person!.name = 'I am a variable, I can change\ 20 my value.' 21 ' But I cannot change my Type.'; 22 print(placeHolder.person!.name); 23 // I am a variable, I can change my value. But I cannot c\ 24 hange my Type. 25 /// changing value 26 /// 27 placeHolder.person!.name = 'I am a variable, so I am chan\ 28 ging my value.' 29 ' But I cannot change my Type.'; 30 print(placeHolder.person!.name); 31 // I am a variable, so I am changing my value. But I cann\ 32 ot change my Type. 33 34 // placeHolder = person; 35 // we cannot change the Type 36 } 37 38 class Person { 39 late String? name; 40 } 41 42 class Employee { 43 late Person? person; 44 } 45

What are important concepts in Dart 5 46 /** 47 I am a Person Object in Dart 48 I am an Employee Object with name X 49 I am a variable, I can change my value. But I cannot chan\ 50 ge my Type. 51 I am a variable, so I am changing my value. But I cannot \ 52 change my Type. 53 54 */ Please read the comments we have written in the above code. That will explain many things. A Few Words About DART IDE We need a good Integrated Development Environment or IDE to build Application in Dart Programming Language. We can use any good IDE. However, our first choice is Visual Studio Code. Visual Studio Code is a source-code editor made by Microsoft for Windows, Linux and macOS. It has many features. Most importantly we can debug our code. And besides, it has support for syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. TheAndroid Studio is also good. Even you can download and install the IntelliJ IDEA Community Edition. To test our code, we also need to install Dart SDK in our local system. If you install Flutter and Dart plugin in any IDE, that will also work. In that case, you don’t need Dart SDK in your Operating System.

What are important concepts in Dart 6 Installing any IDE in Windows is comparatively easy. Download the “.exe” file from the official web site and double-click to launch it. This is recommended. You can also download the ZIP file and unpack it to the program files. You will find the android-studio bin folder where you can launch the respective “.exe” files. However, downloading the “.exe” file from the official web site and launching it online is recommended. Installing Android Studio on MAC is not a complicated process. You need to launch Android Studio DMG file and then drag and drop the Android Studio into the Applications folder. After that, the launching process is easy. The set-up Wizard will guide you through the rest part. For devel- opment, you need to download the Android SDK components. I will recommend to use Linux as the main operating system. Why? Because Android as a framework will always execute better on top of the Linux Kernel. Installing Dart SDK in Linux is also easy. Why do we need the Dart SDK? Because it has the libraries and command-line tools that we need to develop all kinds of Dart applications, web, command-line or server apps. To install Dart, first open your terminal, and then you can issue the following commands:

What are important concepts in Dart 7 1 sudo apt-get update 2 3 sudo apt-get install apt-transport-https 4 5 sudo sh -c 'curl https://dl-ssl.google.com/linux/linu\ 6 x_signing_key.pub | apt-key add -' 7 8 sudo sh -c 'curl https://storage.googleapis.com/downl\ 9 oad.dartlang.org/linux/debian/dart_stable.list > /etc/apt\ 10 /sources.list.d/dart_stable.list' 11 After that, install the stable release of the Dart SDK. 12 13 14 sudo apt-get update 15 16 sudo apt-get install dart 17 After that you can check your Dart version: 18 19 $ dart --version 20 Dart SDK version: 2.15.1 (stable) (Tue Dec 14 13:32:21 20\ 21 21 +0100) on "linux_x64" Installing Android Studio on Linux, is quite simple and user friendly. You don’t have to issue any command-line instructions. Download the ZIP file and unpack it to either “/usr/local/” or “/opt/” for shared users. Now, navigate to the “/android-studio/bin/” directory and execute the “studio.sh” file with the help of this command: 1 ./studio.sh If it asks to install the required libraries for 64-bit Linux machines. According to the instruction, install it.

What are important concepts in Dart 8 If you are a first time user of Android Studio, you can import previous Android Studio settings. Or, you may skip it by clicking the OK button. The Android Studio Wizard will guide you to set it up; remember, this set-up includes downloading Android SDK components. It is required for development. Moreover, in the configure section you can install Flutter and Dart plugins. To get maximum of Android Studio in a 64-bit Linux machine, we need to install some 32-bit libraries. The following command-line instructions will work for us. 1 sudo apt-get install libc6:i386 libncurses5:i386 libstdc+\ 2 +6:i386 lib32z1 libbz2-1.0:i386 The command will ask for the root password. For the 64-bit Fedora, the command is different. 1 sudo yum install zlib.i686 ncurses-libs.i686 bzip2-libs.i\ 2 686 Now, we are ready to work in Android Studio. Comparatively, installing the IntelliJ Community Edition is much easier. You can install it from the Ubuntu Software Center. Open the Software centre and type the IntelliJ Community Edition. It will show up. You can also install the IntelliJ Community through command-line instruction on the terminal: 1 sudo snap install intellij-idea-community –classic

What are important concepts in Dart 9 The applications in the Ubuntu Software centre are basically “snap” packages. Therefore, if we already have “snap” packages installed in our machine, we can install it through the terminal. After the primary installation is over, don’t forget to install the Dart plugins. We keep our Dart files in the “bin” folder, and run the program to get the output on the Console below. Why Dart Language? We can answer this question in one sentence. The Dart Programming Language is a great fit for both – Mobile Apps and Web Apps. It is free and open source. Moreover, theDart repository is available at https://github.com/dart- lang. And at the same time, you may get the feel of the language at the official website: https://www.dartlang.org/. Although we can use the Dart for both mobile and web develop- ment, yet it is more popular for building Mobile Application. For the same reason, theDart became popular alongwith the Flutter framework for developing cross-platform mobile apps. What is Dart and flutter? Flutter is an Open-Source UI SDK developed by Google. The framework Flutter allows the development of iOS and Android applications. Since the Flutter uses Dart as the programming language, learning Dart helps us to learn the Flutter also.

What are important concepts in Dart 10 Dart is an Open-Source, programming language. It is easy to learn. Therefore we can learn Dart to build stable, and creates high- performance applications. This book serves as a good introduction to the Dart Programming Language. Why? Because we have designed it to give you a complete idea about how Dart works. For small operations, you can use the online code editor: https://dartpad.dartlang.org. However, for package building and creating projects, we need the Code editors like Visual Studio Code, Android Studio, or IntelliJ Community. The Visual Studio Code also has Dart language testing support. It is easy to install required Plugins. Furthermore, if we want to build Mobile Applications, using Dart and Flutter, they are more useful. Let us examine why we should learn the Dart? What is Dart best for? Firstly, it is extremely productive. Secondly, if you already know any object-oriented programming language such as C++, C# or Java, it is easy to learn the Dart language. Thirdly, if you are an absolute beginner, then it is good that you start with the Dart which has clear and concise syntax. Finally, you will also have great support of rich and powerful core libraries and thousands of packages.

What are important concepts in Dart 11 As an absolute beginner, you don’t have to worry about the libraries now. We will learn together to use them later when the time comes. The performance of the Dart is high across mobile devices and the web because it optimizes the compilation power. Besides, its portability rate is extremely good. It compiles to ARM and x86 code so that Dart mobile apps can run on iOS and Android and beyond. Now here is a complimentary note for the absolute beginners. There is a difference between ARM and X86 processors. The ARM processors follow a RISC (Reduced Instruction Set Com- puter) architecture, while x86 processors are CISC (Complex In- struction set Architecture). All together, because of these features, x86 processors are consid- ered to be faster than ARM. And at the same time it is fast for web apps also. Let us see our first Dart code. 1 main() { 2 print("Hello World!"); 3 } 4 5 //output 6 Hello World! Let us write some more console based code to get the feel of Dart. At the same time, we will know what are the most basic syntax of the Dart and how they work together.

What are important concepts in Dart 12 1 main() { 2 print("Hello World!"); 3 //calling a function 4 doSomething(); 5 } 6 //define a function 7 doSomething(){ 8 print("Do something!") 9 //calling a function inside another function 10 lifeIsShort(); 11 } 12 //defining another function 13 lifeIsShort(){ 14 print("Life is too short to do so many things."); 15 } In the above code, we have defined two functions first. Next, we have nested another function inside one function. finally, we have called them together through a single function. However, there is a mistake in our code. It is an intended mistake so that you understand how debugging takes place in Dart. Let us watch the output: 1 bin/main.dart:12:24: Error: Expected ';' after this. 2 print("Do something!") We have not place a semicolon after displaying an output. Let us correct it and run the program again. In Android Studio you may use “Shift+F10” to run the code. Now it is OK.

What are important concepts in Dart 13 1 Hello World! 2 Do something! 3 Life is too short to do so many things. We have learned many things in our first code. The very first lesson teaches us the most basic thing of all knowl- edge. You learn from your mistake. Is Dart easy? Yes, the Dart programming language is very yes. However, we should always be careful about the syntactical errors. Missing a semicolon or a dollar sign before a variable could be a big game changer. Especially, when you are going to build a large scale mobile application on iOS or Android, be very careful about these small mistakes. Syntax-wise Dart has similarities with C, C#, Python, Java and JavaScript. You have seen how we have used the “comments” in our code. Try to contribute as much comment as possible to clear your standpoint as a developer. It is necessary because when another person reads your code, she will understand it. Moreover she will visualize it as you have visualized your code while writing. We will discuss comments at the right time. We have started our code with the top level function “main()”. It is required and special in nature because here the application executes.

What are important concepts in Dart 14 So inside the main() function we have called a function “doSome- thing()” which has a nested-function inside it “lifeIsShort()”. Each function gives a display output with the function “print()”. It is a handy way to display any output. Consequently, we have covered many things in our first program. Variable in Dart In Dart everything is an Object. Therefore a variable in Dart stores references to an Object. Let us create a variable and initialise. 1 var name = 'Mutudu'; As the variables store references, in the above example the same thing happens. The variable called “name” contains a reference to a “String” object with a value of “Mutudu”. Every Object in Dart has a “type”. In the above code, the “type” of the “name”variable is inferred to be a “String”. Why? Because we have not specified it, or mentioned it. On the contrary, we could have specified the “type”. 1 String name = 'Mutudu'; There is another possibility. An Object may not be restricted to any particular “type”. In that case, we can initialise it like the following way.

What are important concepts in Dart 15 1 Object name = 'Mutudu'; With reference to the above discussion, we have learned a few important facts about a variable. In Dart, a variable is always associated with a “type”. We can either specify the “type”, or we can allow the variable to infer it. Like any other programming language, the Dart has many types. We will discuss built in types in the coming section. So far we have seen only one “Type”. The String. However, there are other types also. The integer, the boolean and a few others. We have also learned that the Dart allows us to be strongly-typed. And at the same time we can be duck-typed. The phrase “strongly-typed” means we specify the “type”.Whenwe do not specify the “type”, it is known as the “duck-typed”. If we don’t want to be specific about the “type”, we can use keywords like “var”, “Object”, or “dynamic”. To understand the mechanism behind storing reference is simple. Wheneverwe declare and initialise a variable, a spot on thememory is booked. And in that spot the object is stored. And the variable always refers to that spot. Since the name is “variable”, this reference can change. However, a question remains. Suppose we do not initialise the variable. 1 var name; In that case, does this variable store any reference? Does it contain any value? In the next section we will discuss that.

What are important concepts in Dart 16 What is null safety in Dart Dart and Flutter, both, practice the “null-safety”. A variable must have a value. The word “NULL” in computer means “no value”. It also means “undefined”, “uninitialized” or “empty” value. The word “NULL” neither means 0. Nor, it means a blank String. Null safety in Dart means, by default, the “type” in Dart code is not NULL. Each “type” must have a well-defined value. What does that mean? When we declare a “type” for a variable, the variable must have a value. 1 void main() { 2 int x; 3 x = 0; 4 print(x); 5 x = 82; 6 int y; 7 y = x; 8 print(y); 9 } 10 // output 11 0 12 82 However, a variable might have a null value. Although we have declared a “type” for that variable. In that case, the Dart ensures that we have assigned a correct value for that variable. Otherwise, it will throw an error. Suppose we have written the following code.