This article is meant to provide a comprehensive guide for beginners in software development and to understand the basics of the language, framework and best practices. Software developers who are new and would like to start a career in dart and flutter development, and other developers who would like to refresh their knowledge on some basics.
The guide would cover the following topics:
Introduction to Dart and Flutter
Fundamentals
Data types in dart
Object-oriented programming in dart
Flutter Development
Setting up a project
Debugging
INTRODUCTION TO DART AND FLUTTER
First of all, I am sure you would be asking yourself what are dart and flutter, are they the same? and what makes them a dynamic duo. Dart is the main programming language to develop high-performance cross-platform applications using Flutter. It is a programming language created by Google in 2011 that is used to build web, server, and mobile applications. This is possible thanks to the Dart SDK (Software development kit), which includes several libraries and tools that make it easy to build applications for different platforms.
One of the key features of Dart is its ability to be compiled both ahead of time and just in time, which helps in its simplicity, speed, and ability to be used across different platforms. Cross-platform simply means the ability to use just a single framework to create applications that would be able to run on multiple devices. You must have probably researched that there are other frameworks to use for application development, but why am I interested in building with Flutter?
Flutter is a rich UI framework developed and maintained by Google. It uses one codebase to fully compile native apps, unlike other frameworks like react native and Ionic. It allows you to style your pixels and UI components and doesn’t compile to iOS and Android UI components. It has reusable UI building blocks(widgets). As I have said before that it builds cross-platform applications, which also gives it an edge over other frameworks that miss out on one or two platforms.
FUNDAMENTALS
There are two types of languages which are
Strongly Typed: This type of language has its variable known at compile time examples are C#, Swift and Java.
Dynamic Typed: The type of variable is known at run time. Examples are Ruby, Dart, Python and JavaScript.
Dart is an object-oriented programming language even the null type which means everything in Dart is made of an object. Every dart program starts with the main function.
main( ) { var intro = ‘My name is’
String name = ‘Oluwaferanmi’
Print ( intro + ‘ ‘ + name ) }
The code block above prints your function. The var keyword there stands for variable, the + is used for concatenation, and the String is a data type while the print functions execute the function to view it. Dart automatically knows the distinct type of the value for easy optimization. It is statistically type defined. e.g. you can’t use a letter first and use a number later in the same function but you can reciprocate it. Every dart function is in a package which is dart:core, but you don’t have to import the dart column core package in any program because it automatically runs and is installed.
Another dart library is dart:io which is used to take input from users. An implementation of how it can be used is below;
Stdout.write = line is shown in the terminal
Stdin.readLineSync \= This waits for the user input and extends the variable to print the output in the terminal.
Comments are code lines that you write in your code block but don’t affect your program, its main importance is for easy documentation. There are types of comments which can be used in dart codes like
// = inline comment
/* */ = block comments or multiple lines of the document
/// = It used for documentation
DATA TYPES
Data type refers to the type of value a variable has and what type of mathematical, relational or logical operations can be applied without causing an error. There are different data types of object-oriented language, which are;
- String: This is used to classify texts. While using strings double quotes are the best to use because it is easier to use the other delinter(apostrophe if using single quotes and we use a backslash to separate the quote from the apostrophe). They work for string literals. There are other basic things to know about strings like ;
- We use the $ sign for instinct interpolation. This is when you replace the variable actual value within the string, you just use the dollar sign in front of the variable
main( ){ var age = 25;
Var str = ‘my age is $age’;
print(str);
}
Triple quote for multiple lines of strings “‘
Conversion is very important i.e. converting instinct to an integer and vice versa is called the parse method and double parse.
You can’t convert a string to an integer.
We can declare variables as constant, you just have to use the keyword const
If you don’t have a value defined to a variable, you get a null object
2. Int: This is used to identify whole numbers like 5, 9, 2, 6.
3. Float: These are numbers with decimal points, e.g. 2.4, 7.4, 0.1.
4. Boolean: It is used to represent logical values, mainly true and false logic. It is primarily associated with conditional statements. Conditional statements like if, else, else if, switch and break.
5. Operators: If you are familiar with other programming languages, then their operators shouldn’t be strange to you in a dart programming language. +, -. =, /, *, ++, num++, ++num, ==, !=. In respective order, they are addition, subtraction, equal to, division, multiplication, increment, post-increment, pre-increment, conditional operator and not operator. Other basic things to know about are;
Dart also supports unary operators and the null aware operator.
You can avoid the if statement in a null operator.
If you don’t check your null operator properly, your program may crash.
There is an operator called ternary operator, it is all about meeting conditions.
OBJECT-ORIENTED PROGRAMMING LANGUAGE IN DART
These are high-level programming languages that are characterized by the identification of classes of objects closely linked with the methods or functions with which they are associated with. Dart is a solid example of an OOP language because it strongly exhibits all characteristics. Features like loops, list, and set. map, function, class, constructors, getter and setters, variables & constants, objects, future, streams, generators, enumerators, sound null safety, etc. I would be explaining below; For practicing use the online dart editor to run dart codes dartpad.dev.
- LOOP: This is a control structure used to execute a task a finite number of times repeatedly. They are very useful for performing repetitive tasks such as processing data. Types of loops are;
- Standard for-loop: is used to iterate over a range of values. A simple example of a for loop is;
for( var i = 7; i < 21; i++ ) {
print( i );
} The loop will print the numbers 7 through 20.
For-in-loop
For each loop
While loop: is used to repeat a block of code until a certain condition is met.
2. LIST: These are a series of things placed together and are similar to each other, it is denoted with a square bracket [ ]. Dart indexes start with 0, not 1, and are called zero bases. All lists have a property called .length which is used to know the number of elements in the array. In a list, if you replace the list keyword with var, it would still run perfectly. And if you mix the elements together, it hovers as an object. It is also mutable and is possible to copy a list to another list. Another thing to note is that if you write down a list of strings and you put another value in other than string, you get an error because it is statistically typed. In lists, there are enumerators which are named lists of related items, which means making a string programmatically to become an entity. The value has to have a name that can be programmatically referred to which is an enum.
3. SET: This is an unordered collection of unique items. You define a set by calling a variable and declaring a loop, and if you want to define an interest you must have to define the type. Sets are similar to lists, but they don’t allow duplicate values. A string before curly braces means linked Hashset. Set ensures that the data isn’t duplicated. An example of how to create a set;
Set<String> meet = {‘dart’, ‘kotlin’, ‘java’};
This creates a set of strings with the values “dart”, “kotlin”, and “java”. You can also create an empty set and add items to it later.
4. MAP: Map is a more complex data structure used to hold key-value pair items and can group multiple pieces of information. We create a map by using the curly braces or the Map( ) class. In maps keys are strings and Integers are values, and keys in map need to be unique because it is used for identification of the value. The map doesn’t give us a list but something called iterable. Iterables are just lazy collections i.e. they are prepared and a packaged list of things but is not probably calculated when it first begins. Map is called Dictionary in Python.
5. FUNCTION: They are a series of code that is logically grouped. It has a return value named void. Each function is an object of the class function. When defining a function you have to define the type in which it will return. In Dart and other OOP programming languages, there is the Arrow function “=>” which makes the function code shorter instead of using the return statement. The anonymous function is a nameless function that is used when you are using the function just once and in no other place in your dart file. A function isn’t complete without inputting your parameters i.e. function arguments. There are two types of parameters which are the Named parameter and the Positional parameter. It is possible to mix both types of parameters. Always use camel case to write function names and don’t ever forget they hold your code logic. When writing codes you use generics to avoid rewriting similar code. This is very important, especially in using the same functions. Class pair and then you put your generic advantage.
6. CLASS: Class is grouping various functionalities into one package piece of data and related things. The keyword class is used to define a class. When you use the parentheses after the class name it instantiates an object. Instances are objects from classes. In object-oriented programming languages, class is very wide and has mini functionalities on how to use it, some of them are Inheritances, Sub classing and abstract classes which are very important and would like to discuss. Inheritance allows you to define and add more functionalities into a new class, while Sub classing is creating a sub thing or subset of a main class, but also kind of acts as the superset. Abstract classes are classes that can't be instantiated, i.e. cannot have instances. It is usually a utility class that other classes are supposed to inherit from and are logical too. In class, there is something called custom operators. This allows you to override the existence of a class with your own logic override. By default, every class inherits instances from the object class, and the operator can be defined in your class. It is not advised to compare two classes of different types.
7. CONSTRUCTORS: Constructors are functions or special logic in the class that build the class instances. It creates instances with optional parameters, and they are also called initializers and are executed only once. They are methods without a return type. In Dart, we use the class name as the constructor name, and it is automatically called when you instantiate an object. Generally, it is a special function that has the same name as the name of the class. There are factory constructors in constructors, in this case, you construct their class instances using convenient functions and which return instances that are not of the same class. It doesn’t necessarily have to return the instance of the same class. In Dart, if you have a class that extends another class, that class that does extend always has its type as value as well as the type of the class it did extend. This is called multiple constructors.
8. VARIABLES AND CONSTANTS: Variables are names used to hold data or values. They change depending on the information passed to the program and give you the flexibility to assign values. There are final and const. We use the final when a value does not change from the point of time when your program runs. It is a runtime constant value, but at the point of writing the code we don’t know what the value might be. Constants are values whose data cannot be changed during runtime or code wrapping. We know what the values are in const so it is like the opposite of final.
An important concept to know is that all your objects in Dart, are stored in memory by Dart. But what it stores in your variables, where you think you stored the object. Dart stores the pointers at the object in memory i.e. the addresses of the memory in the object. An example I denoted from this for easy interpretation is that when you go to the postal office and want to send a letter, you put your address on the letter and not your house. The main importance of this concept is that it saves memory.
9. STREAMS: This is a pipe of data either never or completes successfully and doesn’t die. It is a feature that sends a pipe through data and never ends, more like an endless working feature. It is an asynchronous pipe of data that just continues or periodically returns values. It is a sequence of asynchronous events. It’s a way to handle data that is not available all at once but rather arrives in pieces over time. This means that they don’t block the execution of your program while waiting for data to arrive. You can also transform and manipulate streams using various methods like map, where, reduce, and fold. Streams are a powerful tool for handling asynchronous data in Dart, and they are used extensively in Flutter. Here’s an example of how to create a stream:
Stream<int> countStream( int max ) async {
for ( int i = 3; i <= max; i++ ) {
yield i;
}
}
This creates a stream of integers that counts from 3 to ‘max’. The ‘async’ keyword indicates that this is an asynchronous generator function, which means that it produces a sequence of values over time.
10. GENERATORS: This is a function that returns a list of things and internally calculates the data most simply, it returns a sequence of values lazily, on demand. Generators are similar to streams, but they differ in that they are synchronous and return a finite sequence of values. There is a keyword in a generator called yield. Yield is the keyword used in generator or stream functions. It has similar functions to a loop and you can of course break it. Generators are a powerful tool for creating sequences of values in Dart, and they are used extensively in Dart libraries like ‘collection’ and ‘quiver’. You can create a generator in Dart using the ‘sync’ keyword. Here’s an example:
Iterable<int> count ( int David ) sync {
For ( int = 1; i <= max; i++ ) {
yield i;
}
}
This creates a generator that counts from 1 to ’ David’. The ‘sync’ keyword indicates that this is a synchronous generator function, which means that it produces a sequence of values immediately.
11. SOUND NULL-SAFETY: Null is a keyword in Dart that can be assigned to any type, when a variable value is null the computer understands. You have to ask since null means nothing or the absence of values, how does the computer understand null values? However, old Dart versions did not support null safety till Dart 2.12 and became fully stable in Dart 2.19. Nullability is a suffix to a data type. Just add a question mark after the data type such as a string. Optional strings are used to talk about nullable values. With Dart, you can make your pc give you a value that is not null. Null is also used in Boolean comparisons. [??] is a null-aware operator that picks either the left or right side whichever one isn’t null first. There is also a null aware assignment operator which resolves a variable to make sure it is not null. [??=] takes the value of the left-hand side if it is null and assigns the value of the right-hand side to it.
FLUTTER DEVELOPMENT
Now that we are done with treating Dart, let us dive into Flutter, its features and everything it is about. At the beginning of the article I introduced us to what flutter is and some of the key features that make it very popular and more suitable to use than other frameworks. Now let us dive into it, brace yourself for the beauty of flutter as you would be amazed at how good it is, and some of its benefits.
Flutter is an open-source mobile application development framework created by Google at its first launch on December 4th, 2018, that allows developers to build high-performance, cross-platform mobile apps for iOS and Android using a single codebase. It uses the Dart programming language as its primary language and offers a rich set of pre-built widgets and tools that make it easy to build beautiful and responsive user interfaces. One of the key benefits of Flutter is its fast development cycle, which allows developers to quickly develop and test their apps on multiple platforms. Flutter offers two brilliant features that give it an edge over other frameworks. One is the hot reload feature that allows developers to see changes to their code in real-time, making it easier to iterate and improve their apps, cool right? While the other feature is the hot restart feature which is for drastic and big code changes, it rebuilds your application with a new state. It also offers a rich set of built-in animation and motion APIs that make it easy to create engaging and interactive user experiences.
Another benefit of Flutter is its high performance. Because Flutter apps are compiled to native code, they can run at near-native speeds on both iOS and Android. This makes Flutter a popular choice for developers who need to build high-performance mobile apps. Flutter also offers several other features that make it a powerful and versatile mobile app development framework. For example, it offers support for asynchronous programming, which makes it easy to write code that can run in the background while other tasks are being performed. It also offers a rich set of testing tools that make it easy to test and debug apps on different platforms. Everything in Flutter is made up of widgets.
SETTING UP A PROJECT
In this guide I would take you through how to create your first Flutter app, the necessary tools needed, creating a developer account and the importance of doing so, setting up your device, running apps on real devices, how to use the Flutter cli, folder structure and some other features. Firstly there are three IDE ( Integrated development environment ) used for flutter development. They are Android Studio, XCode and Visual Studio code. I mainly use vs code because of its interface, flexibility and various extensions. To write dart and flutter code you must have visual code installed.
Developer accounts are used by software developers that build and release applications on various devices whether Android, iOS or both. It is used for releasing applications on the google play store for Android and App Store for iOS. Every app has an identifier which has to be unique as it defines the app and is associated with a domain name, it is a normal thing now which is important to do. Dev accounts can be of two types; individual and company. The big difference is the liability. To create a Google dev account, go to their official site play.google.com/console/u/0/signup and follow the prompts. While for iOS, you need an apple id to be able to access the site appstoreconnect.apple.com/login.
Flutter installation is not really that complex as the Flutter team has made it very easy to install with easy procedures and steps in their official document. To install Flutter, your system must meet the official system requirements. The recent stable release version of Flutter is Flutter 3.10.5. Once installed, extract the flutter SDK to your preferred location. Copy the environment path of the flutter binary so that it can be exposed to your entire system and not just limited to running your flutter app from the flutter cli. There is no limitation to using Flutter as it can run on Windows, macOS, and Linux environments. For a step-step guide on installation procedures visit the official Flutter website flutter.dev.
After installation and necessary setup, you open your flutter cli and run the command flutter doctor to check if all necessary tools for running flutter on your system are checked. Then run the command flutter to create the “name of the app”. The name of the app is up to you as you can name your app anything as long as it has its unique identifier when released. After creating, run the flutter run command to open your first demo flutter page. Always note that you cannot create a project within the Flutter SDK, as it is not allowed.
Running an application on a real device requires calmness because it can be frustrating at times and takes longer on your first few times. Though running Flutter on your real device is faster and doesn’t slow your computer unlike running on an emulator, running on an emulator is okay if you are running a quick codebase and want to quickly test your app for a short period. We run apps on real devices using screen mirroring and connecting your device using the USB debugging options on your device. First install the Android debug bridge (ADB), for mirroring you download an exe from GitHub github.com/Genymobile/scrcpy. After the installation of both;
Connect your Android device with your USB cable
Enable debugging
Mirror it through scrcpy
Connect your device in VS code
In your
main.dartfile, run without debugging
For procedures for IOS and MACOS users visit github.com/wyatt8740/idb and the official iOS development bridge fbidb.io/docs/overview for a better understanding.
- Your project structure consists of every folder and file structured together to help you build your application. One of the most important files there is the
pub spec.yamlwhich contains every information about your application. Another important thing is your Dependencies. Dependencies are ways of importing other programmers’ code in yours, to make your application better. Your codebase needs those packages for it to work, they are specified in yourpubspec. You can visit the official Flutter dev website on their documentation about dependencies and how to install them.
With all that has been said, I am very convinced that with this article one would find it easy to approach dart and flutter and provide the basic understanding and guide for them as they thread upon the duo.