Author:Sanjib Sinha
Are you an absolute beginner with no prior knowledge to any programming language? Still you want to be a mobile application developer? This book will teach you both. You will learn to build an Android or native iOS mobile application, from scratch, using Flutter framework, and along with it, you will learn Dart programming language.
Tags
Support Statistics
¥.00 ·
0times
Text Preview (First 20 pages)
Registered users can read the full content for free
Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.
Page
1
(This page has no text content)
Page
2
Beginning Flutter with Dart A Step by Step Guide for Beginners to Build a Basic Android or iOS Mobile Application Sanjib Sinha This book is for sale at http://leanpub.com/beginningflutterwithdart This version was published on 2021-07-28 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. © 2020 - 2021 Sanjib Sinha
Page
3
Contents 1. Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Who should read this book? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Flutter for Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Flutter for macOS and Linux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Relation between Flutter and Dart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Functions and Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Building the mobile application from scratch . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 2. Flutter and Dart Architecture: Understanding Class and Object . . . . . . . . . . . . . . . 24 A Short Introduction to Class and Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 How two objects interact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 More about classes and objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 How Flutter and Dart work together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Positional and Named argument . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 3. Dart Language Basic and its implementation in Flutter . . . . . . . . . . . . . . . . . . . . . 43 Variables Store References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Built-in Types in Dart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Suppose, you don’t like Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 More about built-in types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Understanding Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 To be True or to be False . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Introduction to Collections: Arrays are Lists in Dart . . . . . . . . . . . . . . . . . . . . . . . 52 Get, Set and Go . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Operators are Useful . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Equality and relational operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Type test operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Assignment operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Summary of this Part . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Implementing Dart concepts to Flutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 4. Digging Deep into Dart to learn Flutter Logic . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Control the flow of your code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 If and Else . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Page
4
CONTENTS Conditional Expression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Looking at Looping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 While and Do-While . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Understanding the Looping Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 For Loop Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Continue with For Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Decision making with Switch and case . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Digging Deep into Object-Oriented Programming . . . . . . . . . . . . . . . . . . . . . . . . . 89 More about Constructors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 How to implement Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 More on Functions or Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Lexical Scope in Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 A few words about Getter and Setter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 More than one Constructor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Changing the UI of the Flutter projects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 5. How to build Flutter UI using Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Common Widgets in Flutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Powerful Basic Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Anonymous Functions: Lambda, Higher Order Functions, and Lexical Closures . . . . . . . 137 Exploring Higher-Order Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Inheritance and Mixins in Dart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Mixins: Adding more Features to a Class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 6. Layouts in Flutter, Tips and Tricks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Customize child Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Layout mechanism of Flutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Library of layout widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 Abstract Class and Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 Advantage of Interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 Static Variables and Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 The ‘Closure’ is a Special Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Data Structures and Collections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Lists: Fixed Length and Growable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Set: An Unordered Collections of Unique Items . . . . . . . . . . . . . . . . . . . . . . . . . . 188 Maps: the Key, Value Pair . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Queue is Open-Ended . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Callable Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Exception Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Dart Packages and Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 7. Introduction to State Management and Form Validation in Flutter and Dart . . . . . . . 202 State is mutable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Life cycle of State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Page
5
CONTENTS Role of Controller in TextField Widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 How List and Map used in StateFul DropdownButton Widget . . . . . . . . . . . . . . . . . 222 How to Valiadate a Form using State Management . . . . . . . . . . . . . . . . . . . . . . . . 224 8. Provider: A recommended approach to manage State and Model-View-Controller Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Different approaches to state management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 A Step by Step guide to use Provider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 Model-View-Controller Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256 9. What Next… . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Page
6
1. Getting Started To start with, we need to download the Flutter framework. That is our first task. We need to go to The installation page of Flutter¹ page from where we will download and install Flutter according to your operating system. However, Flutter gets updated and upgraded quite often. For example, Text Buttons to take inputs from users are no longer the same now. In this book, you’ll get some old instances. Therefore, to get the latest update about Flutter please visit my website² We will start with Windows, first. Want to readmore old and archived Flutter related Articles and resources? Formore old and archived Flutter related Articles and Resources³ Before that we want to make one thing clear. Who should read this book? Are you an absolute beginner who without having any prior knowledge of programming language wants to build a mobile application?Well, then this book is for you. This book is not for intermediate or experienced learners or developers. Wewill try to add two things to our knowledge so that wewill start building your mobile application. First we will learn Flutter, a framework or tool that helps us to build the mobile application. Second, we will learn a programming language called Dart, with which Flutter works. If we do not understand the basic syntax and semantics of Dart, we will not be able to understand the internal activities of Flutter. We will learn both, Flutter and Dart side by side. For instance, if we find something like function and object or named parameters in a constructor, we will learn that concept in Dart. If you have no knowledge of programming language, or you have not written a single line of code, you need not worry. We will go very smooth, we will have plenty of screenshots that will explain what we are going to do. We will also learn the basic concepts of programming language through Dart; it is important, because otherwise we will not be able to understand how Flutter framework works. If you have any question, please do not hesitate to send me a mail at: <sanjib12sinha@gmail.com > ¹https://flutter.dev/docs/get-started/install ²https://flutter.sanjibsinha.com/ ³https://sanjibsinha.com
Page
7
1. Getting Started 2 Flutter for Windows Clicking the download button will automatically start downloading ziped Flutter in your Download folder. It would be around 700 MB in size. While extracting the file it would take around 1.30 GB place of your hard drive. You may copy that extracted file to elsewhere, or you may keep it there (figure 1.1). Figure 1.1 – Downloading Flutter for Windows We have kept the extracted flutter folder there and created a new ‘environment’ path for the user. Because we want to work through the command prompt, in future, we have created this global environment path. Creating a new environment variable path in any Windows operating system is also easy. In theWindows 10 operating system, we type ‘environment variable’ in the search prompt, it will automatically open up the related window for us. We can copy and paste the whole path there as the following: 1 “C:\Users\Downloads\flutter\bin”.
Page
8
1. Getting Started 3 Figure 1.2 – Creating the new environment variable path in Windows 10 Now, we can open the command prompt and type ‘flutter doctor’ to see whether we have any Flutter related IDE installed already. It will also check whether we have any connected device or not. We have not installed Android Studio or any other Flutter related IDE beforehand. The command ‘flutter doctor’ has detected that (Figure 1.3). To work with Flutter, we need a good IDE. In fact, when we were downloading Flutter, it indicated that we should install Android Studio or any good IDE where we would have a connected device. The connected device is nothing but a virtual mobile device where we can see and test our mobile application. Android Studio should be the best choice. It is widely used and Flutter home page also suggests to download and install that IDE.
Page
9
1. Getting Started 4 Figure 1.3 – Flutter Doctor Summary in Windows 10 In Flutter Doctor summary, we have found that Android Studio has not been installed and there is no device available. We will do that in our macOS and Linux machines, because we will use any one of that operating system to learn Flutter and Dart together. Flutter for macOS and Linux Downloading Flutter for macOS and Linux is same. It will download the “flutter_linux_1.17.2- stable.tar.xz” file in your “Downloads” folder. Next we will issue the following command to extract Flutter, on our terminal: 1 //code 1.1 2 tar xf flutter_linux_1.17.2-stable.tar.xz Now we can copy this extracted ‘flutter’ directory to a suitable place, where we will build our first mobile application. In the ‘Documents’ directory, we have created another directory named ‘development’. We will keep the extracted ‘flutter’ directory there. Just like Windows 10, we will now set the global path for ‘flutter’, so that we can use ‘flutter’ command, anywhere in our machine, in the future. We will do that using ‘vim’ or ‘nano’ text editor, that works on the terminal. By the way, the commands are same for any macOS or Linux operating system. If you type the following command, the nano text editor will open up the ‘bashrc’ file.
Page
10
1. Getting Started 5 1 //code 1.2 2 nano ~/.bashrc At the end of the ‘bashrc’ file we will add this line: 1 //code 1.3 2 3 export PATH=$PATH:/home/ss/Documents/development/flutter/bin:$PATH We have to mention the full path as given above. We have kept our extracted ‘flutter/bin’ folder in the ‘/home/ss/Documents/development’ directory. Our next step will be to download the Android Studio. Download the zipped folder and extract it anywhere in the machine. We have kept it in our ‘/home/’ directory. Next, issue this command: 1 //code 1.4 2 ss@ss-desktop:~$ cd android-studio/bin/ 3 ss@ss-desktop:~/android-studio/bin$ ./studio.sh It will open up the Android Studio for us (figure 1.4). Once the Android Studio opens up, you can go to the ‘open folder’ option and choose the flutter project we have created already. How we have created it, we will come to that point in a minute. Before that, we need to see the Android Studio and our newly created virtual device. Figure 1.4 – Android Studio and our first flutter project
Page
11
1. Getting Started 6 Before opening the Android Studio, we have opened up our terminal, and typed the following commands to reach to the newly installed ‘flutter’ directory. 1 //code 1.5 2 ss@ss-desktop:~$ cd Documents/development/flutter/ 3 ss@ss-desktop:~/Documents/development/flutter$ flutter doctor 4 Doctor summary (to see all details, run flutter doctor -v): 5 [✓] Flutter (Channel stable, v1.17.2, on Linux, locale en_IN) 6 7 [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3) 8 [✓] Android Studio (version 3.5) 9 [✓] Android Studio (version 4.0) 10 [✓] IntelliJ IDEA Community Edition (version 2019.3) 11 [✓] VS Code (version 1.43.2) 12 [!] Connected device 13 ! No devices available 14 15 ! Doctor found issues in 1 category. 16 ss@ss-desktop:~/Documents/development/flutter$ As you have seen in the above output, ‘flutter doctor’ has found only one issue. It has not found any connected device. Otherwise, we have already installed Android Studio (version 4.0), which is the latest at the time of writing this book. We have also installed IntelliJ IDEA Community Edition, and we have also Visual Studio Code IDE. We can use the virtual device from Android Studio, but we can use the Visual Studio Code IDE or IntelliJ IDEA Community Edition IDE for writing our code. They will automatically synchronize with the connected device. However, before that we need to create our first flutter project with the help of flutter command as the following: 1 //code 1.6 2 flutter create my_first_flutter_app Remember one thing. When we want to create a new flutter project, we should always create like this. The naming convention is important here. We can only use the underscore between the words. No hyphen or space is allowed. Now the time has come to go back to the Android Studio. We will pick up the ‘open folder’ option and choose to open the newly created flutter project. We have named it as: ‘my_first_flutter_app’.
Page
12
1. Getting Started 7 Figure 1.5 – Open the Android Virtual Device (AVD) manager from tools menu To open up the connected device, we need to open the Android Virtual Device manager, or AVD manager in short. You will get that from the ‘tools’ menu. Select any one of them and click the ‘green’ play button on the far right hand side of any virtual device. It will automatically open up the ‘connected device’ (Figure 1.6).
Page
13
1. Getting Started 8 Figure 1.6 – We have the connected device on which we can test our first mobile application Now everything is ready.We can start building our first mobile application from scratch using Flutter and Dart. Before closing down this section, we should know a few good tips. Usually, the beginners encounter a few errors when they try to run the command: 1 flutter doctor If it gives any error, try this command: 1 flutter doctor --android-licenses It will ask you to accept the license. Accept it, and it will not give any error anymore. Another problem often gives trouble to the new developers. As a beginning Flutter developer, people often are stuck with this issue. They cannot launch the virtual mobile device while working with Android Studio. We want that every code we write should reflect on the virtual device. It can be done by going to the ‘AVD manager’ from tools. But sometimes an ugly error pops up its head and tells that ‘/dev/kvm permission denied’. In Ubuntu 18 or Mac OS, you can give user the permission by issuing this command:
Page
14
1. Getting Started 9 1 //code 1.7 2 sudo chmod 777 -R /dev/kvm But it has a drawback. If someone else uses yourmachine, then the other user also gets the permission. The best remedy is – give permission to yourself only by the following commands: 1 //code 1.8 2 sudo apt install qemu-kvm 3 sudo adduser your-username kvm 4 sudo chown your-username /dev/kvm It will solve the issue for ever. Now you can launch any virtual device you want. You can launch the device with your Android Studio, and work with any other IDE like IntelliJ or Visual Studio. Relation between Flutter and Dart We have found out that Flutter is a framework or tool that we need to create beautiful mobile applications. Flutter is written in Dart programming language. To understand how Flutter works, we need to understand Dart also. Before digging deep to find out the relation between Flutter and Dart, let us try to understand one key concept of programming. There are two distinct parts of programming. One is abstraction and the other is concretion. We need to convert our abstract ideas into concretion, or a concrete shape or form. Any mobile application is an abstract idea. We need a tool like Flutter to give it a concrete shape. Take a more real life example. Justice is an abstraction, but law is a tool. When we say that ‘justice is done’, the abstract idea of Justice gets a concrete shape. And it is ‘done’ by using the tool called ‘law’. We hope that now we get a more clear picture why we need a tool like Flutter. Because we want to convert our abstract idea of making a mobile application we need a tool like Flutter. While we use Flutter, we will encounter many terms like function, class, constructor, positional parameter, named parameter, object, Widget, etc, etc. As an absolute beginner if you search the Internet, you will find that before Flutter developers used either Ionic or React Native to build mobile applications. Android developers used Java also. You can use Java to build Android application. Therefore, Flutter is not doing anything new. People used to do that before using other tools. Reading until this point, we may ask, then why we should learn Flutter. We could have learned something else,some other tools. Some other languages. This question is pertinent to our discussion. Flutter has some benefits. You enjoy some more privileges not enjoyed by other developers. To use the Flutter tool, you need to learn one programming language – Dart, and Flutter has a single code- base that can be used to build Android and native iOS mobile application.
Page
15
1. Getting Started 10 It is a specialty, special advantage not enjoyed by all who use other tools. Therefore, as an absolute beginner, you need to remember that Dart is a programming language. And Flutter uses Dart language building mobile applications on top of Dart platform. Flutter has some more components, such as Software Development Kit or SDK, flutter engine, foundation libraries and Widgets that are design specific. As a programming language, Dart has other functionalities. We can build web or desktop applications with Dart. Feel free to differ, but Dart seems to be a mixture of C and Java. If you have already learned these two languages, Dart will appear to be less daunting. Flutter runs in the Dart virtual machine. Just like we have seen earlier in Java Virtual Machine or JVM. We do not want to be more specific on Flutter internals, as this book is aimed for the absolute beginners. To be more specific on how Flutter and Dart work together, we will create another Dart project in our IntelliJ IDEA Community Edition IDE. In that Dart project we will learn Dart simultaneously as we progress with Flutter in a different project. We hope that will make sense. To create a separate Dart project, we will open our IntelliJ IDE and add the Dart and Flutter plugins first. After that, we will open up our IntelliJ IDE to create a console based Dart application (Figure 1.7). Figure 1.7 – A Dart Console project in IntelliJ IDE As in the above image, we are going to create a Dart Console application. In this command line application sample, we will write different type of Dart code to learn the language basics.
Page
16
1. Getting Started 11 The language basics is enough to give us a brief and primary idea about how Flutter works and builds a mobile application. We are keeping these two projects separate. For Dart we have a console sample application named ‘beginning_flutter_with_dart’ and for the Flutter project we have ‘my_first_flutter_app’. We have saved these two separate projects in two separate folders. When we have created the Dart project, it comes up with two ‘.dart’ files. The ‘main.dart’ is in the ‘bin’ folder, and the ‘beginning_flutter_with_dart.dart’ file is in the ‘lib’ folder. Like ‘C’, ‘C++’ or ‘Java’, Dart application runs through the ‘main()’ function. Therefore, the ‘main.dart’ file in the ‘bin’ folder is the main file through which our Dart console sample application will run. What is the role of the ‘lib’ folder? We will place other dart files in the ‘lib’ folder, just like the ‘beginning_flutter_with_dart.dart’ file. When we open up the ‘beginning_flutter_with_dart.dart’ file, we find a function inside. 1 // code 1.9 2 int calculate() { 3 return 6 * 7; 4 } And the ‘main.dart’ file has this code inside: 1 // code 1.10 2 import 'package:beginning_flutter_with_dart/beginning_flutter_with_dart.dart' 3 as beginning_flutter_with_dart; 4 5 main(List<String> arguments) { 6 print('Hello world: ${beginning_flutter_with_dart.calculate()}!'); 7 } If we run this code we get this output: 1 //output of code 1.10 2 Hello world: 42! If you are an absolute beginner, it really makes no sense. Let us tolerate this for a moment and try to understand what is actually happening. As a beginner, try to understand programming language from the standpoint of natural language. In a natural language, we start with letters or alphabets. Then we form words by arranging those alphabets. After that we need to learn grammar, which is a set of rules that teaches us to make
Page
17
1. Getting Started 12 meaningful sentences. Only after learning to create sentences, we can think of writing a paragraph, an essay, a story, even a novel. With the help of a programming language we also try to write an application, a software. A natural language works with words, and a programming language deals with data. This Dart console application gives us two types of data. One is ‘String’ data that gives the output: Hello World; and, it also gives us an ‘integer’ data, which gives us an output of 42. Watch the code 1.9 carefully, it is a function of integer data type, and it has a name ‘calculate()’, and it returns an integer value of multiplication between two numbers 6 and 7. Quite predictably it has returned 42. Therefore, we have learned one important concept, a function returns a value. If we mention what type of data type it will return, it will return that data type and in the main() function, we can call this function and get the desired output. However, in the main() function, there are many more things that we should also discuss. If we take a look at the code 1.10, we see that in the ‘main.dart’ file we have imported the ‘beginning_flutter_- with_dart.dart’ file from the ‘lib’ folder as a package. When we have created the Dart application, it automatically gives it a name, the same name that we used while creating the console sample application. Now, inside the print() function, that usually prints an output, Dart uses that name (beginning_- flutter_with_dart) and adds a ‘.’ symbol to call the ‘calculate()’ function. Why this is happening? It is because Dart is an object-oriented programming language, and in Dart treats everything as an object. Through that object Dart calls any function as it has called here. Now let us change the code 1.10 to this: 1 // code 1.11 2 import 'package:beginning_flutter_with_dart/beginning_flutter_with_dart.dart' 3 as an_object; 4 5 main(List<String> arguments) { 6 print('Hello world: ${an_object.calculate()}!'); 7 } Simultaneously, we have changed the code 1.9 to this, where we have changed the inside value of calculate() function. 1 // code 1.12 2 int calculate() { 3 return 6 * 12; 4 } If we run this program, it works and gives us this output:
Page
18
1. Getting Started 13 1 //output of code 1.11 2 Hello world: 72! We have learned a few important concepts. Dart converts everything into an object. We can call that object by any name. At the time of creation, the object was named ‘beginning_flutter_with_dart’; later we have changed the name to a more generic name, such as ‘an_object’. After changing the name, we have called the same function that was written into the Dart file, inside the ‘lib’ folder. Can we create another function in the ‘lib’ folder? Let us try. Creating a new function is very simple process. We will click the second mouse on the ‘lib’ folder in our IntelliJ IDE, it will automatically ask for creating different types of file. We have chosen a Dart file and named it ‘a_new_function’. A new Dart file is generated inside the ‘lib’ folder. We are trying to add two numbers through that function and returns its value. The code snippet looks like this: 1 // code 1.13 2 int addingTwoNumbers(var x, var y){ 3 return x + y; 4 } Now we will call this function inside the main() function just like before. 1 // code 1.14 2 import 'package:beginning_flutter_with_dart/beginning_flutter_with_dart.dart' 3 as an_object; 4 import 'package:beginning_flutter_with_dart/a_new_function.dart' 5 as a_new_function; 6 7 main(List<String> arguments) { 8 print('Hello world: ${an_object.calculate()}!'); 9 print('Adding 10 and 20: ${a_new_function.addingTwoNumbers(10, 20)}'); 10 } The output is quite predictable. 1 //output of code 1.14 2 Hello world: 72! 3 Adding 10 and 20: 30 We have passed two variables ‘x’ and ‘y’ as parameters through the function addingTwoNum- bers(var x, var y); instead of using the word ‘var’ we could have written ‘int’. Dart is strongly typed programming language, so we can mention what data type we are passing. Otherwise, we can use
Page
19
1. Getting Started 14 only ‘var’, that stands for variable, and Dart will automatically infer it as integers; in this case we wanted to return an integer data type. If you look at the meaning of the word in natural language,the word ‘function’ is used as noun as well as verb. When you use it as noun, one of the meanings tells us something like this: the actions and activities assigned to or required or expected of a person or group. And as a verb, its meaning is quite straight forward: perform as expected when applied. In the programming paradigm, a function() does not always return something. It could be void. That means it does not return anything. Take a look at the main() function. Before the main() function, have seen any data type like ‘int’ or ‘String’? The main() function always calls other functions and gives us the output. Can we create a void function and call it inside a main function? Yes, we can do. Let us add a void function inside the ‘a_new_function.dart’ file and the code 1.13 looks like this: 1 // code 1.15 2 int addingTwoNumbers(var x, var y){ 3 return x + y; 4 } 5 6 void doNothing(){ 7 print('Do nothing'); 8 } Now we can call this void function just like any other regular function, inside the man() function. 1 // code 1.16 2 import 'package:beginning_flutter_with_dart/beginning_flutter_with_dart.dart' 3 as an_object; 4 import 'package:beginning_flutter_with_dart/a_new_function.dart' 5 as a_new_function; 6 7 main(List<String> arguments) { 8 print('Hello world: ${an_object.calculate()}!'); 9 print('Adding 10 and 20: ${a_new_function.addingTwoNumbers(10, 20)}'); 10 a_new_function.doNothing(); 11 } 12 13 //output 14 Hello world: 72! 15 Adding 10 and 20: 30 16 Do nothing
Page
20
1. Getting Started 15 Since inside the void function we have used a print() function and passed a String object - ‘Do nothing’. We get the same output. We may ask, what is the function of this functions inside the Flutter project? Do this functions will have to do anything with our first mobile application? To get that answer, we need to close our Dart project for a time being and move to the Flutter project ‘my_first_flutter_app’. Let us open the Android Studio. When the Flutter project was created it came with a main() file, just like we have just seen in the Dart project. The code snippet is quite long, but we want to see the whole code here, because we want to see if we can find something familiar as an absolute beginner. So far, we have learned to create functions, and we have heard that everything in Dart is object, but we still do not understand it very much. Let us see the whole code snippets, without the comments, first. 1 // code 1.17 2 import 'package:flutter/material.dart'; 3 4 void main() { 5 runApp(MyApp()); 6 } 7 8 class MyApp extends StatelessWidget { 9 // This widget is the root of your application. 10 @override 11 Widget build(BuildContext context) { 12 return MaterialApp( 13 title: 'Flutter Demo', 14 theme: ThemeData( 15 16 primarySwatch: Colors.blue, 17 18 visualDensity: VisualDensity.adaptivePlatformDensity, 19 ), 20 home: MyHomePage(title: 'Flutter Demo Home Page'), 21 ); 22 } 23 } 24 25 class MyHomePage extends StatefulWidget { 26 MyHomePage({Key key, this.title}) : super(key: key); 27 28 final String title;
Comments 0
Loading comments...
Reply to Comment
Edit Comment