Dart Programming-Flutter

What is Dart Programming

Dart is an open-source, general-purpose, object-oriented programming language with C-style syntax developed by Google in 2011. The purpose of Dart programming is to create a frontend user interfaces for the web and mobile apps. It is meant for programmers with a strong hold on object-oriented concepts. Dart can be extensively used to create single-page applications like GMail. Google has released a special build of Chromium – the Dart VM. It is under active development, compiled to native machine code for building mobile apps, inspired by other programming languages such as Java, JavaScript, C#, and is Strongly Typed. Since Dart is a compiled language so you cannot execute your code directly; instead, the compiler parses it and transfer it into machine code. Dart is case-sensitive. This means that Dart differentiates between uppercase and lowercase characters

Features Comparison of Dart and JavaScript.

Feature	Dart	JavaScript
Type system	Optional, dynamic	Weak, dynamic
Classes	Yes, single inheritance	Prototypical
Interfaces	Yes, multiple interfaces	No
Concurrency	Yes, with isolates	Yes, with HTML5 web workers

It supports most of the common concepts of programming languages like classes, interfaces, functions, unlike other programming languages. Dart language does not support arrays directly. It supports collection, which is used to replicate the data structure such as arrays, generics, and optional typing.

The following example shows simple Dart programming.

void main() {
for (int i = 0; i < 5; i++) {
print(‘hello ${i + 1}’);
}
}

Environment

online editor at:

https://dartpad.dartlang.org/

https://dart.dev/

Using the Text Editor

Examples of a few editors include Windows Notepad, Notepad++, Emacs, vim or vi, etc. Editors may vary from one Operating System to another. The source files are typically named with the extension “.dart”.

Installing the Dart SDK

The current stable version of Dart is 1.21.0. The dart sdk can be downloaded from −

On completion of the SDK installation, set the PATH environment variable to −

<dart-sdk-path>\bin

Verifying the Installation

To verify if Dart has been successfully installed, open the command prompt and enter the following command −

Dart

IDE Support

A plethora of IDEs support scripting in Dart. Examples include Eclipse, IntelliJ, and WebStorm from Jet brains.

Given below are the steps for configuring the Dart environment using WebStrom IDE.

Installing WebStorm

The installation file for WebStorm can be downloaded from https://www.jetbrains.com/webstorm/download/#section=windows-version.

The WebStorm installation file is available for Mac OS, Windows and Linux.

After downloading the installation files, follow the steps given below −

Install the Dart SDK: Refer to the steps listed above
Create a new Dart project and configure Dart support
To create a new Dart project,
- Click Create New Project from the Welcome Screen
- In the next dialog box, click Dart
If there is no value specified for the Dart SDK path, then provide the SDK path. For example, the SDK path may be <dart installation directory>/dart/dartsdk.

Add a Dart File to the Project

To add a Dart file to the Project −

Right-click on the Project
New → Dart File
Enter the name of the Dart Script

You can execute a Dart program in two ways −

Via the terminal
Via the WebStorm IDE

Via the Terminal

To execute a Dart program via the terminal −

Navigate to the path of the current project
Type the following command in the Terminal window

dart file_name.dart

Via the WebStorm IDE

To execute a Dart program via the WebStorm IDE −

Right-click the Dart script file on the IDE. (The file should contain the main() function to enable execution)
Click on the ‘Run <file_name>’ option. A screenshot of the same is given below −

Data Type in Dart Programming

Dart is a Strongly Typed programming language. It means, each value you use in your programming language has a type either string or number and must be known when the code is compiled. Here, we are going to discuss the most common basic data types used in the Dart programming language.

The Dart language supports the following types−

Numbers
Strings
Booleans
Lists
Maps

String	String myName = ‘javatpoint’;	It holds text. In this, you can use single or double quotation marks. Once you decide the quotation marks, you should have to be consistent with your choice.
num, int, double	int age = 25; double price = 125.50;	The num data type stands for a number. Dart has two types of numbers: Integer (It is a number without a decimal place.) Double (It is a number with a decimal place.)
Boolean	bool var_name = true; Or bool var_name = false;	It uses the bool keyword to represents the Boolean value true and false.
object	Person = Person()	Generally, everything in Dart is an object (e.g., Integer, String). But an object can also be more complex.

The data types list and map are used to represent a collection of objects. A List is an ordered group of objects. The List data type in Dart is synonymous to the concept of an array in other programming languages. The Map data type represents a set of values as key-value pairs. The dart: core library enables creation and manipulation of these collections through the predefined List and Map classes respectively.

Variables and Functions in Dart Programing

Variables are the namespace in memory that stores values. The name of a variable is called as identifiers. They are the data containers, which can store the value of any type. For example:

var myAge = 50;

Here, myAge is a variable that stores an integer value 50. We can also give it int and double. However, Dart has a feature Type Inference, which infers the types of values. So, if you create a variable with a var keyword, Dart can infer that variable as of type integer.

Besides variable, Functions are another core feature of any programming language. Functions are a set of statements that performs a specific task. They are organized into the logical blocks of code that are readable, maintainable, and reusable. The function declaration contains the function name, return type, and parameters. The following example explains the function used in Dart programming.

//Function declaration
num addNumbers(num a, num b) {
// Here, we use num as a type because it should work with int and double both.
return a + b;
}
var price1 = 29.99;
var price2 = 20.81;
var total = addNumbers(price1, price2);
var num1 = 10;
var num2 = 45;
var total2 = addNumbers(num1, num2);

Operators in Dart programming

Dart language supports all operators, as you are familiar with other programming languages such as C, Kotlin, and Swift. The operator’s name is listed below:

Arithmetic
Equality
Increment and Decrement
Logical
Comparison

Decision Making and Loops in dart programming

The decision-making is a feature that allows you to evaluate a condition before the instructions are executed. The Dart language supports the following types of decision-making statements:

If statement
If-else statement
Switch statement

void main() {
var num = 12;
if (num % 2 = = 0) {
print(“Number is Even.”);
} else {
print(“Number is Odd.”);
}
}

Loops in dart programming

are used to execute a block of code repeatedly until a specified condition becomes true. Dart language supports the following types of loop statements:

for
for..in
while
do..while

void main() {
var name = [“Peter”, “Rinky Ponting”, “Abhishek”];
for (var prop in name) {
print(prop);
}
}

Comments In Dart Programming

Comments are the lines of non-executable code. They are one of the main aspects of all programming languages. The purpose of this is to provide information about the project, variable, or an operation. There are three types of comments in Dart programming:

Make format comments: It is a single line comment (//)
Block Comments: It is a multi-line comment (/*…*/)
Doc Comments: It is a document comment that used for member and types (///)

Continue and Break Statement

Dart has also used the continue and break keyword in the loop, and elsewhere it required. The continue statement allows you to skip the remaining code inside the loop and immediately jump to the next iteration of the loop. We can understand it from the following example.

void main() {
for(int i=1;i<=10;i++){
if(i==5){
print(“Hello”);
continue; //it will skip the rest statement
}
print(i);
}
}

The break statement allows you to terminate or stops the current flow of a program and continues execution after the body of the loop. The following example gives a detailed explanation.

void main() {
for(int i=1;i<=10;i++){
if(i==5){
print(“Hello”);
break;//it will terminate the rest statement
}
print(i);
}
}

Const and final Keyword

We can use a final keyword to restrict the user. It can be applied in many contexts, such as variables, classes, and methods.

Const keyword is used to declare constant. We cannot change the value of the const keyword after assigning it.

void main() {
final a = 100;
const pi = 3.14;
print(a);
print(pi);
}

Dart is an Object-Oriented Programming language

Dart is an object-oriented programming language, which means every value in a Dart is an object. A number is also an object in Dart language. Dart programming supports the concept of OOPs features like objects, classes, interfaces, etc.

Object: An object is an entity, which has state and behavior. It can be physical or logical. In Dart, every value is an object, even primitive values like text and number. Dart can also allow you to build your custom object to express more complex relations between data.

Class: A class is a collection of objects. It means the objects are created with the help of classes because every object needs a blueprint based on which you can create an individual object. A class definition includes the following things:

Fields
Methods
Constructor
Getters and setters

Let us see an example, which helps you to understand the OOPs concept easily.

class Mobile {
  // Property Declaration
  String color, brandName, modelName;
  // Method Creation
  String calling() {
    return “Mobile can do call to everyone.”;
  }
  String musicPlay() {
    return “Mobile can play all types of Music.”;
  }
  String clickPicture() {
    return “Mobile can take pictures.”;
  }
}
void main() {
  // Object Creation
  var myMob = new Mobile();
  // Accessing Class’s Property
  myMob.color = “Black”;
  myMob.brandName = “Apple Inc.”;
  myMob.modelName = “iPhone 11 Pro”;
  //Display Output
  print(myMob.color);
  print(myMob.modelName);
  print(myMob.brandName);
  print(myMob.calling());
  print(myMob.musicPlay());
  print(myMob.clickPicture());
}

In the above example, we define a class Mobile, which has three variables of string type and three functions or methods. Then, we create a main function which Dart will execute first when your app starts. Inside the main, we create an object to access the class’s properties. Finally, we print the output.

Calculator code-Dart Programming

import 'package:flutter/material.dart';
import 'buttons.dart';
import 'package:math_expressions/math_expressions.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    ); // MaterialApp
  }
}
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
  var userInput = '';
  var answer = '';
  // Array of button
  final List<String> buttons = [
    'C',
    '+/-',
    '%',
    'DEL',
    '7',
    '8',
    '9',
    '/',
    '4',
    '5',
    '6',
    'x',
    '1',
    '2',
    '3',
    '-',
    '0',
    '.',
    '=',
    '+',
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Calculator"),
      ), //AppBar
      backgroundColor: Colors.white38,
      body: Column(
        children: <Widget>[
          Expanded(
            child: Container(
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Container(
                      padding: EdgeInsets.all(20),
                      alignment: Alignment.centerRight,
                      child: Text(
                        userInput,
                        style: TextStyle(fontSize: 18, color: Colors.white),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(15),
                      alignment: Alignment.centerRight,
                      child: Text(
                        answer,
                        style: TextStyle(
                            fontSize: 30,
                            color: Colors.white,
                            fontWeight: FontWeight.bold),
                      ),
                    )
                  ]),
            ),
          ),
          Expanded(
            flex: 3,
            child: Container(
              child: GridView.builder(
                  itemCount: buttons.length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 4),
                  itemBuilder: (BuildContext context, int index) {
                    // Clear Button
                    if (index == 0) {
                      return MyButton(
                        buttontapped: () {
                          setState(() {
                            userInput = '';
                            answer = '0';
                          });
                        },
                        buttonText: buttons[index],
                        color: Colors.blue[50],
                        textColor: Colors.black,
                      );
                    }
                    // +/- button
                    else if (index == 1) {
                      return MyButton(
                        buttonText: buttons[index],
                        color: Colors.blue[50],
                        textColor: Colors.black,
                      );
                    }
                    // % Button
                    else if (index == 2) {
                      return MyButton(
                        buttontapped: () {
                          setState(() {
                            userInput += buttons[index];
                          });
                        },
                        buttonText: buttons[index],
                        color: Colors.blue[50],
                        textColor: Colors.black,
                      );
                    }
                    // Delete Button
                    else if (index == 3) {
                      return MyButton(
                        buttontapped: () {
                          setState(() {
                            userInput =
                                userInput.substring(0, userInput.length - 1);
                          });
                        },
                        buttonText: buttons[index],
                        color: Colors.blue[50],
                        textColor: Colors.black,
                      );
                    }
                    // Equal_to Button
                    else if (index == 18) {
                      return MyButton(
                        buttontapped: () {
                          setState(() {
                            equalPressed();
                          });
                        },
                        buttonText: buttons[index],
                        color: Colors.orange[700],
                        textColor: Colors.white,
                      );
                    }
                    //  other buttons
                    else {
                      return MyButton(
                        buttontapped: () {
                          setState(() {
                            userInput += buttons[index];
                          });
                        },
                        buttonText: buttons[index],
                        color: isOperator(buttons[index])
                            ? Colors.blueAccent
                            : Colors.white,
                        textColor: isOperator(buttons[index])
                            ? Colors.white
                            : Colors.black,
                      );
                    }
                  }), // GridView.builder
            ),
          ),
        ],
      ),
    );
  }
  bool isOperator(String x) {
    if (x == '/' || x == 'x' || x == '-' || x == '+' || x == '=') {
      return true;
    }
    return false;
  }
// function to calculate the input operation
  void equalPressed() {
    String finaluserinput = userInput;
    finaluserinput = userInput.replaceAll('x', '*');
    Parser p = Parser();
    Expression exp = p.parse(finaluserinput);
    ContextModel cm = ContextModel();
    double eval = exp.evaluate(EvaluationType.REAL, cm);
    answer = eval.toString();
  }
}

Calculator code-Dart Programming

Courses

Important Pages

Links

Mobile Application Development

Dart Programming-Flutter

What is Dart Programming

Environment

Using the Text Editor

Installing the Dart SDK

Verifying the Installation

IDE Support

Installing WebStorm

Add a Dart File to the Project

Via the Terminal

Via the WebStorm IDE

Data Type in Dart Programming

Variables and Functions in Dart Programing

Operators in Dart programming

Decision Making and Loops in dart programming

Comments In Dart Programming

Continue and Break Statement

Const and final Keyword

Dart is an Object-Oriented Programming language

Calculator code-Dart Programming

Leave a Reply Cancel reply

Courses

Important Pages

Links

Modal title