Forem: Jitan Gupta

MERN Stack for experience developers -Part 2

Jitan Gupta — Sun, 19 Sep 2021 10:51:43 +0000

If you haven't read first part of this article, read here

In this article we will continue setting up our client-side application.

ReactJS setup

Let's create the React app.
We are again going to use node command line tool for that

npx create-react-app frontend

Note: if create-react-app package is not available, it may prompt you to install it.

Bootstrap

We are going to use bootstrap to design the frontend application.
Learn more here.

npm i bootstrap

Let's import the bootstrap design into app.js file and do some basic changes.

import React, { Component } from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import './App.css';

class App extends Component{
  render(){
    return (
      <div className="container">
        MERN-Stack Todo App
      </div>
    );
  }
}

export default App;

If you will run the application, you can see something like below in your browser.

Add routing (React-Router-DOM)

Using react-router-dom we can add routing (multiple pages) into our application.

npm i react-router-dom

Before defining routes, let's create few components first, which we will use to define the pages (routes) in our application. Create create-todo.component.js, edit-todo.component.js and todos-list.component.js into a components folder.

After adding the above files, add some sample codes as follows

// creat-todo.component.js
import { Component } from "react";

export default class CreateTodo extends Component{
    render(){
        return(
            <div>Hi From Create todo</div>
        )
    }
}

// edit-todo.component.js
import { Component } from "react";

export default class EditTodo extends Component{
    render(){
        return(
            <div>Hi From Edit todo</div>
        )
    }
}

// todos-list.component.js
import { Component } from "react";

export default class TodosList extends Component {
  render() {
    return <div>Hi From todos list</div>;
  }
}

Let's add the routing into our App.js file now

// importing react & react-router-dom packages
import { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

// importing components
import CreateTodo from "./components/create-todo.component";
import TodosList from "./components/todos-list.component";
import EditTodo from "./components/edit-todo.component";

// importing bootstrap & custom css
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";


class App extends Component {
  render() {
    return (
      <Router> 
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <div className="container">
            <Link to="/" className="navbar-brand">
              MERN Stack Demo
            </Link>
            <div className="collapse navbar-collapse" id="navbarSupportedContent">
              <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                <li className="nav-item">
                  <Link to="/" className="nav-link">
                    Todos
                  </Link>
                </li>
                <li className="nav-item">
                  <Link to="/create" className="nav-link">
                    Add
                  </Link>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <div className="container">
          <Route path="/" exact component={TodosList} />
          <Route path="/edit/:id" component={EditTodo} />
          <Route path="/create" component={CreateTodo} />
        </div>
      </Router>
    );
  }
}

export default App;

Let's break above code down:
BrowserRouter is a router implementation that uses HTML history API to keep UI in sync with URL.
Link is used to define anchor tags and to is similar to href.
Route: As you can see, it has few properties like path defines the route & component defines which component to use if the path matches. exact tells that the path should be /, not /xyz or /abc.
Note: To read the parameter passed in the URL like /edit/1, we can use this.props.match.params.id. And while defining such routes, we use /:id.

Let's run the application and see what we have so far

So far, we have added routes and basic components. It's time to design the list component and bind data from server.

Add Axios

Using axios library we can make HTTP requests such as GET, PUT, POST.

npm i axios

Now we are ready to design our todo list

// importing packages
import { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";

// functional component
const Todo = (props) => (    
  <tr>
    <td className={props.todo.completed ? 'completed' : ''}>{props.todo.title}</td>
    <td className={props.todo.completed ? 'completed' : ''}>{props.todo.description}</td>
    <td className={props.todo.completed ? 'completed' : ''}>{props.todo.priority}</td>
    <td>
      <span className={props.todo.completed ? 'd-none' : ''}><button type="button" onClick={() => props.finished(props.todo)} className="btn btn-primary btn-sm mx-1">Finish</button></span>
      <Link className="btn btn-sm btn-secondary" to={"/edit/" + props.todo._id}>Edit</Link>
    </td>
  </tr>
);

// class component
export default class TodosList extends Component {
  constructor(props) {
    super(props);
    // defining the state of the component
    this.state = { todos: [] };

    // this is required for event binding in react
    this.finishTask = this.finishTask.bind(this);
  }  

  // react life cycle method
  componentDidMount() {
    axios
      .get("http://localhost:4000/todos/") // consuming the get api
      .then((res) => {
        this.setState({ todos: res.data }); // data binding
      })
      .catch((error) => {
        console.log(error);
      });
  }

  // finish task event from table, 
  // Please note, we are making a PUT request to server 
  // to update the status of task
  finishTask(task){
    task.completed = true;
    axios
      .put("http://localhost:4000/todos/" + task._id, task)
      .then((res) => {
        if (res.status === 200) { // checking if the response is ok or not, status code 200 is for ok
          this.props.history.push("/"); // refreshing the page, please don't do this in production level application
        }
      });
  }

  // mapping the todo list
  todoList() {
    return this.state.todos.map((todo, index) => {
      return <Todo todo={todo} key={index} finished={(task) => this.finishTask(task)} />;
    });
  }

  // rendering the output
  render() {
    return (
      <div>
       <h4>Todo List</h4>
       <table className="table">
           <thead>
               <tr>
                   <th>Title</th>
                   <th>Description</th>
                   <th>Priority</th>
                   <th></th>
               </tr>
           </thead>
           <tbody>
           { this.todoList() }
           </tbody>
       </table>
      </div>
    );
  }
}

Functional Component is a JavaScript function that returns some JSX. It does not need to extend anything. And to read data in functional component, we use props.
componentDidMount() is a life cycle method form react which run after the component output has been rendered into DOM.

Note:

As you can see, I am consuming APIs in same file, I am doing it to remove additional complications from this demo app.
Don't forget to read the additional comments written in above code file.

Before running your application, let's add some design for our completed task.

.completed {
  text-decoration: line-through;
}

If you will run the application now, you will see something like below

Note: As you can see I am already having few todos, I have created these todos using Postman, as shown in previous article.

Now, If will click on finish button, you can see the todo item has been marked as complete.

Pro Tip: If you are facing any kind of error and want to debug your code, (a) Open developer tools (ctrl+F12), (b) In source panel search(ctrl+P) for your todo-list.component, (c) add the debugger point on desired line number, and (d) Click on finish button in browser. You will see something like below

Moving ahead, let's design the edit page now

// importing packages
import React, { Component } from "react";
import axios from "axios";

// creating edit todo component
export default class EditTodo extends Component {
  constructor(props) {
    super(props);

    // defining state of the data
    this.state = {
      description: "",
      title: "",
      priority: "",
      completed: false,
      message: "",
    };

    // binding click events
    this.handleInputChange = this.handleInputChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  // fetching the data from server
  componentDidMount() {
    axios
      .get("http://localhost:4000/todos/" + this.props.match.params.id)
      .then((response) => {
        // binding the data into current state
        // the bound data will reflect in page
        this.setState({
          description: response.data.description,
          title: response.data.title,
          priority: response.data.priority,
          completed: response.data.completed,
        });
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  // updating the updated value into current state
  // In HTML, 'name' holds the key defined in above state
  // using which, we are updating the data below
  handleInputChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    this.setState({ [target.name]: value });
  }

  // Updating the data
  onSubmit(e) {
    e.preventDefault();
    const obj = {
      description: this.state.description,
      title: this.state.title,
      priority: this.state.priority,
      completed: this.state.completed,
    };
    axios
      .put("http://localhost:4000/todos/" + this.props.match.params.id, obj)
      .then((res) => {
        if (res.status === 200) {
          this.props.history.push("/"); // after successful update, redirecting to list page
        }
      });
  }

  render() {
    return (
      <div>
        <h3>Update Todo</h3>
        <form onSubmit={this.onSubmit}>
          <div className="form-group">
            <label>title: </label>
            <input
              type="text"
              name="title"
              className="form-control"
              value={this.state.title}
              onChange={this.handleInputChange}
            />
          </div>
          <div className="form-group">
            <label>Description: </label>
            <textarea
              type="text"
              name="description"
              className="form-control"
              rows="3"
              value={this.state.description}
              onChange={this.handleInputChange}
            ></textarea>
          </div>
          <div className="form-group">
            <div className="form-check form-check-inline">
              <input
                className="form-check-input"
                type="radio"
                name="priority"
                id="priorityLow"
                value="Low"
                checked={this.state.priority === "Low"}
                onChange={this.handleInputChange}
              />
              <label className="form-check-label">Low</label>
            </div>
            <div className="form-check form-check-inline">
              <input
                className="form-check-input"
                type="radio"
                name="priority"
                id="priorityMedium"
                value="Medium"
                checked={this.state.priority === "Medium"}
                onChange={this.handleInputChange}
              />
              <label className="form-check-label">Medium</label>
            </div>
            <div className="form-check form-check-inline">
              <input
                className="form-check-input"
                type="radio"
                name="priority"
                id="priorityHigh"
                value="High"
                checked={this.state.priority === "High"}
                onChange={this.handleInputChange}
              />
              <label className="form-check-label">High</label>
            </div>
          </div>
          <div className="form-check">
            <input
              className="form-check-input"
              id="completedCheckbox"
              type="checkbox"
              name="completed"
              onChange={this.handleInputChange}
              checked={this.state.completed}
              value={this.state.completed}
            />
            <label className="form-check-label" htmlFor="completedCheckbox">
              Completed
            </label>
          </div>

          <br />

          <div className="form-group">
            <input
              type="submit"
              value="Update Todo"
              className="btn btn-primary"
            />
          </div>
        </form>
      </div>
    );
  }
}

Let's break few important attributes of HTML code:

name="priority" key defined in state
value="High" HTML element holding the value.
checked={this.state.priority === "High"} current state of HTML element.
onChange={this.handleInputChange} event to be triggerd on check/uncheck event.

Let's edit some todo now

As you can see the data has been updated successfully. And page has been redirect to list again.
Note: I have not added any screen-shot after redirection to make sure you are following along, please confirm by yourself.

Now only create todo task is pending, let's do that now

// importing packages
import React, { Component } from "react";
import axios from "axios";

// create todo component
export default class CreateTodo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      description: "",
      title: "",
      priority: "",
      completed: false,
      message: "",
    };

    this.handleInputChange = this.handleInputChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    this.setState({ [target.name]: value });
  }

  onSubmit(e) {
    e.preventDefault();
    const newTodo = {
      description: this.state.description,
      title: this.state.title,
      priority: this.state.priority,
      completed: this.state.completed,
    };
    axios.post("http://localhost:4000/todos/", newTodo).then((res) => {
      // after adding todo successfully, clearing the current state & showing success message
      if (res.status === 200) {
        this.setState({
          description: "",
          title: "",
          priority: "",
          message: "Todo created successfully.", 
        });
      }
    });
  }

  render() {
    return (
      <div style={{ marginTop: 10 }}>
        <h3>Create New Todo</h3>
        <form onSubmit={this.onSubmit}>
          <div className="form-group">
            <label>Title: </label>
            <input
              type="text"
              className="form-control"
              name="title"
              value={this.state.title}
              onChange={this.handleInputChange}
            />
          </div>
          <div className="form-group">
            <label>Description: </label>
            <textarea
              type="text"
              className="form-control"
              name="description"
              rows="3"
              value={this.state.description}
              onChange={this.handleInputChange}
            ></textarea>
          </div>
          <div className="form-group">
            <div className="form-check form-check-inline">
              <label className="form-check-label">
                <input
                  className="form-check-input"
                  type="radio"
                  name="priority"
                  id="priorityLow"
                  value="Low"
                  checked={this.state.priority === "Low"}
                  onChange={this.handleInputChange}
                />
                Low
              </label>
            </div>
            <div className="form-check form-check-inline">
              <label className="form-check-label">
                Medium
                <input
                  className="form-check-input"
                  type="radio"
                  name="priority"
                  id="priorityMedium"
                  value="Medium"
                  checked={this.state.priority === "Medium"}
                  onChange={this.handleInputChange}
                />
              </label>
            </div>
            <div className="form-check form-check-inline">
              <label className="form-check-label">
                <input
                  className="form-check-input"
                  type="radio"
                  name="priority"
                  id="priorityHigh"
                  value="High"
                  checked={this.state.priority === "High"}
                  onChange={this.handleInputChange}
                />
                High
              </label>
            </div>
          </div>
          <p>{this.state.message}</p>
          <div className="form-group">
            <input
              type="submit"
              value="Create Todo"
              className="btn btn-primary"
            />
          </div>
        </form>
      </div>
    );
  }
}

Let's run the application and create some todos, click on add from navbar & you will see a page like below, add some information & click on create todo

Finally, we have completed the code for our todo application.

Few points before wrapping up this article...

Error

Cannot read property of undefined, after clicking finish todo button

This error is occurring because this context is not available in current scope. To resolve this change the function to arrow function. In our demo above, array function has been used.

return this.state.todos.map((todo, index) =>{
      return <Todo todo={todo} key={index} finished={(task) => this.finishTask(task)} />;
    });

below code breaks

return this.state.todos.map(function(todo, index) { // this breaks
      return <Todo todo={todo} key={index} finished={(task) => this.finishTask(task)} />;
    });

Points to keep in mind

Source code of the article can be found here
For debugging your node app, follow YouTube video
You may have noticed that I have used a single repository to manage both of my applications. It is just for this demo. Here is my workspace, and how I am running both applications parallelly.

MERN Stack for Experience Developers

Jitan Gupta — Mon, 13 Sep 2021 16:30:09 +0000

In this article, I am going to cover below points

What is MERN Stack?
Setting up development environment
Todo app development

Database setup - creating database
Backend setup - creating APIs with Node & Express
Frontend setup - creating React app
Making application interactive - consuming APIs.

Before we start, Let me clarify, I am not going to do any comparison of MERN stack with other stacks here.

What is MERN Stack?

MERN (MongoDB, Express, React, Node) stack is a JavaScript stack used for developing web application. Each of these technology play an important role while developing web apps which are as follows:

NodeJs is an open-source and cross-platform runtime environment for executing JavaScript code outside a browser. In this case on server.
Note: NodeJs is not a framework or a programming language. It's just an environment.

Express is a NodeJs web application framework which provides a set of features for web & mobile application development. Using Express, we will create the backend APIs.

MongoDB
MongoDB, the most popular NoSQL database, is an open-source document based database. The term NoSQL mean non-relational. It means that MongoDB isn't based on table like relation database structure but provides an altogether different mechanism to store and retrieve data. This form of storage is called BSON (similar to JSON format). Read more here

React
React is a JavaScript library for creating user-interfaces (UI). But it's not limited to creating UI elements, we can develop standalone applications (SAPs) as well using other libraries like react-router-dom, axios and so on.

Let's start building our todo_app.
Problem Statement:
We want to track our daily tasks in a way that, it is always available at our fingertips. We can easily create and update a task. And whenever the task is completed, we can mark it as done.

Solution:
Let's break the problem statement into multiple parts

To make the data persistent we are going to store it in database i.e. MongoDB in our case.
Create few APIs to retrieve, update (this includes marking as complete) and create these tasks. For that we will use NodeJS & Express.
In order make our service available to end user, we are creating a browser based user-interface. For that we will use React.

Environment Configuration

Download and install MongoDB, follow official documentation. You can also install MongoDB Compass which is GUI for MongoDB.
Download and install NodeJS, follow official documentation. After installation you can cross verify by npm -v and node -v.
Download and install Postman, follow official documentation. We need postman to test our APIs.

Database setup with MongoDB

Once you have installed MongoDB, you can go to your installation location, in my case C:\Program Files\MongoDB\Server\5.0\bin>, and type mongo to cross verify.

Let's create database

// From the installation folder
mongo // it will start mongo terminal
use mern_todo // Creating new database mern_todo

Backend setup with Node & Express

// Setting up backend server
mkdir backend // creating backend folder
cd backend 
npm init y // creating package.json file
npm i express body-parser cors mongoose

Express: We have seen it ealier.

body-parser: Node.js body parsing middleware. Using body parser, we parse the request body in required format.

app.use(bodyParser.urlencoded({extended: true})); // Supports URL encoded bodies
app.use(bodyParser.json()); // Supports JSON encoded bodies

CORS is a node.js package for providing an Express middleware that can be used to enable CORS with various options. Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. In simple words, Using CORS we can ensure that the request is coming from authorized source or not.

mongoose: A Node.js framework which lets us access MongoDB in an object-oriented way. Don't forget to checkout the schema part below in this article for clear understanding.

Moving ahead, Let's install Nodemon globally.
Nodemon is a utility that will monitor for any changes in your source and automatically restart your server.

npm i -g nodemon

let's create server.js using which we will be configuring our backend service.

// importing required packages
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const cors = require("cors");
const mongoose = require("mongoose");
const PORT = 4000;

// configuring the middleware
app.use(cors());
app.use(bodyParser.urlencoded({extended: true})); // Supports URL encoded bodies
app.use(bodyParser.json()); // Supports JSON encoded bodies

// connecting to database
mongoose.connect("mongodb://127.0.0.1:27017/mern_todo", {
  useNewUrlParser: true,
});
const connection = mongoose.connection;
connection.once('open', function(){
    console.log('MongoDB database connection established successfully');
});

// listening the request at port 4000
app.listen(PORT, function () {
  console.log("Server is running on Port: " + PORT);
});

Please note, at this point if you will head to http://localhost:4000/, you will see nothing. But in Terminal, you can see the output successfully.

To see the output in browser add below lines before app.linsten section

app.get('/',(_, response) => {
    response.send("Hey, You can see me now!!!");
});

By using Mongoose we are able to use MongoDB database in an object oriented way.
This means that we need to add a Mongoose schema for Todo entity in our project.
Create a folder called models in root directory and add a todo.js file.

// importing required packages
const mongoose = require("mongoose");
const Schema = mongoose.Schema;

// declaring Todo schema
let Todo = new Schema ({
  title: { type: String },
  description: { type: String },
  priority: { type: String },
  completed: { type: Boolean },
});

// exporting to make it consumable
module.exports = mongoose.model('Todo', Todo);

Using Todo schema, we can access the mern_todo database.

Let's create our Todo API:
We are going to follow the REST API architectural style.
REST API Architectural style means, using same URL with different Http verbs (GET, POST, PUT, DELETE) we can perform different-different actions.
Create a folder called routes in root directory and add a todo_routes.js file.

// importing packages
const express = require("express");
const todoRoutes = express.Router();

// importing model to access todo collection in mern_todo database
let Todo = require('../models/todo');

// get - returns list of todos
todoRoutes.route("/").get(function (req, res) {
  Todo.find(function (error, todos) {
    if (error) {
      console.log(error);
    } else {
      res.json(todos);
    }
  });
});

// get by id - returns single todo
todoRoutes.route("/:id").get(function (req, res) {
  let id = req.params.id;
  Todo.findById(id, function (error, todo) {
    if (!todo) {
      res.status(404).send("Todo not found");
    }
    res.json(todo);
  });
});

// update - updates a todo at provided id
todoRoutes.route("/:id").put(function (req, res) {
  let id = req.params.id;
  Todo.findById(id, function (error, todo) {
    if (!todo) {
      res.status(404).send("Todo not found");
    } else {
      todo.title = req.body.title;
      todo.description = req.body.description;
      todo.priority = req.body.priority;
      todo.completed = req.body.completed;

      todo
        .save()
        .then((todo) => {
          res.json("Todo updated");
        })
        .catch((error) => {
          req.status(400).send("Update not possible");
        });
    }
  });
});

// post - adds a todo
todoRoutes.route('/').post(function(req,res){
    let todo = new Todo(req.body);
    todo
        .save()
        .then((todo) => {
          res.status(200).json({'todo': 'todo created successfully'});
        })
        .catch((error) => {
          req.status(400).send("failed to create todo");
        });
});

// delete - removes a todo
todoRoutes.route('/:id').delete(function(req,res){
  let id = req.params.id;
  Todo.findById(id, function (error, todo) {
    if (!todo) {
      res.status(404).send("Todo not found");
    } else {      
      todo
      .delete()
      .then((todo) => {
        res.status(200).json({'todo': 'todo deleted successfully'});
      })
      .catch((error) => {
        req.status(500).send("failed to delete");
      });
    }
  });
});

// exporting the todo routes
module.exports = todoRoutes;

Now add these routes to server.js file

...
...

app.use('/todos', todoRoutes);

app.listen(PORT, function () {
  console.log("Server is running on Port: " + PORT);
});

Let's test the the APIs now
POST

GET

GET by Id

PUT

DELETE

Phew, that was to much work. But finally our backend is ready and tested.

In next article we are going to create our react-app.

Dart for Experienced Programmers

Jitan Gupta — Thu, 02 Sep 2021 13:02:25 +0000

If you know any Object Oriented programming language like C#, Java, and you want to understand the basic fundamentals of Dart. This article is for you.

Before you proceed further, please note, this article contains only examples and syntaxes.

Fundamentals

Dart is static type, object oriented programing language.
Dart support two types of compilation i.e. JIT (Just in Time) and AOT (Ahead of Time).

Just In Time

A JIT compiler converts program source code into native machine code just before program execution. Compilers are usually one of the deciding factors in the speed of an application both in development and when pushed to production. The JIT compilers can be used to improve performance speed and improve application runtime.

Ahead Of Time

The AOT compiler works by compiling your code before it is “delivered” to whatever runtime environment runs the code. The AOT compiler is typically used when the app is ready to be deployed to either an appstore or an in-house production backend.

Read/Write

import 'dart:io';

stdout.writeln("What is your name");
String? name = stdin.readLineSync();
print("My name is $name"); //$name string interpolation

Data Types

Strongly typed data type: int, double, String, bool
Dynamic typed data type: dynamic

void main() {
  int amount = 100;
  var amount2 = 100;

  print("amount: $amount | amount2: $amount2");

  // similarly for String, double, bool

  // dynamic
  dynamic weakVariable = 100;
  print("Weak variable 1: $weakVariable \n");

  weakVariable = "Dart Programming";
  print("Weak variable 2: $weakVariable");

}

String

void main() {
  var s1 = 'Single quotes work';
  var s2 = 'Double quotes work as well';
  var s3 = 'It\'s easy to escpte the string delimiter';
  var s4 = "It's even easier";

  print(s1);
  print(s2);
  print(s3);
  print(s4);
  print('');

  // Raw String
  var s = r'In a raw string, not even \n gets special treatment';
  print(s);

  // String interpolation
  var number = 35;
  var str = "Current number is $number";
  print(str);
}

Type Conversion

void main() {

  // String -> int
  var one = int.parse('1'); // not safe, if 'str' is passed, it will fail
  assert(one ==1); // testing that parsed correctly

  // String -> double
  var onePointOne = double.parse('1.1');
  assert(onePointOne == 1.1);

  // int -> String
  String oneAsString = 1.toString();
  assert(oneAsString == '1');

  // double -> String
  String piAsString = 3.14150.toStringAsFixed(2); // 2 floating point
  assert(piAsString == '3.14');
}

Constant

use const keyword to make a variable const.

Null

if you will to set null, you will get linting error (disable it before testing).

class Num {
  int num = 10;
}

main() {
  var n; // n is null
  // var n = New(); // creating new object of class
  int number = n?.num ?? 0; // if n is null or n.num is 0 then assign 0
  print(number);
}

Function

old school

<return_type> / void <function_name>(param_type param1, param_type param1 ){
  return / nothing in case of void
}

dynamic square(var num) {
  return num * num;
}

int square2(int num) {
  return num * num;
}

Arrow Function => // '=>' is also known as fat arrow function;

dynamic square(var num) => num * num;

nameless function also known as anonymous function

main() {
  var list = ['apples', 'bananas', 'oranges'];
  list.forEach(printF); // old school
}

void printF(item) {
  print(item);
}


// anonymous type
 var list = ['apples', 'bananas', 'oranges'];
  list.forEach((item) {
    print(item);
  });
}

Positional & Named Parameter

// Positional parameter
main() {
  print(sum(2, 2));
}

dynamic sum(var num1, var num2) => num1 + num2;
// ---------
// Named Parameter
main() {
  print(sum(num2: 5, num1: 8));
}

dynamic sum({var num1, var num2}) => num1 + num2;
// ---------
// Combined together
main() {
  print(sum(5, num2: 8));
}

dynamic sum(var num1, {var num2}) => num1 + num2;

Note:
By default named parameters are optional parameter, but you need to handle the null situation.
Updated code

main() {
  print(sum(5));
}

dynamic sum(var num1, {var num2}) => num1 + (num2 ?? 0); // manually handling
// dynamic sum(var num1, {var num2 = 0}) => num1 + num2; // default value

similarly for Positional parameter

dynamic sum(var num1, [var num2]) => num1 + (num2 ?? 0); // manually handling

Class

class Person {
  String name;
  int age;

  // Shortcut
  Person(this.name, [this.age = 18]); // [] optional parameter, in this case age

  // Named Constructor
  Person.Guest([this.name = "Guest", this.age = 18]) {} // optional parameter
  Person.Guest2({this.name = "Guest", this.age = 18}) {} // positional parameter

  void showOutput() {
    print(name + ' ' + age.toString());
  }
}

class X {
  final name; // won't change after assigning first time // runtime
  static const int age = 10; // compile time

  X(this.name);
}
// --------
// Inheritance & overriding
class Vehical {
  String model;
  int year;

  // Shortcut
  Vehical(this.model, this.year);

  void showOutput() {
    print(model + ' ' + year.toString());
  }
}

// inheritance
class Car extends Vehical {  
  double price;

  Car(String model, int year, this.price) : super(model, year);

  // void showOutpu() {
  //   super.showOutput();
  //   print(this.price);
  // }

  @override
  void showOutput() {
    print(this.price);
    print(this.price);
  }
}

Collection[List, Set, Map]:

main() {
  List<String> names = ['name1', 'name2'];
  // List names = ['name1', 'name2']; // List<dynamic>
  // var names = ['name1', 'name2']; // List<String>
  print(names[0]);
}

  // Mutable
  List<String> names = ['name1', 'name2'];
  names[1] = "new name";

  // Immutable
  List<String> names2 = const ['name1', 'name2'];
  names2[1] = "updated"; // while running, this will break;

Set

// Set is an unordered collection of unique item.

var halogens = {'fluorine', 'chlorine', 'fluorine'}; // as you can see, I am trying to add 'fluorine' again, this will throw linting error

// this will work
Set<String> halogens = {'fluorine', 'chlorine'};

Map

// Map is basically a collection of key-value items, similar to Dictionary in C#

  // Map
  Map<String, String> halogens = {'first': 'fluorine', 'second': 'chlorine'};
  var halogens2 = {'first': 'fluorine', 'second': 'chlorine'};
  var halogens3 = {1: 'fluorine', 2: 'chlorine'}; 
  Map<int, String> x = {1: 'fluorine', 2: 'chlorine'};
  var halogens4 = Map();
}

Exception Handling:

 try {


  } on CustomException { // handle custom errors, if the error is of type CustomException


  }  on DomException { // handle Dom Exception


  }catch (e) { // handle all error except above exceptions

  } finally {


  }

Future, Async, Await

Future<String> createOrderMessage() async {
  var order = await fetchUserOrder();
  return "Your order is: $order";
}

Future<String> fetchUserOrder() => Future.delayed(
  const Duration(seconds: 2),
  () => "Some product",
);

Future<void> main() async {
  print("Fetching user order...");
  print(await createOrderMessage());
}

If I have missed any important topic regarding dart fundamentals, please comment down below. I will be more than happy to update this article.