I'm glad to see you here.

In today's article, we will take a look into the concepts of web assembly And, I will walk you through the initial setup for configuring your working environment for web assembly development.

Before starting, Let me answer some of the questions.

What is Web Assembly?

WebAssembly is a new type of code that can be run in modern browsers, which brings new features and significant improvements to performance.

Well, it's not intended to write the whole assembly code by hand. It is designed to be an effective compilation target for source languages like C/C++, rust, etc.

Why Web Assembly?

Web assembly allows developers to run code written in several programming languages on the web, at near-native speeds while leveraging hardware capabilities that are common to most platforms.

A web platform has two parts:

• A virtual machine (VM) that runs the Web app’s code. e.g. the JavaScript code that powers your apps.
• A set of Web APIs that the Web app can call to control web browser/device functionality and make things happen. (DOM, CSSOM, WebGL, IndexedDB, Web Audio API, etc.).

Hmm, but why to even use web Assembly? All this stuff seems unnecessary. JavaScript works well when developing for the web.

Yeah. JavaScript is great, and 90% of the time, you don't even have to think about developing in web Assembly.

But when while developing a performance-intensive web application, JavaScript alone wouldn't be a good choice.

Performance intensive web app examples, 3D games, Virtual and Augmented Reality, computer vision, image/video editing, and serveral other domains that demand native performance.

Will it replace JavaScript?

Hell No!

It is built to complement and work alongside JavaScript, allowing web developers to take of both.

• JavaScript is a high-level language, flexible and expressive enough to write code. It also has a huge ecosystem that provides powerful frameworks, libraries, etc.

• WebAssembly is a low-level assembly-like language. And it has a compact binary format that runs with near-native performance.

With Web Assembly in the browser, the virtual machine that we talked about earlier will now load and run two types of code — JavaScript and WebAssembly.

Right now, you must be thinking, how do both languages work together?

Yeah JavaScript Web Assembly API wraps the web Assembly code into the JavaScript function that can be called normally.

And yeah, Web Assembly can also import and call the normal JavaScript function "synchronously".

Wanna know more? WebAssembly - JavaScript | MDN

Now that we are clear why, how, what is Web Assembly. Let's dig into

Key Concepts of Web Assembly

The JavaScript API provides developers with the ability to create modules, memories, tables, and instances.

By the way, what are these?

Modules

It represents a WebAssembly library that has been compiled by the browser into executable machine code. And that's pretty much it.

Nothing Special.

Memory

It is an ArrayBuffer that contains the linear array of bytes read and are written by the low-level memory instruction.

This is a kind of technical definition of memory. That's it. Nothing much to worry about.

If you're familiar with C++, imagine this as a Vector. Which is also known as a resizable array. That's it!

Table

It's a resizable array too, but it stores the references.

References of what??

JS Functions, etc. For safety and portability reasons.

Instance

It's a module that is paired with all the states, including Memory, table, and set of imported values.

These were some definitions or concepts in the sense which are required when dealing with WASM.

On the side-note, Since JavaScript has complete control over how Web Assembly code is downloaded. compiled and run.

JS Developers could even think of WebAssembly as just a JavaScript feature for efficiently generating high-performance functions.

Above we talked about the raw primitives that WebAssembly adds to the Web platform: a binary format for code and APIs for loading and running this binary code.

In my next article on WASM, I will walk you through using WASM in your application.

Excited to learn?

Feel free to sign up for my newsletter. I'm not regular currently for writing articles due to my pathetic timetable. But I will try to publish new Articles Every Week from now.

Cya, Happy Learning 😄

So, what are we going to learn today?

In this article, I’ll cover state management through Provider in Flutter.

But before starting out, I want to answer some basic questions,

What is State-Management in the First Place?

According to Wikipedia,

State management refers to the management of the state of one or more user interface controls such as text fields, OK buttons, radio buttons, etc. in a graphical user interface.

By the way, this definition gave me loose motion. 🥴

Let me give you my definition of State Management using an example,

Think of our classic counter application,

You see there’s an Add button and Text at the center stating the number of times you performed a click event on the ADD button.

But how is this even related to state management?

Well, Here changing the value of the text at the center according to the value stored in the variable is State-Management!

Now head back to our Wikipedia Definition, After this example, I think you’re pretty much clear about, What is State-Management?

As our application is already updating the U.I. according to the value inside the variable.
In light of this, we can conclude that our counter application already manages the state.

You guessed it right!

SetState is managing our state in this case!

Gangadhar hi Shaktimaan hai 👀

Let's implement the provider in our application now.

Step 1: Create a flutter application.

Step 2: Add provider into your pubspec.yaml file.

Step 3: Wrap your Material app with MultiProvider.

What does it do?

Well, this will act as a tunnel for your application.

Something like this. This diagram depicts that every method declared inside a class which extends the ChangeNotifier will go through the tunnel named Provider or any state management package.

But why is this even needed?

Using a state management package like Provider or any other makes your code more readable. Imagine using setstate everywhere. That would work too. But in this case, you will be irritated when developing a massive project.

Why use a provider?

You can use any state management package you want. It doesn't matter at all. The concepts are the same in all cases. When using bloc, riverpod, getx, or anything. The concept explained above is the same.

Let's get back to our steps,

Step 4: Create a class that extends the changeNotifier

class CounterNotifier extends ChangeNotifier {}

What’s the task of this class?

Here we will declare all the methods that we want to use in our application.

Since we’re building a counter application using flutter, we will be adding the increment and decrement methods to control the centered text.

Step 5: Define the methods

Let's Go! 💪

class CounterNotifier extends ChangeNotifier {
  int counter = 0;

  void increment() {
    counter++;
    notifyListeners();
  }

  void decrement() {
    if (counter > 0) {
      counter--;
      notifyListeners();
    }
  }

  get count => counter;
}

Hmm, looking at the code, I guess you have understood everything going on. But still, let me explain too 😅 ( That’s why I’m writing this blog naa ).

The first thing inside our class is our variable that will be used by our widget to update its state.

The next two methods are also simple to understand. But there's something important inside those.
notifyListeners() method!

Using this method, we are telling our widget,
Hey you widget, the value inside this variable is updated.
Update the U.I. Man!!!

Hmm, Now how to set our widget to listen to these changes??

Good Question! We need to use a consumer widget to do so.

Like this,

Consumer<CounterNotifier>(
              builder: (context, watch, child) {
                return Text(
                  watch.counter.toString(),
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            )

In the above example, I’m calling the consumer widget directing our CounterNotifier class which we defined.

To listen to our damn variable, we have used the watch variable.

Now what??
Hey there’s more, we want to trigger the values too, right?
For this we will use a button, In this case, we’re using floating buttons.

Here's the usage,

floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () => provider.increment(),
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
          const SizedBox(width: 10),
          FloatingActionButton(
            onPressed: () {
              if (provider.counter > 0) {
                provider.decrement();
              } else {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text('Counter is already 0'),
                  ),
                );
              }
            },
            tooltip: 'Decrement',
            child: const Icon(Icons.remove),
          ),

Hey but, what is that provider?

Umm, I made an alias. Here,

provider = Provider.of<CounterNotifier>(context, listen=false);

Here’s the structure of our code,

And here’s the output,

Are you interested in seeing the code?
There you go, Source Code

Thanks for reading, I'll see you in my next article.
Until then, Happy Coding!

Cheers 😊

If you have any doubts, do join my Telegram Group to clear them.

Hey Guys, It's Gulshan again with another article.

In this article, we will be going through some basics of react and its file structure.

It is the chapter 1 of my react series. I hope you'll love to learn by following my articles.

Why would you use react? 🤔

• It structures the "view" layer of your application
• You can reuse the components you wrote.
• Uses JSX
• One can build interactive UIs with virtual DOM

If you aren't familiar with these words JSX, DOM, etc.

Don't worry, I'll explain them.

Please wait until I write an article on DOM or head over to MDN DOCS.

What are the prerequisites? 😳

• Basic HTML, CSS and JavaScript

  Some of the core JavaScript concepts required are,

  • Understanding of DOM
  • Data types and all those basic things
  • Promises and asynchronous programming
  • Array Methods like forEach() and Map()
  • How to make an HTTP request.

Note:
These aren't compulsory if you have previous experience in some programming language. You can relate those stuff with my upcoming blogs on react and Vanilla JavaScript.

What we will cover? 🧐

• We will understand the file structure of our react application.
• We will also have a look at JSX, which seems a bit daunting.
  
• But I got you covered.
  I'll walk you through the basics of JSX, And will try my best to make you comfortable using JSX in react.

For those who don't know what JSX is?

• Well, JSX is the templating language for react. It is an extension of JavaScript and is like a templating language but with the powers of JavaScript.

Tip:

Learning JSX will make you a better JavaScript developer.

Ready to learn?

Let's get started,🔥

We need a react project.
For that, head over to your terminals and create a react app by,

npx create-react-app my-app

It will create a react application with typescript files instead of JavaScript files.

• For those who don't have Node Js installed.
  Head over to Nodejs site and install it. And re-run the above command to create a react app.

After the above procedure, you will have a project file structure like this,

Now run, npm start for running our react app.

Here's how it will look like,

Let's understand the file structure of our react application.

• The package.json file has the list of dependencies required.

  These are used by your react application

• The package-lock.json file has the version and other details of installed packages.

• Open the public folder. This folder is a kind of gateway to our application. Right now, we don't have to deal with this folder.

Umm, I want you to open the index.html file inside the public folder which you opened.

On line number 31, you see there's a div tag with id root

In another folder named src, you'll find an index.js file.

on line number 11, it says to get the element in the document ( i.e. our public/index.html ) with id root and run this script on it.

In our case, it is inserting our app into that div.

Where's the code of the app?

You will find the code of our current application inside the app.js file of the current directory.

You see, this file is imported into the index.js file using import App from './App';.
And its function App is called in the index file.

Now we have learned about the file structure and how this react app works. Let's open the public/index.html to customize the title of our application.

While working with react, you don't have to save your file and restart the server to check the changes.
The NPM engine does that for you.
After all,

Let's answer some important questions,

What does it mean? 😶

If you're here, you have an idea about what is react. But then also in simple terms,

• React is a library for building User interfaces.
• React runs on the client browser as a SPA(Single Page Application).

By the way, what is SPA? What does it mean?

For example, check youtube.com When you open that site on your desktop, it will load once. Then whatever you do with youtube, you won't see a loading indicator on the tab section of your browser.

Now open the src/App.js and check what's happening under the hood.

Looking at the code, it looks like the function App returns an HTML component. But it's not.
It looks like HTML. But when you check, you will find that HTML tags have the class attribute named className not class.
This is JSX, not our good old HTML 🥺.

Now replace the code inside the src/app.js with the code shown in the image below,

I want to show you something, press f12 or ctrl + shift + I on your keyboard,

You see, the website content has the boilerplate which we saw in file public/index.html and our hello WOrld between our div tag of id root.

Okay, What else can we do with react? 😁

As we are writing JSX code, we can use javascript inside our HTML body ( can say, for now )

Something like,

import './App.css';

function App() {
  const username = "Gulshan";
  const isConfirmed = false;
  return (
    <div className="App">
      <h1 className="heading">{isConfirmed ? "Hello" + username : "Please login"}</h1>
    </div>
  );
}

export default App;

Here in this code, I have used the ternary operator for writing this conditional element.

It is one of the advantages of react.

Let's build our component in react.😈
Head over to your src folder and create another folder named components. Here we will store our various JSX component files.

Ohh, by the way, you can have a JSX or js extension of your file. It won't make much difference, but it will allow your code editor to identify that this file is a react file. And this will help your editor to provide suggestions and formatting of code.

Else you have to tell your code editor, "Hey, this is a react file." which we don't want to do.

Suggestion 🤓:

If you're using VS CODE like me. Install the ES7 React/Redux/GraphQL/React-Native snippets extension. It will help you a lot and we will use it in the later section of this article.

ES7 React/Redux/GraphQL/React-Native snippets for sublime

For vim users

Now open our src/components/header.jsx file. Type rafce, It will create the boilerplate for our component.

import React from 'react'

const Header = () => {
    return (
        <div>

        </div>
    )
}

export default Header

Replace the div element with Header in this file and add the title inside it.

import React from 'react'

const Header = () => {
    return (
        <header>
            <h1>Todo tracker</h1>
        </header>
    )
}

export default Header

Press ctrl+s to save the changes, but there are no changes. Why? You're supposed to import the required file into the main file.

In our case, the main file is App.jsx or App.js.

How to import our components?

import Header from './components/Header';

And now we have to embed it inside our code,

<Header />

Add this line between our div.

index.jsx

import Header from './components/Header';
import './App.css';
function App() {
  return (
    <div className="App">
      <Header />
    </div>
  );
}

export default App;

And now save the code, and you can see the changes.

How to use the components in react like a function? Or how to pass arguments? 🥶🧐

<Header title="Gulshan" />

Yeah that's it. But hey how our header component will handle this argument?

src/components/header.jsx

const Header = (argument) => {
    return (
        <header>
            <h1>Hello {argument.title}</h1>
        </header>
    )
}

export default Header

Write any word within the parenthesis and use it inside of your component.

Hey, wait, what If I missed to pass any value? 🤪

It will show nothing in the place of our component, or certain sections of our component will be empty.

So for tackling this, we have defaultProps.

Header.defaultProps = {
    title: "My title"
}

Add this at the end of your code inside the header.jsx file before that export .... line.

It will provide your component with a default property. That can be used when you didn't pass any value while using it.

What if you want some type safety?

Type safety means a compiler will confirm the types such as int, string, etc While compiling your code. And it will throw an error if you tried to assign a variable with the value of wrong type.

This is achieved using propTypes in JS.

How to use it?

>

// Add this line below your code above the export stuff.
Header.propTypes = {
    title: PropTypes.string
}

• This will ensure that you're passing a string or a variable of type String.
• You can add .isRequired after the string key to ensure that your code is null safe.

But how is this going to ensure that my code is bug-free?

We will receive an error message in the console tab of a browser if our rule/property does not meet the conditions.

If you don't want to define such properties, then you can use TypeScript. We will talk about this extension of JS in our later article.

How to use CSS inside our JSX component as our attribute?

Here's an example of it,

// argument is props, but I just used this as an example.
const Header = (argument) => {
    return (
        <header>
            <h1 style={{
                color: 'blue',
            }}>{argument.title}</h1>
        </header>
    )
}

You have to write your CSS code inside the two curly braces.

But we aren't done yet!

Since we are using our typical JS code. We can declare our style inside a variable and use it as the value of the style attribute.

Example:

import PropTypes from 'prop-types'

const Header = (argument) => {
    return (
        <header>
            <h1 style={HeaderStyle}>{argument.title}</h1>
        </header>
    )
}

const HeaderStyle = {
    color: 'red',
}
Header.defaultProps = {
    title: "My Title"
}

Header.propTypes = {
    title: PropTypes.string.isRequired
}

export default Header

But we won't be doing this kind of stuff.
Else, we will be using the index.css file for working with CSS in our React Application.

Hmm, Looks like we're clear with the basics required. If any exists I'll cover it in my future article.
Until then,

Happy Coding😊.

if (youLikedThisArticle) {
    console.log('Please smash the reaction buttons above.😊')
} else {
 throw('Please write a comment below stating the issue. This would help me writing good articles for you. 😊');
}

In my previous articles, we have discussed some of the basic terminologies in JavaScript.

In this article, we'll be learning about hoisting in JavaScript.

So what is hoisting?

Hoisting refers to the process where the interpreter allocates memory for a variable or function before its execution.

In simple words, a variable or function can be used before it is declared.

I hope you are clear till here.

Let's start with,

Variable hoisting.

As per the above definition, we can use a variable before declaring it.

So let's try it.

console.log(Gulshan);

var Gulshan = 100;

And that's it, run this code, and you will get an output of 100 without getting a Reference error.

Output:

I hope you're clear till now.

Let's understand function hoisting.

If you understand the previous topic. i.e. variable hoisting.

I want you, to try it on your own now.

Nonetheless,

Function hoisting.

I want you to apply the above definition again.

Function hoisting means that a function can be used before it is being executed.

Example code:

somefunction();

function somefunction(){

 console.log("hello");

}

Like the previous code, this piece of code will work too without any error.

Output:

You may ask, how all this works?

JavaScript interpreter defines all these variables and functions at the top of the program.

Is it a good practice?

Nope, this makes code confusing to read because you will find it harder to read the code when your code grows big in size.

So you should declare your functions and variable at the top.

And hoisting doesn't add any performance benefits too.
So it doesn't make any sense to use hoisting if you don't want to blow up your mind in fixing bugs.

Advantages of hoisting

Convenience?

No .

It is convenient. Both to the reader of code as the coder. Not so much for variable hoisting, but function hoisting.

This way, you can put the helper functions to the bottom of your code and the more abstract ones, which show your business logic at the top.

Disadvantages of hoisting

You can access them before they are declared. In such a case, their value would be undefined though, as only declarations and not initializations are hoisted.
Therefore it is generally considered a bad practice.

In my forthcoming article, I won't be covering all the basics. There are more great articles than mine.

You can find a ton of knowledge here, MDN Docs

In future articles, I'll be demonstrating to you how to write javascript programs.

I won't be touching web development as of now. We will be doing scripting, scraping, and many more using JavaScript (Advance mode)

Until I come up with another article,

Stay safe and happy coding.

Cya 😄

So you want to learn some basics of JavaScript?

So In this article, I'll be walking you through some basic grammar of JavaScript.

For starters, let's understand what are the use-cases of JavaScript.

JavaScript is a programming language that is used to create dynamic web pages.

what are dynamic webpages?

dynamic webpages are pages that are generated by the server.

for example, check youtube.com or facebook.com these are dynamic webpages. But why are these are dynamic web pages?

Becuase these pages are generated according to the data stored inside the server or database. This is called server-side scripting.

What is server side scripting?

In Simple terms, server-side scripting is the process of generating dynamic web pages.

According to the wiki,

Server-side scripting is a technique used in web development that involves employing scripts on a web server that produces a response customized for each user's (client's) request to the website. The alternative is for the web server itself to deliver a static web page.

What this means is, the server-side script generates the webpages according to the data stored inside the database about the user.

This information is used to generate web pages that are useful to the user.

This is it.

JavaScript shares most of its syntax with other programming languages like Java, C++, Python, etc.

So if you are familiar with these programming languages, you can grasp the syntax of JavaScript with no issue.

If not, don't worry.
I'll be explaining the syntax of JavaScript in detail.

JavaScript is case Sensitive

So var name = "John"; and var Name = "John"; are two different variables.

So if you declared name and tried to access Name, it will throw an Uncaught ReferenceError.

Ahh, I didn't mention what is console.log? You can use it to print the value of any variable or anything you want to print inside the console.

What is a console?

A console is a part of the browser, used to check the output of the JavaScript code or debug the existing code and maybe for performing some nasty thing XD.

To access the console, press F12 on your keyboard.

Here in the above image, I have declared a Variable. But how?

In this example, I have used the var keyword. But you can also use let or const keywords.

Using can also declare a variable without using any of the above keywords. (Yeah, a pythonic way)

But there's a catch.
An undeclared variable or a variable with no keywords will act as an undeclared global variable.

What's an issue with undeclared global variable?

To answer this question, Let's distinguish between a declared variable and an undeclared variable.

Declared global variable

• Is a property of the default global object (window)
• The property attributes cannot be changed.
• Cannot be deleted using the delete operator.

Undeclared global variable

• Is a property of the default global object (window).
• The property attributes can be changed.
• Can be deleted using the delete operator.

I know this is a bit confusing,

In Simple terms, If you're declaring a variable with a keyword (var, let, const) inside a function, It is treated as a local variable.

But if you declared a variable without any keyword inside a function, it is treated as a global variable.

This is generally unsafe and should be avoided.

Let's talk more about the declaration in JavaScript.

JavaScript has 3 types of declaration:

1. var

The var statement declares a function-scoped or globally-scoped variable, optionally initializing it to a value. for example:

var x = 1;

if (x === 1) {
  var x = 2;

  console.log(x);
  // expected output: 2
}

console.log(x);
// expected output: 2

You can say that the var declared variable is a globally-scoped variable. or a global variable.

2. let

The let statement declares a block-scoped local variable, optionally initializing it to a value. for example:

let x = 1;

if (x === 1) {
  let x = 2;

  console.log(x);
  // expected output: 2
}

console.log(x);
// expected output: 1

Here, in this case, the life of a variable is limited to the block it is declared in.

3. const

Constants are block-scoped, much like variables declared using the let keyword. The value of a constant can't be changed through reassignment, and it can't be redeclared. For example:

const number = 42;

try {
  number = 99;
} catch (err) {
  console.log(err);
  // expected output: TypeError: invalid assignment to const `number'
  // Note - error messages will vary depending on browser
}

console.log(number);
// expected output: 42

Well, you guessed it right, a variable with type const is a constant variable. The value stored inside this variable cannot be changed.

Evaluating variables

A variable declared using keyword var or let with no assignment is undefined.

So when you try reading the variables which you declared having value undefined, it will throw an error.

Obviously, what do you want from a variable which you declared without any value?

what about a variable of type const?

JavaScript won't allow you to do so. It will throw an error when you try.

Well, this undefined thing is not always a problem.

Imagine you're working on a project where you want to deal with some API.

Here, there can be a possibility that you're not able to get the data from the API.

So for dealing with this, you first store the data in a variable, and then you check if the data inside is undefined or not.

How do you do that?

Here's a simple example,

var input;
if (input === undefined) {
  doThis();
} else {
  doThat();
}

In this example, we are checking if the input variable is undefined or not.
i.e. it is null or not.

Since JavaScript is not null safe, a developer has to take care of that too.

So this is it for now.
In my future article, I'll be explaining the terms related to hoisting in JavaScript.

Until then, stay safe and happy coding.
Cya 😊

When dealing with APIs, Your app or program can handle the latency or errors for you.

We will be building an application that looks like this,

Without having any issue,

When having some issue,

When having a null response,

Let us say we are dealing with i/o operation, So what it suppose to do in that time interval can be defined by using FutureBuilder or StreamBuilder.

Let's see how Future Builder works and How to use it to display our list using the ListView Widget.

In our previous article, I have articulated the concept behind parsing a JSON string using Random Person API.
Here, I will be using random User API for this Article.

You can also have a look on it

Starting with the main.dart file, I have the following code,

import 'package:flutter/material.dart';
import 'package:jsonstuff/screens/homepage.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      themeMode: ThemeMode.system,
      theme: ThemeData(
        // primarySwatch: Colors.purple,
        brightness: Brightness.dark,
      ),
      home: const MyHomePage(),
    );
  }
}

My homepage.dart file,

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:jsonstuff/models/person_model.dart';
import 'package:jsonstuff/services/network_calls.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final NetworkService personData = NetworkService();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Json Testing"),
        backgroundColor: const Color(0xFF6002ee),
      ),
      body: SafeArea(
        child: FutureBuilder(
          future: personData.fetchPerson(),
          builder: (BuildContext context,
              AsyncSnapshot<List<PersonModel>> snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                itemCount: snapshot.data!.length,  // 
                itemBuilder: (BuildContext context, int index) {
                  var currentPerson = snapshot.data![index];
                  return InkWell(
                    onTap: () {
                      // Whatever you want to accomplish.
                    },
                    child: Padding(
                      padding: const EdgeInsets.all(4.0),
                      child: ListTile(
                        leading: CircleAvatar(
                          backgroundImage:
                              NetworkImage(currentPerson.picture.thumbnail),
                        ),
                        title: Text(currentPerson.name.toString()),
                        subtitle: Text(currentPerson.email),
                      ),
                    ),
                  );
                },
              );
            }
            if (snapshot.hasError) {
              return AlertDialog(
                title: const Text("Something Gone wrong :("),
                actions: [
                  TextButton(
                    onPressed: () {
                      SystemNavigator.pop();
                    },
                    child: const Text("Exit"),
                  )
                ],
              );
            } else {
              return const LinearProgressIndicator();
            }
          },
        ),
      ),
    );
  }
}

Now we have a rough idea what is the use case of FutureBuilder,
How it works?

In FutureBuilder we have a required argument builder, that we need to implement with a Function having a Context and Async Snapshot of your defined class.

Do this means that our code will work without having the Future argument?

Yes, It will work but now we have to provide the data using initstate. Which we will discuss in our future articles.

What Future argument is doing in the code? What's its role?

It is performing the asynchronous computation to which this builder is connected.

What is asynchronous?

Async Simply means occurring at the same time. And Await means to wait. i.e. to wait for a certain operation to be completed.

Just for a quick recap :)

After reading all this you may have a rough idea that Future is creating the snapshots and Builder argument is passing it as an argument in some function.

As we saw here,

builder: ((BuildContext context, AsyncSnapshot<List<PersonModel>> snapshot) {
        // Body
}

So now here comes an important part, If you did the flutter installation recently, that means you are probably using Flutter V2.x, which has been migrated to null safety.

What is null safety?

As we are using this API, there could be cases when the server which serves this API would be down due to some technicality.

Or maybe the link provided by the API is broken, or you may have some typo in the link.

So for handling these kinds of issues, Dart Provides a mechanism known as null safety. But you can disable it if you are annoyed by those errors related to null safety in your code.

So we just need to define some cases like, If Something goes wrong, show this.
Show loading indicator until the list has been created for your user.

I think we are done with FutureBuilder, Let's move on to ListView Builder.

 if (snapshot.hasData) {
              return ListView.builder(
                itemCount: snapshot.data!.length,  // 
                itemBuilder: (BuildContext context, int index) {
                  var currentPerson = snapshot.data![index];
                  return InkWell(
                    onTap: () {
                      // Whatever you want to accomplish.
                    },
                    child: Padding(
                      padding: const EdgeInsets.all(4.0),
                      child: ListTile(
                        leading: CircleAvatar(
                          backgroundImage:
                              NetworkImage(currentPerson.picture.thumbnail),
                        ),
                        title: Text(currentPerson.name.toString()),
                        subtitle: Text(currentPerson.email),
                      ),
                    ),
                  );
                },
              );
            }

Now I feel that rest of the part will be very easy for you to understand.
But then also, leme give you a rough idea about what it is? and how it is working?

This part of our code is saying that,

if the snapshot has data and we haven't encountered any error, then return a listView.Builder.

ListView have an argument itemcount. It stores the information, how many lists are supposed to be created.
Therefore we passed snapshot.data!.length.

What's that exclamation mark doing?

It is just doing a null check. If it is null or not.

One can specify question mark ? too, but then you need to specify, what your program is supposed to do while having the value as null.

I don't wanna do it right now. It's your homework. try it, It's awesome and good practice.

Now I feel the rest of the code is self-explanatory, as we have discussed all the definitions above.

But I think you may have noticed that I have used SystemNavigator.pop(); inside snapshot.haserror case.
What is SystemNavigator.pop()?

Well, it is equivalent, You tapping the back button.

I think we are clear. If you have any queries or suggestions, then please don't hesitate to contact me through telegram or drop a comment below :)

I'll be happy to hear from you.

Thank you,
Stay home and keep learning
Cya :)

I'm Gulshan Yadav (Which you know already). I want to walk you through my experience of my interview as a Flutter Intern in a Dubai Based Firm.

Hey but wait from where I got to know about this firm?

One of my friends from Flutter Mumbai shared that this company is looking for a Flutter intern, and they are ready to pay 30k INR to 80k INR depending on one's skills.

I was very nervous about that, should I apply for this internship role or not. Basically, I was not confident enough in my existing skill sets.

I raised this doubt that I don't have that kind of skill set may be, and my design skills were not that great, Then one of the members from Flutter Mumbai asked me to believe in myself and go apply for that internship.

Here's what exactly he said to me,

There's no loss in applying for an internship even if you have not got selected as an intern.
If you don't even apply for an Internship you won't be able to figure, How much you are capable of?

Basically he was asking to go check your Aukat(ability).
So this is where he motivated me to go start applying for internships.

Guess What?

This note from him actually made me to start applying for internships.

Firstly I applied for that lucrative looking internship, whose starting compensation starts from 30k INR.

They had a Google Form in which they asked some of the interesting questions, which were laborious for me to answer.

But I did answer those.
Here are the questions and answers I gave,

Please list or describe any achievements and prizes?

To keep track of my investments, I wanted a wallet application so that I wouldn't have to log into those official applications, again and again, to see how my investments are doing. Therefore I built an application for myself, which doesn't have any good looks. But it was my first application so I consider it a success because I learned a lot during the process.

If you have ever started a business, led an organization, or dedicated yourself to a major project, please describe the organization or project you started, your reason for starting it, and your role?

I started Buffer Overflow as a hobby project and spent some time learning and Building it. I wanted to learn the end-to-end process of development and maintenance and also learned about System Design.

Tell us about a risk youʼve taken or a challenge you've faced. Tell us whether you failed or succeeded, how you behaved, and how you think this reflects your character.

I began investing early and learned how to invest in cryptocurrencies and other technological fields. Even though I made a few poor choices, I ultimately gained valuable knowledge, which I consider more valuable than the returns I expected from my investments.

Since I haven't blown up all of my money on cryptocurrencies, this shows I know how to take calculated risks.

What do you want to accomplish in the next 10 years?

I want to become financially free, where I don't have to work for money. But rather money will work for me. And for achieving that goal, I am willing to give what it takes. I am learning every day, no matter how small that learning is, but I want that compounding effect in my life.

Tell us one thing about the world that you strongly believe is true, but that most people think is not true. If this belief shapes the way you live, tell us how.

I have a theory related to the ongoing Sars-Cov-2 virus. I recently came across some research about Permafrost Viruses. Permafrost stands for the soil that is bound by ice or the deep layers of Arctic soil. Research has shown some viable viruses in the permafrost in the Arctic region. Therefore, since we have no idea what the concrete source of COVID-19 is. Nonetheless, arctic cases have not been reported. It's just an assumption of mine when I came across this research. I'm not backing or citing any nation. But Since Everyone will disagree, I wanted to share my theory.

What questions do you spend the most time thinking about?

What will help me grow in my career? What is my passion?

Tell us why should we hire you? In 6 words

I'm an Ambitious Flutter Developer.

So there were my answers to the questions asked in the Google Form.
Then After this, I applied to many Institutions, through LinkedIn as a Flutter Intern. But I was selected in none.

It was a Stressful experience, so I later reached out to the person who motivated me to start applying for internships. He simply said, Don't think much, maybe they got the maximum number of interns or you don't have the right skills, So keep polishing your skills and be patient with the results.

So I kept working and learning.
And later on, I got a message from the CEO of the Dubai-based company firm I applied for.

The moment he reached out to me and asked about my experience and my skills.
I was cheerful and happy to share my experience and skills with him. He asked me to choose between an interview test or showcasing a working application of mine.

So I opted for showcasing my application.

He asked me to wait until he asks his developer to check if I'm eligible for being a Flutter Intern in his company or not.

4Hrs passed, There was no response from his side. All those happiness has been over. And I was downhearted, Thinking that Maybe I'm not good enough to be an intern.

But at Next day, I got a response from his side asking,

What compensation would you expect for an internship?

how many hours per day would you be available?

How many days a week can you work?

Thanks!

I responded that I would like to work for 5 Hrs per day and 5 days a week.

Then he asked me how much compensation I anticipate?

As the internship compensation starts from 30K - 80K INR as stated in the ads, I replied that I would expect around 30K INR.

He said Thanks! and left the conversation.

But later, when I opened YT for checking that what should be my answer to that question?

After watching this video, I was like, What the f*ck I did.

The person in the video says that this question is asked to generally eliminate you.

One should never say exact numbers in an interview question asking for expected salary or compensation.

I was anxious, If I will be eliminated.

After 2 Days, The CEO of that firm said,

The design of the login screen is not good enough.

We would like to check the design of the core part of your application, 
So can you bypass the login screen for now?

I generously said yes And bypassed the login screen and asked him to check the design.

God knows If he even gave me a moment to check the design or maybe he asked me this question to state that I have been eliminated.

Because if he really had any software DEV with him, he would have easily bypassed the login screen by simply doing some changes in the code to check how my design looks from the inside.

1 week passed with no response from his side and with a ton of emails, stating that sorry you have been rejected from this and this company. Keep working hard Bla Bla Bla...

I didn't have any guilt or sadness due to those emails stating that I'm not good enough, Because I already know that I'm not good enough.

The only thing which aching me was the indirect rejection.

After this happening or rejection, I learned and experienced something new.

I felt how terrible it feels falling from the fake highs.

I'm speaking about all those praising and lies. Oh my gosh, The design is very good, You are talented, You are this and this...

I came to know, that If you feel that your design is not good enough, Then yes It is not Good Enough.
It needs more work to stand out.

From this, I learned, That Never ever trust your Friends and Family regarding how your design looks like. Because they don't have any idea about the design right?

And They also don't want to hurt you stating that you are not good enough.

So How can we find if our design needs some work? I mean, we are not god right, to know if this is the greatest design ever made or not.

I joined some courses to learn how to design better.

I got to know about one really good question to ask friends and family members to get their valuable correct response, not the fake one.

It is,

Please let me know if you have any idea about the design of this application?

Let say you are the designer of this application, 
what would you do to make it better?

And That's how one can easily find out if the design is good enough or not with some valuable suggestions.

To those of you who want to know what How my application looks like, which I shared with that CEO,

After bypassing authentication.

I know it's too basic and It doesn't look great. And Probably showcasing this design for 30K INR doesn't make sense.

So I'm working now on my designs and learning daily.

Here's what I'm working on right now,

What are those?
These are the portfolio ideas, and I'm still figuring them out. How to make them better or How to design better.
I even learned how to create logos, how to use Inkscape and other software.
And I'm looking forward to learning more so that I can be a better designer and no one will hesitate in paying 30K or more money for my work.

Thanks for reading :)
Be optimistic and keep learning.

Here we will be using random person api for getting the JSON string.
How's it looks like?

Have a look,

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  }
]

First of all, it seems a bit complex right?
But it's not.

Let's say my flutter application need the username and email of the person, that's very easy right?
We can use our manual JSON serialization to get the username and email of the person.
But what if we need the address of the person?
We can also use our manual JSON serialization to get the address of the person.
But it will make our code messy and we don't want that.

Here comes the power of JSON Generated-Serialization in flutter to the rescue.

Please refer to my previous article. This article is in continuation with that article.

Let's Do it.

Step 1:

Add Dependencies in pubsec.yaml file

Add JSON_annotation: ^4.1.0 as dependencies.

Step 2:

Add build_runner: ^2.0.6 under dev dependencies.

Add JSON_serializable: ^5.0.0 under dependencies.

build_runner: ^2.0.6
JSON_serializable: ^5.0.0

Here's how my dependencies and dev dependencies look like,

Step 3:

Create a folder named model inside the lib folder.
It's not necessary but it's good to keep things organized.

Step 4:

Create a file named person_model.dart inside the model folder.
Here we will be using the JSON_serializable package to convert the JSON string into a Person object.

import the JSON_serializable package.

import 'package:JSON_annotation/JSON_annotation.dart';

Create a part of our file.

part 'your_filename.g.dart';

This allows the User class to access private members in the generated file. The value for this is *.g.dart, where the star denotes the source file name.

Step 5:

Now add the following code.

@JsonSerializable()

Hey but what is this?

Basicaly, this annotation tells the Dart compiler to generate a class that can be serialized to JSON.

Step 6:

Create a class named PersonModel.
or what ever you want.
It's not necessary but it's good to keep things organized according to the JSON string.

Now let's look back to our JSON string.

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  }
]

Let's first decide what kind of information we need from the JSON string.

For this example, we need the name, username, email, and address.

Looking at the JSON string, we can see that the address is a JSON object.
Hey but what is a json object?

A json object is a json array with a single element.
for example:

[
  {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  }
]

This is a JSON array with a single element.
And what is a JSON array?

A JSON array is a JSON object with an array as its value.

I think we are clear now.

If not then don't worry, you will get it soon, when you do the code.

Step 7:

We can declare the name, username, and email as strings since they do not contain any nested JSON objects.

here's how our code looks like,

import 'package:json_annotation/json_annotation.dart';

part 'person_model.g.dart';

@JsonSerializable()
class PersonModel {
  String name;
  String username;
  String email;
}

But what about the address?
It's a JSON object with nested JSON objects. Declare a new class named AddressModel. This class will be used to store the address.

Create a new file named address_model.dart, inside our model folder.

And perform the same steps as we did for PersonModel.

here's how our code looks like in the address_model.dart file,

import 'package:json_annotation/json_annotation.dart';

part 'address_model.g.dart';

@JsonSerializable()
class AddressModel {
  String street;
  String suite;
  String city;
  String zipcode;
  // GeoModel geo; // Your homework :)

}

We are not done yet btw.

Both of our programs are incorrect.
Why?

because we haven't initialized our constructors.

How do we initialize our constructors? Or how do we even define a constructor?

But first of all, what is a constructor?

A constructor is a function that is called when an object is created.

You may refer to my previous article #Flutter: A short intro to OOP for more details.

Let's create a constructor for our PersonModel class first.

Add this code inside the PersonModel class,

PersonModel(this.name, this.username, this.email);

And do the same for the AddressModel class.

Add this code inside the AddressModel class,

AddressModel(this.street, this.suite, this.city, this.zipcode);

Hey Gulshan, what is this this.?

It's a reference to the current object.

It is used to access the properties of the current object. i.e. this.name is equivalent to name. I think now it's clear.

Let's Jump back into our person_model.dart file.

Declare a new variable named address of type AddressModel. And do the changes in our constructor accordingly.

Our PersonModel would now look like this,

class PersonModel {
  String name;
  String username;
  String email;
  AddressModel address;
  PersonModel(this.name, this.username, this.email, this.address);
}

Add the following code inside our PersonModel class,

factory PersonModel.fromJson(Map<String, dynamic> json) => _$PersonModelFromJson(json);

Map<String, dynamic> toJson() => _$PersonModelToJson(this);

And add the following code inside our AddressModel class,

@override
String toString() => '${street} ${suite} ${city} ${zipcode}';

factory PersonModel.fromJson(Map<String, dynamic> json) => _$AddressModelFromJson(json);

Map<String, dynamic> toJson() => _$AddressModelToJson(this);

What are those lines of code?

Let's break them down.
What is a factory?

A factory is a function that creates an object.

for now, this much info is enough. You may research more about factories on the web.

what is _$PersonModelFromJson?

It's a private function.
It's used to create an object from a json object.

Why am I seeing an error?

It's because the files are not generated yet.

And at the end that overrides part inside our AddressModel class, is used to just return the string representation of the objects. In our case, street, suite, city, zipcode.

Here's how our code looks like,

person_model.dart

import 'package:json_annotation/json_annotation.dart';
import 'package:your_appname/model/address_model.dart';

part 'person_model.g.dart';

@JsonSerializable()
class PersonModel {
  String name;
  String username;
  String email;
  AddressModel address;
  PersonModel(this.name, this.username, this.email, this.address);

  factory PersonModel.fromJson(Map<String, dynamic> json) => _$PersonModelFromJson(json);
  Map<String, dynamic> toJson() => _$PersonModelToJson(this);

}

address_model.dart

import 'package:json_annotation/json_annotation.dart';

part 'address_model.g.dart';

@JsonSerializable()
class AddressModel {
  String street;
  String suite;
  String city;
  String zipcode;
  // GeoModel geo; // Your homework :)

  AddressModel(this.street, this.suite, this.city, this.zipcode);
  @override
  String toString() => '${street} ${suite} ${city} ${zipcode}';


  factory AddressModel.fromJson(Map<String, dynamic> json) => _$AddressModelFromJson(json);
  Map<String, dynamic> toJson() => _$AddressModelToJson(this);
}

Let's now generate the files.

Open the terminal and type,

flutter pub run build_runner build

And wait for the files to be generated.

Here, you can look that the files are generated and all our errors are gone.

Ahh, if you are thinking that why my files appear red?
It's git stuff. It just means that the files are not committed yet.
And the grey files are ignored files.

let's have a look inside our generated files.
Hey look,

That's what we wrote in our manual Serialization code.

The only thing we are left with is to use this parsed data in our application.

That can be achieved using FutureBuilder. Currently, this article became a little bit more complicated, I feel.

So I will be posting about FutureBuilder in a future article.

If you are frustrated about how these classes are getting the JSON string, then please refer to my previous article on manual Serialization.

Until then you can refer to Flutter docs for more details.
Or you can also wait for me to write a blog post about this.

Maybe when you are done with this article, I already posted an article about the FutureBuilder.

So have a look at my site.

Thanks for reading.
Happy Coding :)

When developing network-connected apps, it is most likely that it will need to use some good old JSON at some point. It is hard to imagine a mobile app that doesn't need to communicate with a web server or store structured data.

The guide looks at how to use JSON with Flutter. It explains how to select the right JSON solution for each scenario and why.

If you are here, for learning how to do JSON Serialization in Flutter, you are at the right place. I will be walking you through all the concepts related to JSON.

Excited to learn??

Let's Get started...

We can perform JSON serialization manually or Automated Serialization using Code Generation in Flutter.

Hey but, what is JSON??

If you are a beginner, you will be wondering what the heck is JSON first of all?

JSON stands for JavaScript Object Notation. This doesn't mean you have to learn JavaScript or something, JSON is just a text-based format for representing data. It is fully independent of JavaScript.

You may ask if it is used for representing data then, Why is JavaScript in the Full-form?

Because it is using JavaScript object Syntax.

JSON is used for transmitting data in web applications.

For Example, You want some data from the server or you want to send some data on the server, here Json comes into play to help us.

You may ask, how does JSON look like?

{
    "College_Name": "No Name",
    "place": "SomeWhere on planet Earth",
    "formed": 2052,
    "active" : true,
    "students":[
        {
            "name": "name": {
              "title": "Mr",
              "first": "Gulshan",
              "last": "Yadav"
                },
            "roll_no": 32,
            "species" : "human"
        },
        {
            "name": {
              "title": "Mr",
              "first": "Rahul",
              "last": "Yadav"
            },
            "roll_no": 69,
            "species": "Martian"
        }
    ]
}

Now let's see how to manually parse this JSON string. Let's say we have a program which shows the information about the students. For starters, it shows some information about the college or school.
So my first step will be loading this JSON output from the source.
This could be anything, you can source your JSON file from the assets in the code or you may use any external API for that.

In this article, we will be learning how to do network calls to get the JSON data and how to parse it properly.

Step 1:

import ‘dart:convert’;

We need dart:convert so that we can use the JsonDecode function which will help us to map all our JSON into a variable.

Step 2:

Now create a variable of type const to store the address from where our program will fetch the JSON string.

const  myJsonSourceUrl = “https://mysourceofJson.com”; 
// Don’t use it, I wrote it for explaining to you.

Step 3: Create a class of any name of your choice.

For Example:

class NetworkService{

}

Step 4: Declare a async function of type Future of any Name of your choice.

class NetworkService{
Future fetchMyApi() async {
    http.Response response = await http.get(Uri.parse(myJsonSourceUrl));
       }
}

You may get an error message in your debug console, saying "hey man, idk what is this HTTP. Rectify the mistake."

So to fix it,

head over to your pubsec.yaml file and add http: ^0.13.3 under the dependencies section.

And then run flutter pub get in your terminal.
But wait this will not fix your error.

import http inside your program like this,

import 'package:http/http.dart' as http;

now you may see that your error got fixed.

Kudos!

If still your error not got fixed then re-run the command flutter pub get in your terminal and also check the pubsec.lock file to check if your dependencies or loaded or not.

My pubsec.lock file,

If still, you are facing any issue, then head over to our Telegram channel and throw some questions, I'll be happy to help you.

Hey but what does that Future data type used for, and what it is?

It is an object that represents delayed computation.

A Future is used to represent a potential value or error, that will be available at some time in the future.

There's more but, right now this much information is enough to get our job done :)

What are those await and async?

"Async Simply means occurring at the same time. And Await means to wait. i.e. to wait for a certain operation to over."

Here our program is fetching the JSON string from the source, And then storing it inside a variable of type http.Response.

Step 5: Check if the response is successful or not?

How do we do that?

It's simple but first of all, we need to know what is a successful response?
A successful response is a response with a status code of 200.
And a failed response is a response with a status code of anything other than 200.

So now we have to just check if the status code is 200 or not.
we can use our simple if-else loop or try-catch method.
For the sake of simplicity, we will be sticking with the if-else loop.

But how to check the status code?

Since we declared our variable of type http.Response, we can access the status code by using response.statusCode.

here's how our if-else loop will look like,

 if (response.statusCode == 200) {
      Map CollegeData = jsonDecode(response.body);
      // debugPrint(CollegeData.toString());
      List<dynamic> College = CollegeData["students"];
      return College.map((json) => students.fromJson(json)).toList();
    } else {
      throw Exception("Something gone wrong, ${response.statusCode}");
    }

Let's break it down,

As we know the first line of our code checks if the status code is 200 or not. if it is 200 then it will execute the next line of code.

i.e. Map myData = jsonDecode(response.body);

This maps the json string into a variable of type Map.

What is a Map?

A Map is a collection of key-value pairs.

It is similar to a dictionary in python.
It is also similar to a hashmap in java.
It is also similar to a hashtable in c++.

Now we have to access the values of the Map. And we can do that by using the [] operator.

Here we are storing the value of the students key into a variable of type List<dynamic>.
Then we are mapping the values of the List<dynamic> into a List<Student>.

student_network_service.dart

import 'dart:convert';

import 'package:http/http.dart' as http;
import 'package:network_request/model/student.dart';

const String randomPersonURL = "https://linktoapi.com"; // Just an example.

class StudentNetworkService {
  Future<List<Students>> fetchStudents(int amount) async {
    http.Response response = await http.get("$randomPersonURL?results=$amount");

    if (response.statusCode == 200) {
      Map peopleData = jsonDecode(response.body);
      List<dynamic> peoples = peopleData["results"];
      return peoples.map((json) => Students.fromJson(json)).toList();
    } else {
      throw Exception("Something gone wrong, ${response.statusCode}");
    }
  }
}

But wait where's the code for the Student class?
At this point, you might have a clear understanding of how manual JSON parsing works.

If not then, hang on. I will be explaining it in detail.
Step 6:
Now we have to create a class of type Student. But where?
Create a folder named model and put it inside the lib folder.

Create a file inside the model folder and name it as student.dart.

Note: Use lower came case for naming the file. To avoid any errors.
Also, don't use any special characters in the file name.

Create a class named student. (As we have used student in our above code, we will use it here too.)
What we want our code to do is to parse the JSON string, to get the student's information to show up in a list on the homepage.

So our code will look like this,

model/student.dart

class Students {
  String name;
  String rollNo;
  String species;

  Students({this.name, this.rollNo, this.species});

  Students.fromJson(Map<String, dynamic> json)
      : name =
            "${json["name"]["title"]} ${json["name"]["first"]} ${json["name"]["last"]}",
        rollNo = json["roll_no"],
        species = json["species"];
}

Have a look at the code.

First of all, we are creating a constructor.
Then we are creating a method named fromJson.
And inside the method, we are parsing the JSON string and storing the values in the variables.

So that's it, we performed the manual JSON parsing.

Here's how we will use this class in our code,

homepage.dart

import 'package:flutter/material.dart';
import 'package:network_request/model/student.dart';
import 'package:network_request/services/student_network_service.dart';

class HomeScreen extends StatelessWidget {
  final StudentNetworkService studentService = StudentNetworkService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: SafeArea(
          child: FutureBuilder(
            future: studentService.fetchStudents(100),
            // 100 is the number of students to fetch, But you can change the fetchStudents function to 
            // use the json file in your assets too.
            builder:
                (BuildContext context, AsyncSnapshot<List<Students>> snapshot) {
              if (snapshot.hasData) {
                return Row(
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        child: Card(
                          color: Colors.black.withOpacity(0.5),
                          child: ListView.builder(
                              itemCount: snapshot.data.length,
                              itemBuilder: (BuildContext context, int index) {
                                var currentStudent = snapshot.data[index];

                                return ListTile(
                                  title: Text(currentStudent.name),
                                  leading: CircleAvatar(
                                      // Left for you to do experiments.

                                      // backgroundImage:
                                      //     NetworkImage(currentStudent.),
                                      ),
                                  subtitle:
                                      Text("Roll no: ${currentStudent.rollNo}"),
                                );
                              }),
                        ),
                      ),
                    ),
                  ],
                );
              }

              if (snapshot.hasError) {
                return Center(
                    child: Icon(
                  Icons.error,
                  color: Colors.red,
                  size: 82.0,
                ));
              }

              return Center(
                  child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  CircularProgressIndicator(),
                  SizedBox(
                    height: 20.0,
                  ),
                  Text("Loading at the moment, please hold on")
                ],
              ));
            },
          ),
        ),
      ),
    );
  }
}

Now let's see how we can do that using the json_serializable package to implement the same but by a single line of code. Not a single line of code, but lesser than usual.

Our whole tedious task will be handled by the flutter engine.

Check this post.

Today we learned how to parse the JSON string and store the values in the variables in flutter.
Our next post will guide you on how to generate the dart code so that it can be used to parse the JSON string with a working example.

Reducing the possible errors and bugs.

Until then, Happy Coding :)

How you define your use case?

What do you want your computer to do?

What are the things which are very important to you, and are they supported on Linux too?

---

Suppose you are a software developer and you want to utilize the full power of your computer. Then Linux is for you!

Here's the thing, if you're a Microsoft developer you'll need a Windows system to do your job.

My aim for this article is to help a freshman to differentiate between Linux-based and Windows-based operating systems.

Do you like playing games?

If yes, and you are willing to pay for a steam subscription. Then yeah. You can play games on Linux-based OS. But if you are a person who likes to pirate games, then I'm sorry.

Do you like using Adobe apps?

There's a sad thing to know, that Adobe Apps doesn't have any support for Linux-based OS. It is only supported for Windows and Mac users.

But surely you can use the alternative application which is available.

Check this article to know more.

Now let's check how Linux-based OS can help you?

High security

You can substantially reduce the risk of viruses and malware by installing and using Linux on your computer. The security aspect was considered when Linux was developed, making it less susceptible to viruses than Windows.

In most cases, users do not log in as the root (equivalent to the administrator user in Windows). As a result, programs cannot modify system settings and configuration unless the user is logged in as the root. Since the downloaded file/malware will have limited privileges.

To further secure their systems, Linux users can install ClamAV antivirus software.

Open Source

Because Linux is part of the FOSS (Free and Open Source Software) category, it has its source code available to download.

Due to this, developers have access to the source code and can modify it like any other program, which is Difficult with proprietary software.

Customisation

With the large variety of wallpapers, icons, and panels to choose from, users can personalize the system to their liking. GNOME, KDE, etc just to name a few, can be selected as a desktop environment.

Many of the most popular web browsers can be run on Linux. The Linux philosophy encourages users to use a large number of small programs, each of which performs a particular task very well. These small programs can be combined to create puissant programs.

System administrators can automate routine maintenance and various other tasks using the Linux OS' robust command-line interface and shell scripts.

So, if you're contemplating a career in system administration, Linux is a adequate platform to start.

Support

Through various forums, the Linux community provides support for the operating system. Any questions posed in the forums will usually be answered quickly, as many enthusiastic volunteers are operating on the problem.

Additionally, businesses can choose paid support options for their critical applications and services, with companies like Red Hat and Novell offering 24*7 support.

In sum, If you haven't tried Linux yet, give it a shot. You can dual-boot Windows and Linux simultaneously if you wish.
There are many reasons to use a Linux-based OS, and I have just mentioned a few. You can do some research on the web to find plethora of reasons to use Linux, but I feel these are the key points that made me use it as my main OS.

I'm Gulshan Yadav,
In addition to being a student, I am a Technical Writer and also a designer
If you like my blogs and articles, and you want to suggest something.
Don't be shy to comment in the comment box below or Join our telegram group.

I thank you for reading so far, and I wish you a wonderful day :)

Our today's topic to learn is about,

• Stateful Widget

• Animated Container

• Future Delay

Hey, don't you think that these are some boring topics.
These are very much interesting topics to learn.

So What are we waiting for?

Let's Get Started.

So,

What is a Stateful Widget?

A widget that has a mutable state.

Hey, but What is State?

The state is information that one can read synchronously when the widget is built and might change during the lifetime of the widget.

Didn't Understand?

Will help you.
Think about our previous post where we built a login page for our users.
What if we can write Welcome and Username both after the user provides his username?

Cool naa?

But this thing cannot be handled using the stateless widget.

So now we have to use the Stateful Widget for performing this task.

Ready?
Jump in your code editors and let's change that Stateless Widget into the Stateful Widget.

But wait, How are we going to do that?
Click on the name of our stateless class, you will see a bulb icon, click on it!

We will be talking about Mixin in our later articles.
So, now you created the Stateful widget.

Now create a variable of your choice inside here,


Oops, I haven't taught you what are variables

In simple words variable is a place where a value is stored.
For example, My name is Gulshan and I am a Developer. So here Gulshan is a variable and Developer is the value.

There are various types in a variable like I am male. And likewise, there are specific types of variables that will store numbers, characters, and so on.

Like int for storing integer values, char for storing characters, and string for storing strings.
In dart you can simply use var as a type and dart will automatically select the type for your declared variable according to the given value.

Getting back to our point, our variable name will store the username of the user.

Now add $name inside the text widget. Like this,

Text(
                    "Welcome $name",
                    style: TextStyle(
                      fontSize: 21.0,
                      fontWeight: FontWeight.bold,
                    ),
                  )

What it does is, It will check the variable for writing the value inside our text widget.
Hey, but we are not done yet.

We need to modify our text form field Widget for storing the given value into our variable.

Here's how you can do this,

TextFormField(
                          onChanged: (value) {
                            name = value;
                          },
                          decoration: InputDecoration(
                            labelText: "Username or Email",
                            hintText: "you@yourmail.com",
                          ),
                        )

We discussed decoration in our previous article, but there's a change. I used the onChanged argument.

What does it do?

It will perform certain tasks when the input inside our Field is changed.

Here it is assigning the value to our variable name. That is the username.

Now you may try clicking the F5 button or try running flutter run in your terminal to show the changes, or you may use the hot reload feature of flutter if you are running your flutter application while following this post.

But you may notice, it's not working.
But it is working. The problem is, that it is not rebuilding the application or our page while we are making some changes.

So, how to tell our application to rebuild the specific page while making some changes?

It's easy.

We will use setState to inform the framework that the user made some changes.

Its usage,

You may notice, that I wrapped the assigning task with our setState function.

Now do a hot reload or restart your flutter application and try doing some changes in the username field.
walla!
You successfully learned about the Stateful widget and Setstate usage.

Now let's learn about Containers in flutter

Enough talk, let's build our own button.
Here's my code, please check the comments I added for better understanding,

Container(
    width: 150,
    height: 50,
    alignment: Alignment.center, // for alligning the child in centre.
    child: Text(
      "Login",
      style: TextStyle(
        color: Colors.white, //color of text, since it is black by default. Which looks ugly to me
        fontSize: 18, // You may experiment with numbers :)
        fontWeight: FontWeight.bold, // So that our login button looks a bit subtle.
      ),
    ),
    decoration: // design time. 
    BoxDecoration(
      color: Colors.purple, // so that it will match with the default color of our application.
      borderRadius: BorderRadius.circular(10), // As the sharp edges of our button is looking a bit ugly.

    ),
  )

But there's a problem, Our button can't perform the click operation.

How to fix this issue?

Both are best for their specific usage, but for now, we will be using InkWell since It can provide us a plethora of options to customize our button.

So here we go,

InkWell(
    child: Container(
      width: 150,
      height: 50,
      alignment: Alignment.center, 
      child: Text(
        "Login",
        style: TextStyle(
          color: Colors
              .white, 
          fontSize: 18,
          fontWeight:
              FontWeight.bold,
        ),
      ),
      decoration: 
          BoxDecoration(
        color: Colors
            .purple,
        borderRadius: BorderRadius.circular(
            10), 
      ),
    ),
    onTap: () {
      Navigator.push( // routing our page to homepage
        context,
        MaterialPageRoute(
          builder: (context) => MyHomePage(title: "Gulshan Yadav"),
        ),
      );
    },
  )

Here's how it's going to look like,

Yaa, I know there's not so much of a difference we created.
But at least you learned how to use a container to build your own button or whatever you want.

Let's dig deeper,

What is Animated Container? According to documentation, I read.

The AnimatedContainer is a widget that will automatically animate between the old and new values of properties when they change using the provided curve and duration.

I know you are having a hard time understanding this definition.
Even I had one.

What this definition say is, It is a container that can animate from old value of properties to New values of properties.

You can think of, like when you click our login button, the size of the button can be changed between some specific time duration. Or whatever you can imagine that you want to animate.

Let's begin,

Create a variable named changedButton with the value false. It is a boolean variable.

A variable with the type bool means, it will only deal with true and false or 1 or 0's.

And let's use that variable in our code,

Now look at my code and do check the comments for better understanding,

InkWell(
                  child: AnimatedContainer(
                    duration: Duration(seconds: 1), // According to definition, duration is the 
                                      // important thing to consider while using Animatied container
                    width: changedButton ? 50 : 150, // If changedButton is true then change 
                                                              // the width to 50 else 150

                    height: changedButton ? 4 : 50, // Same as above
                    alignment: Alignment.center,
                    child: Text(
                      "Login",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    decoration: // design time.
                        BoxDecoration(
                      color: Colors.purple,
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                  onTap: () {
                    setState(() {
                      changedButton = true; // After tapping on our own button
                      // change the value to true and perform some operations.
                    });
                    // Removing this part for the sake of understanding, what's happening.
                    // Navigator.push(
                    //   // routing our page to homepage
                    //   context,
                    //   MaterialPageRoute(
                    //     builder: (context) =>
                    //         MyHomePage(title: "Gulshan Yadav"),
                    //   ),
                    // );
                  },
                  splashColor: Colors.purple[
                      100], // Long press the button to see the usage of splash color
                ),

What this code does is, after we tap on our login button it will change the value inside our variable to true. In our case changedButton.

But you may ask, why did I comment on our navigator part?

Because if there's a navigator part involved, the animation part is totally ignored our page is directly moved to our homepage or next page.

For attaining both animation and navigation through pages, we need something else.

Here comes the Future delay widget to help us.

here's how I used it,

onTap: () async {
                    setState(() {
                      changedButton = true; // After tapping on our own button
                      // change the value to true and perform some operations.
                    });
                    await Future.delayed(Duration(seconds: 1));
                    Navigator.push(
                      // routing our page to homepage
                      context,
                      MaterialPageRoute(
                        builder: (context) =>
                            MyHomePage(title: "Gulshan Yadav"),
                      ),
                    );
                  }

You may notice that I have used async and await keywords, what are those?

Async Simply means occurring at the same time.
And Await means to wait. i.e. to wait for a certain operation to over.

I want you to do some tweaks to the application so that it will help you in your learning.

Just play around and you will learn a lot.

In this article, we learned about the stateful widget, set-state usage, and its importance, Building our own button using a container, and also tried future delay for performing some small animations.

In the next article, we will be exploring more flutter widgets you are supposed to know.

until then, stay home stay safe.

Cya :)

But how this widget differs from others?

This widget is used when dealing with devices with smaller screens.

Or in the case when using a column or row as for displaying something which doesn't fit in the screen.

And when something which doesn't fit in the screen, flutter throws some error like,

Bottom Overflow

But we can fix this bottom Overflow issue by using the expanded widget.

So why should we use SingleChildScrollView?

Because when using the Expanded widget, it shrinks all the content or child to fit inside it.

But sometimes, due to this our design doesn't look that appealing for the user.

Though the Expanded widget is a Good widget. And it has some use cases, but it is not recommended to fix the overflow issue by using the expanded widget.

Now you may ask what's the Expanded widget?

It's a widget that expands a child of a Row, Column, or Flex so that the child fills the available space.

Easy?

Let's dive deeper.

Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., for a Row or for a Column).

If many children are expanded, the available space is divided among them according to the flex factor.

You may ask that how to use these two widgets?

• For SingleChildScrollView

  Wrap the whole widget with SingleChildScrollView.

For e.g.

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Material(
          color: Colors.white,
          child: SingleChildScrollView(
            child: Center(
              child: somethingInsideColumn(context),
                     //I declared a function, it's not something Special.
            ),
          ),
        ),
      ),
    );
  }
}

And One can also use the expanded widget in a similar way.

I hope you understood the usage of these two widgets in Flutter.

If you are facing some difficulties, or you want to give some suggestion, please head over to our telegram group.

So that's it for today.

Please wait for our next article.

Until then stay home, stay safe.

And be productive with your time.

Cya :)

I have a quote for you which says that,

There's no substitute for hard work.

Now let's get to today's topic, i.e. pages.

First of all, you may ask why I should even care, what pages are in Flutter?

My answer

You can think of that your app as actually a website and a website needs some pages to view the content on your site.

So this means pages are something important. So there's no problem in learning about pages in Flutter.

What are we going to learn in this article?

We will be learning about,

• Safe area and its importance.
• Adding an image in our application.
• Using Textformfield in our application and its importance.
• How to choose colors to use.
• How to navigate through different pages.

So now let's get started!

I will be considering the design of our application as shown in my previous article.

Get into the login.dart file and import the material.

here's how,

import 'package:flutter/material.dart';

Now type stless to click on the template recommended by your text editor or ide.

This will insert a stateless widget into your code.

Hey, but what is a stateless widget?

The widgets whose state can not be altered once they are built are called stateless widgets. These widgets are immutable once they are built i.e any amount of change in the variables, icons, buttons, or retrieving data can not change the state of the app.

In simple words, A stateless widget never changes. Icon, IconButton, and Text are examples of stateless widgets.

So, according to our design, there's an image or illustration at the upper part of our page/screen.

But how to add that image to our application?

Here come's our widget named image.asset which takes the address of the image in a directory as an argument.

Image.asset(
                  "assets/image2.png",
                  fit: BoxFit.cover,
                ),

You may ask a question, what is this BoxFit.cover means in our code?

what a cover constant does is, clips the picture if it is not fitting inside our box.

It is good to use when we don't want our image to be enlarged or scaled up for making that image fit inside that box.

Though you can try this by using the fill constant instead of cover.

There's another constant too, which is named contain, It is a kind of box which can be as large as it can.

You may ask me, where I should place my image?

And how am I going to tell the Flutter, that here's my image I am going to use?

Create a folder named assets inside the root folder of our project and create one more folder named images inside the assets folder.

And here our images will be stored.

Here's how our file structure will look like,

But wait, we are not done yet. We have to tell Flutter that here's my image will be getting stored.

Now open the pubspec.yaml file and paste this piece of code.

  assets:
    - assets/images/

Please refer to the comments too, If you are facing some issue or don't be shy about texting me.

What this line of code saying is,

hey Flutter, remember that my assets will be stored in this folder!

But you may also ask what is an asset in the first place.

I did a google search for you.

Thing that is useful to somebody/something is known as an asset.

Let's check how to use the text form field?

A FormField that contains a TextField.

This is a convenience widget that wraps a TextField widget in a FormField.

The Form simply makes it easier to save, reset, or validate multiple fields at once.

Here's how it is used

TextFormField(
                        controller: someTextEditController,
                        decoration: InputDecoration(
                          labelText: "Username or Email",
                          hintText: "you@yourmail.com",
                        ),
                      ),

Hey, but what is that Text Edit Controller?

It is a controller for an editable text field. Something which can be modified from the user's side. This can be used to store the email address or password of the user or anything else.

but you may also ask what are those label text and hint text doing inside decoration?

I cannot explain this question, but this picture can surely help you understand what it is.

Now we are done with the text form field and image, the next thing we need is a login button in our application.

We have some options to choose from like the Text button, Elevated button, etc.

For now, we will be using the ElevatedButton.

You may also ask how these buttons differ from one another?

I want you to see the image given below, which will give you some idea about how they look.

And please note that every button has the same or similar functionality, it's just a matter of how they look. Though there are some differences, which you will come to know in our later articles.

Here's how to use an elevated button as our widget,

ElevatedButton(
    onPressed: () {

           Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => MyHomePage(title: "Gulshan Yadav"),
              ),
            );

    },

    child: Text(
      "$task",
      style: TextStyle(fontWeight: FontWeight.bold),
    ),
  )

You may ask us what is that Navigator.push it seems a bit overwhelming naa?

It's just saying to our app that you route me to the Homepage if I click that login button!

And that's it.

So after all these concepts, leme share the actual code for the login page with you.

import 'package:firstapp/pages/homepage.dart';
import 'package:flutter/material.dart';
import 'dart:async';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Material(
          color: Colors.white,
          child: Center(
            child: Column(
              children: [
                Image.asset(
                  "assets/images/image2.png",
                  fit: BoxFit.cover,
                ),
                Text(
                  "Welcome",
                  style: TextStyle(
                    fontSize: 21.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 30,
                    vertical: 30,
                  ),
                  child: Column(
                    children: [
                      TextFormField(
                        decoration: InputDecoration(
                          labelText: "Username or Email",
                          hintText: "you@yourmail.com",
                        ),
                      ),
                      TextFormField(

                        decoration: InputDecoration(
                          labelText: "Password",
                          hintText: "My strong Password",
                        ),
                        obscureText: true,
                      )
                    ],
                  ),
                ),
                _textbutton(context, islongpress: true)
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Widget _textbutton(BuildContext context) {
  return ElevatedButton(
    onPressed: () {
          Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => MyHomePage(title: "Gulshan Yadav"),
              ),
            );
    },

    child: Text(
      "$task",
      style: TextStyle(fontWeight: FontWeight.bold),
    ),
  );
}

Ohh, I got that illustration from a site named undraw.

As you can see inside our code, there's something named safe area, what's that?

It's a widget that inserts its child with enough padding to avoid intrusions by the operating system.

For example, this will indent the child by enough to avoid the status bar at the top of the screen.

It will also indent the child by the amount necessary to avoid The Notch on the screen, or other similar creative physical features of the display.

I want you to read this page to know how to choose the shade of color for your application to look materialistic.

It will help you in choosing the right color for your design.

We're done, hope you liked this article. If you have any doubt, please don't be shy to ask in our Telegram group.

Stay home, stay safe.

Cya :)

Open your Code-editors or open Dartpad

Let's go!

So first of all what is widgets ??

an application, or a component of an interface, that enables us to perform some function, right?

But what are widgets doing inside Flutter?

One of the main things that you quickly realize, while using Flutter is that nearly everything is a widget.

That also means there's so much built all ready to use in Flutter, you don't need to build some function from scratch.

Though for building your application, you have to start from scratch.

Let's begin with some of the basic things you should know before starting coding in Flutter.

Some Important classes.

Scaffold:

The Scaffold is a widget in Flutter used to implements the basic material design visual layout structure.

This widget can occupy the whole device screen.

we can say that it is mainly responsible for creating a base to the app screen on which the child widgets hold on and render on the screen.

It provides many widgets or APIs for showing Drawer, SnackBar, BottomNavigationBar, AppBar, FloatingActionButton, and many more.

The Scaffold class is a shortcut to set up the look and design of our app that allows us not to build the individual visual elements manually.

It saves our time to write more code for the look and feel of the app.

The following are the constructor and properties of the Scaffold widget class.

const Scaffold({  
    Key? key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.drawer,
    this.onDrawerChanged,
    this.endDrawer,
    this.onEndDrawerChanged,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomInset,
    this.primary = true,
    this.drawerDragStartBehavior = DragStartBehavior.start,
    this.extendBody = false,
    this.extendBodyBehindAppBar = false,
    this.drawerScrimColor,
    this.drawerEdgeDragWidth,
    this.drawerEnableOpenDragGesture = true,
    this.endDrawerEnableOpenDragGesture = true,
    this.restorationId,
})

Cool huh?

I know it seems overwhelming XD

No worries, we will be dealing with most of them in our future articles.

Be relaxed, let's check them one by one.

appBar

First of all what is appBar ??

Got it?

Let's code our AppBar.

appBar: AppBar(
        title: Text("My First App),
         )

Yaa, that's it!

By the way, this should be written inside the brackets of the scaffold.

Please refer to the last part of this article. About the placement of your code.

Body

As the name suggests, it's the actual body of your application, where most of our meaningful code is going to be written.

body: Center(
          child: MyWidget(),
                      )

MyWidget:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Buffer Overflow', style: Theme.of(context).textTheme.headline4);
  }
}

Ahh, I won't bore you. Let's code something!

So What are we going to code?

Before coding let's first determine what our app is going to do?

Umm, let's code a useless app. It will help you understand how things work and how you can easily build your application.

My next question is how our app will look like?

I prefer using Figma, you may use Adobe XD.

It's your choice :)

My design:

I know it's not that good-looking, but let's just code this design into an Application.

So what we are going to learn after building this page?

Theming

What is a primary swatch

How to route our pages?

So, As we can see it's an Application that has a login page.

First Step:

Follow the steps listed in this article, which will build a basic application base.

Change the directory and get into the lib folder and open main.dart file.

Let's just remove all the comments written.

Remove this part too

int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

This too

floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),

And finally, remove this too.

 Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),

Here's how my main.dart looks

import 'package:firstapp/pages/login_Page.dart';
import 'package:flutter/material.dart';
import 'pages/homepage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepOrange,
        brightness: Brightness.dark,
      ),
      // darkTheme: ThemeData(brightness: Brightness.dark),
      // home: MyHomePage(title: 'Flutter Demo Home Page'),
      routes: {
        "/": (context) => MyHomePage(title: "Gulshan"),
        "/loginPage": (context) => LoginPage(),
      },
    );
  }
}

By seeing the above code, we can see that the widget is returning a Material app.

Please if you are not getting some of the things, please refer to my previous articles on Flutter.

It will surely give you an idea of some of the important concepts used in programming.

Coming back to the Material app, we can see that it has some Title and some theme, which takes Theme data as its input.

You can think of this as, char name

This variable name can only take character as an input, and one can't assign any number to it.

Though it is possible to assign a number to a variable of type char you have to first convert that number into a type string.

Didn't Understand?

No Worries.

There's an Argument named PrimarySwatch and has a value as Colors.deepOrange.

PrimaruSwatch: Colors.deepOrange

Please refer to our design, one can see that the app bar of our design has something like a violet color.

But because of this value Colors.deepOrange, Our application will appear as deep orange in color.

I recommend you to play with colors and choose the color of your choice.

The next line of code says something about brightness, it's nothing but it is asking you that will your application be in dark or light mode?

For instance, use light mode as that deep orange won't be appearing to you, as the dark mode will override everything into the dark theme.

Moving to the next line we can see a commented line

home: MyHomePage(title: 'Flutter Demo Home Page'),

This will route our application to this class named MyHomePage

Therefore, the first page for our application is defined in this class named MyHomePage.

But why I commented this out??

I wanna introduce you to routes in Flutter, it will even help you build a web app based on Flutter.

Moving to a piece of code, we can see

routes: {
        "/": (context) => MyHomePage(title: "This is title"),
        "/loginPage": (context) => LoginPage(),
      },

Here / means the same as home in the above code. Yaa, it's the same thing.

But we want our login page to be displayed first naa?

let's change the code in some way that it will show the login page as it's the homepage for our application.

I want you to change this piece of code on your own :)

hint: Replace MyHomepage(title: ".....") with LoginPage()

So now I think we are done with our main.dart file.

Are you excited about coding our login page??

I know you are bored till now, I just want you to create a folder named pages inside the lib folder and create a file named login.dart inside the pages folder.

We are done, for now, we learned about theming, and how to route our application to a specific page in this article.

I hope you understood everything I specified in this article. In the next article, we will be coding our login page.

If you have some doubts, please head over to our Telegram group. I will be more than happy to help you.

There's saying

if you want to impress people make things complicated, If you want to help people, keep it simple

I wanna help you and I will be there for you.

Stay home, stay safe.

Cya :)

For those of you, who haven't learned object-oriented programming language.

I want to give you a short intro to this "Object-Oriented Programming"

This would be highly beneficial to you, as Procedural programming is about writing procedures or functions that perform operations on the data while object-oriented programming is about creating objects that contain both data and functions.

didn't understand?

Don't worry! You will understand soon :)

By the way, what are the advantages of Object-Oriented Programming and why it is important?

Because

• OOP is faster and easier to execute
• OOP provides a clear structure for the programs
• OOP helps to keep the C++/Java/Dart code DRY "Don't Repeat Yourself", and makes the code easier to maintain, modify and debug
• OOP makes it possible to create full reusable applications with less code and shorter development time

Object-Oriented Programming is associated with concepts like Class, Object, Abstraction, Encapsulation, Polymorphism, and Inheritance.

First of all, what is a class?

Class is what defines the properties and functions of any functional Entity. Like humans having body parts, clothes, etc.

Collection of objects is known as a class.

For example, if you are a student studying in a college or school.

Then all the students in your classroom are objects and the classroom itself is a class. The name, age of a student can be assumed as variable and the activities he/she does in his/her whole day can be termed as methods

Like sleeping(), eating(), crying, studying(), etc

Now I think we are done with class, objects, methods. Now let's understand the important principles of OOP

The principles of object-oriented programming are encapsulation, abstraction, inheritance, and polymorphism.

I know all this is a bit hard to digest, but all these things will help you a lot in your programming journey.

I know these words sound scary, but don't worry they are not that scary as they look.

I want to give you a short and simple explanation of these words!

Are you ready?

Now Let's Go........

Encapsulation:

Say we have a program. It has a few logically different objects which communicate with each other — according to the rules defined in the program.

Encapsulation is achieved when each object keeps its state private, inside a class. Other objects don’t have direct access to this state. Instead, they can only call a list of public functions — called methods.

For example

1. When we buy a new Mobile phone, we don’t see how the circuit board works or how memory is managed. This irrelevant information is hidden. That hidden information is called “Encapsulation”

2. A capsule. Basically, the capsule encapsulates several combinations of medicine.

If combinations of medicine are variables and methods then the capsule will act as a class and the whole process is called Encapsulation.

I hope you are done with Encapsulation. If not then please read these examples again. Or else join our Telegram group only made to help coders with the difficulties they were facing in their programming journey.

Abstraction:

Abstraction is a process of showing only the necessary data to the end-user.

For example:

In washing Machine

We just put dirty clothes and add the washing powder. The washing machine working internally brews the cloths and gives the clean cloths.

You don’t need to know what is happening inside the washing machine. Someone else worried about created a washing machine and that’s acts as “Abstraction” which shows you the only necessary things.

Inheritance:

The capability of a class to derive properties and characteristics from another class is called Inheritance.

For example,

You are derived from your parents and they had been derived from their parents and ultimately you have some qualities and features of your both parents, and grandparents.

Polymorphism:

The word polymorphism means having many forms.

Poly means many and morphḗ mean forms in greek

In simple words, we can define polymorphism as the ability of a message to be displayed in more than one form.

A real-life example of polymorphism, a person at the same time can have different characteristics. Like a man at the same time is a father, a husband, an employee. So the same person posses different behavior in different situations. This is called polymorphism. Polymorphism is considered one of the important features of Object-Oriented Programming.

So now we are done with some of the important concepts of OOP, but there's a lot to learn in OOP.

I condensed and summarized all the data available on the web for you.

I hope now you have, some brief idea about OOP.

If you want detailed information about OOP and also want to suggest something to me, please comment and join our Telegram group.

In the next article, we will be getting our hands dirty with some flutter code

Until then, stay home stay safe

Cya :-)

Prerequisite: Experience in any programming language which taught you OOP.

Before starting up, please note that you should have min. 8GB of ram in your laptop or computer for coding your Flutter application smoothly.

If you don't have a PC with the required specifications

I would recommend using Dartpad.

DartPad is a free, open-source online editor to help developers learn about Dart and Flutter.

Install Flutter Framework

Now after installing Flutter, let's install a text editor, which works best with Flutter.

I recommend using Android Studio, Visual Studio Code, or Emacs

And XCODE for mac users.

Please install a Flutter extension in your respective code Editor.

This will help you code faster in Flutter

After setting up your favourite editor for Flutter.

Run:

flutter doctor

The output should look like this,

This indicates that we are all set for coding our flutter application.

If there's some error, please fix it or drop a comment below, I will be happy to help you in the process.

So now, after setting up everything, let's jump in the terminal and fire,

flutter create yourprojectname

Please note: The name should be all lowercase, with underscores to separate words, just_likethis. Use only basic Latin letters and Arabic digits: [a-z0-9]. Also, make sure the name is a valid Dart identifier—that it doesn’t start with digits and isn’t a reserved word.

Try to pick a name that is clear, terse, and not already in use. A quick search of packages on the pub.dev site to make sure that nothing else is using your name is recommended.

If you are a windows user, press

ctrl+shift+p

This will open the command platelet for you in vs code. then search an entry that says, create a Flutter application

Now let's jump into your Flutter project.

The things we will be focusing on are the main.dart file inside the lib folder and pubsec.yaml file.

The main.dart contains all our required Flutter code, which we will be working on. and pubsec.yaml contains the list of assets and the dependencies we will be working on.

Now let`s run the command

flutter run

For running the sample code in main.dart to build a counter application in your device.

To use your physical Android device, Turn on USB Debugging in Developer mode.

Now run the above command again, if you didn't and you will see your first Flutter application running on your device in debug mode.

Here's how it will look like,

Let's go through the code written in main.dart file.

The first line of code

import 'package:flutter/material.dart';

Imports the material code for using the widgets defined in it.

void main() {
  runApp(MyApp());
}

This is the main function, And it is the entry point of our program. It is the point at which the execution of a program is started. When a program is executed, the execution control goes directly to the main() function.

And here it is running the MyApp() class defined.

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application

        primarySwatch: Colors.blue,
        //You can play with the name of the color you like :)
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),

    );
  }
}

This class, I.e. MyApp is a stateless widget,

Stateless Widgets are those widgets whose state can not be altered once they are built.

@override

The @override annotation expresses the intent that a declaration should override an interface method, something which is not visible from the declaration itself.

The meaning of Override is

to use your authority to reject somebody’s decision, order, etc.

If you didn't understand the use of override, It's okay for now It will get clear when you will start writing your Flutter application.

Let's jump into our next part of the code,

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

This widget is the home page of your application. It is stateful, meaning that it has a State object (defined below) that contains fields that affect how it looks.

This class is the configuration for the state. It holds the values (in this case the title) provided by the parent (in this case the App widget) and used by the build method of the State. Fields in a Widget subclass are always marked "final".

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              //Variables which are declared in this class can be accessed by $ symbol 
             //while in quotes
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

This is the extended part of the class MyHomePage as you can see that the ending line of the class MyHomePage says to override and create a state _MyHomePageState.

The rest of the code is properly being explained through comments, Please do read and use them efficiently in your code too.

I would like to suggest you play with this existing code so that one can understand the working of this code.

I will continue this flutter series until I go mad XD

In the next post, I will be building a Flutter application, for teaching you other components and terms related to Flutter development.

Until then, stay home stay safe.

Cya ;-)

I have something to share, Named PipeWire and this stuff is more interesting than it looks.

Earlier Linux distributions use to rely on PulseAudio-, JACK-, ALSA- and GStreamer-based applications for their multimedia frameworks to work.

GStreamer is a multimedia handling library, it uses ALSA/PulseAudio/Jack/PipeWire/etc., but doesn't replace them

But at the cost of higher latency.

Therefore now to fix this developer created this new low-level multimedia framework named PipeWire from scratch to provide

• graph-based processing
• support for out-of-process processing graphs with minimal overhead
• flexible and extensible media format negotiation and buffer allocation
• Hard real-time capable plugins
• achieve very low latency for both audio and video processing

Linux has no unified multimedia framework for exchanging multimedia content between applications or even devices. In most cases, developers realized that a user-space daemon is needed to make this possible:

• For video content, we typically rely on the compositor to render our data.
• For video capture, we usually go directly to the hardware devices, with all security implications and inflexible routing that this brings.
• For consumer audio, we use PulseAudio to manage and mix multiple streams from clients
• For Pro audio, we use JACK to manage the graph of nodes.

PipeWire aims to solve this problem and provides a unified framework to run both consumer and Pro audio as well as video capture and processing in a secure way.

Currently PipeWire ships with the following components:

• a PipeWire daemon that implements the IPC and graph processing
• an example session manager that manages objects in the PipeWire daemon.
• a set of tools to introspect and use the PipeWire daemon.
• a library to develop PipeWire applications and plugins.

I know you didn't understand anything I said until now, Maybe some of you did... but no worries, let me list down some of the usages of PipeWire for you in day to day life

WebRTC screen sharing

• Most browsers used to rely on X11 for capturing the desktop (or individual applications) when using WebRTC (e.g. on Google Hangouts). On Wayland, the sharing mechanism is handled differently for security reasons. PipeWire enables sharing content under Wayland with fine-grained access controls.

Firefox (84+) supports this method by default, while on Chromium (73+) one needs to enable WebRTC PipeWire support.

Don't know about the X11 and Wayland? No worries, I will post another page on this topic for you :)

For now, just assume that X11 is no more or less secure than any other part of your Linux OS, And Wayland is focused on security

By the way, both are display servers.

Video

• Most applications that rely on GStreamer to handle e.g. video streams should work out of the box thanks to the PipeWire GStreamer plugin. Applications like e.g. cheese(camera app in Linux Distros) are therefore already able to share video input using it.

Audio

• PipeWire can be used as an audio server, similar to PulseAudio and JACK. It aims to replace both PulseAudio and JACK, by providing a PulseAudio-compatible server implementation and ABI-compatible libraries for JACK clients.

You can ignore that ABI stuff for now if you didn't understand :)

ALSA/Legacy applications

PulseAudio clients

JACK clients

Bluetooth devices

Run PipeWire on top of native JACK

Currently(i.e. in May 2021) Fedora 34 ships with PipeWire preinstalled. So I think you may safely enjoy the features of PipeWire :)

In Short

PipeWire is a server for handling audio and video streams and hardware on Linux. It was created by Wim Taymans at Red Hat. It handles multimedia routing and pipeline processing.