Forem: Nitish Kumar Singh

Wallet Security

Nitish Kumar Singh — Wed, 26 Aug 2020 09:24:23 +0000

How to detect if someone comes to database and updates their wallet balance?

Database realated help 😓

Nitish Kumar Singh — Mon, 24 Aug 2020 13:28:17 +0000

I am making a multi-restaurant appliances and everything is done but I think it'll not might not scale.

Problem

I have GEO Location (Latitude and Longitude) of user and Restuarant. I am listing all restaurants within 3 Kilometres. I have tested on small scale and it worked but I am worried, what would happen when there will be 100,000 Restuarant.

If User ask for nearby Restaurants then I will filter from 100,000 Restuarant. To filter I'll calculate distance between user GEO Location to all 100,000 restuarant.

I don't know if I'm thinking right or wrong? What would be the possibile solution?

Upgrading VS Code Workspace

Nitish Kumar Singh — Mon, 11 Nov 2019 12:06:13 +0000

There are some setting in VS Code which can help you in improving your work-space. I am not going to show you any extensions or install any. I will use internal settings of VS Code which will improve our work-space.

1.breadcrumbs : It is mainly used in website and it really handy there. breadcrumbs is useless in Editor, at least I had never use it. I haven't seen anyone using it.

Breadcrumbs are mainly used in Website and here is a snap of breadcrumbs from bootstrap

So Disable the breadcrumbs from the settings

2.minimap: Minimap is not very common, I haven't seen it in lots of editor. Minimap is available in few editors. I don't understand the exact use case of minimap. using minimap I can scroll up and down but I can do that using Scroll bar also. So, why minimap ? I seen lots of developer coding in live conferences and they also don't use it. Although most of the people are not using it they why they don't disable it. So, the we can get some more area in editor.

So, Disable the minimap from the settings

3.Side Bar : Side is important, I use it and everyone of use it. So, I am not going to tell you to disable. Side Bar is a awesome things but the location/position of sidebar is wrong. It should be in Right but it's in left.

Why it should be left ?

Whenever we open and close the sidebar, the editor area move little right. So, we need to move our eyes to little right for reading the code. Opening and closing of side bar are done lots of time while coding. If you open the side bar and don'e close it then you can keep it in left but if you close the sidebar to get extra space.

Then you should change the position of the sidebar to right

4.Open Editors: In VS Code we see the opened file in the Side Bar. We don't usually use the open editors to move from one file to other. Basically there are 3 ways to move to any file.

From the project hierarchy
Open Editors
Tabs

We usually use the tabs/project hierarchy. So open editors is useless there for most of us. There is a default limit of 3/5/9 file to be shown in the open editors, it means if you have more than 9 file open then you can switch between recent 3/5/9 files only from the open editors. The file limit can be anything but there is a limit and you can't see more than that.

So, get rid of the open editors and get more area in the side bar

5.Status Bar : Bottom status bar is cool and I had seen lots of developer uses it for opening the Terminal. Most of the developer uses the status bar and that is very useful for opening the terminal. VS Code is pro editor and there are lots of shortcut and you can bind some more shortcut with some other features. If you get

If you really use the status bar for 1-2 purpose then probably you should hide it and get some more extra space.

If you know any other settings to make work-space clean and great then please comment.

This is my opinion based on my some years of experience and these reason might not be the sufficient for you. This means, On some point you may agree and and some you don't.

Installing Android 4.0 Preview

Nitish Kumar Singh — Fri, 25 Oct 2019 15:21:35 +0000

You can install Android Studio 4.0 Preview which is available in canary and dev channel. There are lots of new things in new Android 4.0 which make me excites to install that.

Android Studio 4.0 is in Preview version which means this is not for everyone. Preview are not stable release and it’s not available of stable channel. This is for those, who are interested in try and test new features. Preview are

There are four different channel of android studio release.

Canary
Dev
Beta
Stable

You should not expect any bug-free experience from any channel except stable.

Android Studio take care of these things, if you will move to other channel that will make two android studio available in you Computer. You can use any Android Studio anytime. You need not to uninstall one and install other.

If you want early access to the next version of Android Studio, you don’t have to replace your existing stable version. You can install the Android Studio preview side by side with the stable version and work on the same app projects in both.

APPLE USER

If you have mac here is a video showing, how to install preview version side by side.

WINDOWS USER

If you are windows user then I will be uploading video about that soon. Here are the steps which you need to follow.

1 . Download the Android Studio Preview from this link https://developer.android.com/studio/preview/

Extract the zip

Change the directory name to Android Studio Preview from android-studio

Open the Android Studio Preview Directory and go to bin folder. There you will find studio.exe and studio.64.exe. Depends upon system architecture(32bit or 64bit) open the files.

You can’t open this from windows start search. You can pin this to start or taskbar, which will make you will easier for opening this again and again. You can make shortcut to the desktop also.

LINUX USER

I don’t have anything for you

Sorry

Codepen of Flutter

Nitish Kumar Singh — Sun, 13 Oct 2019 15:27:35 +0000

Ruining Flutter Code in the Browser

Now you can easily run the Flutter Code in Browser

Roadmap for Frontend Developer

Nitish Kumar Singh — Tue, 10 Sep 2019 20:44:43 +0000

HTML + CSS + JS = Fronted Developer but not modern Fronted Developer

Current Market is looking for a modern front-end developer. So, you need to learn about modern tools. There is a various modern tool and it’s difficult to choose the right tool and order of learning.

I will help you in knowing the right tool and in the right order.

Every big thing started with a small step and to become master of frontend development you need to start with the basics.

Basics
CSS Framework
Package Manager
CSS Preprocessor
Build Tool
Front-end Framework
Testing
PWA
Performance
CSR
SSR
Static Site Generator

These are the things which is very much important for front-end master. I’ll discuss each of this one by one.

Basics :

👉 HTML: Never underestimate the HTML. There are lots of things in HTML which are not being used by people but if you once you know this is also available then you will be surprised.

👉 CSS: It’s tricky and interesting because it styles the page and how it works is a little surprising sometimes. You make your page beautiful with it and you define every property by yourself. It’s like building your own home.

👉 JS: JS is the only things which bring logic and programming to the life of frontend developer. It is very much flexible and surprising. It makes own website functional like we see slides we get from verified before sending to the server. Dynamically sending the request to the serve.

HTML is just mark-up language and it will never give you an error. CSS will also never complain you about the wrong code, but JS will do that. Once you learn the basics you are ready to move to the next section.

CSS Framework

It’s is very important to learn CSS framework because it will make your life easier. You need not do every styling by yourself. You can use the standard predefined style from the framework. If you have a good grasp on CSS, then you can easily override the CSS property and customize the style of the page.

Bulma, Bootstrap, Materialize, Semantic UI and Foundation. There are the top 5 CSS framework and you must learn at least one and that is Bootstrap.

If you ask me to recommend you then I’ll suggest you two framework.

👉 Bootstrap { Every Developer must know}

👉 Materialize { Any Material Design Framework }

Package Manager

A package manager is a programming language’s tool that automates the process of installing, upgrading, configuring. It also creates project environments and easily imports external dependencies.

After learning CSS Framework, you might think of learning JS Framework but when you will start learning that ultimately you will come to package manager.

NPM is node official package manger.

Some people don’t use npm then what they use they use Yarn (unofficial package manager)

Yarn is a common project developed by such companies as Facebook, Exponent, Google, and Tilde.

So might think that I told you different thing what you should follow. You can live life with npm there is nothing bad with it but yarn is enhanced version of npm.

Go with npm after some year/month you will know what is advantages of yarn.

❌ Don’t directly jump to yarn because master must know about npm also.

CSS pre-processor

A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. There are many CSS pre-processors to choose from, however, most CSS pre-processors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on.

These features make the CSS structure more readable and easier to maintain.

LESS
SASS
STYLUS
POSTCSS

This increased productivity and everyone wants things very fast, as fast as it can’t be.

Build Tool

👉 Task Runner: Task runner for automating all of those boring repeated processes i.e Grunt.

👉Modular builder: bundling many web packages and different dependencies, including CSS files and images, then creates modules i.e. webpack.

👉Linter: Code linting is an important thing to have incorporated in your project because it is a way to increase the code quality

👉 Formatter: code formatter modifies or fixes your source code, according to the defined configuration previously set up.

Front-end Framework

👉 Angular It was built by Google and it the best for enterprise application.

👉 React It was built by Facebook and this is widely used among all the framework.

👉 Vue It is growing exponentially, and it has so much potential that it might someday become number.

Testing

In the test, we test our UI is fine or not because our code is going to run on different devices with different configuration It impossible to test everywhere and every page manually every time. So we write a test to automate these things. There are 3 types of test

👉Unit testing: Unit testing is a type of testing to check if the small piece of code is doing what it is supposed to do. Unit testing checks a single component of an application.

👉INTEGRATION TESTING: Integration testing is a type of testing to check if different pieces of the modules are working together. The behavior of integration modules is considered in Integration testing.

👉FUNCTIONAL TESTING is a type of software testing whereby the system is tested against the functional requirements/specifications.

PWA

Let’s take the example of Whatsapp on your phone. When there is no network, you can still open the app, check past messages and even reply to someone. When the phone gets the internet connection, the messages are being automatically sent in the background.

👉 SERVICE WORKER

👉 NOTIFICATION

👉 LOCATION

👉 DEVICE ORIENTATION

👉 STORAGE

Performance

Once you get a grasp on the things which I told you about. You need to improve the website in terms of performance. There is a various tool for testing your application performance.

👉 LIGHTHOUSE

👉 DEVTOOL

👉 SPEED TEST

These are the tools which you will help you and based on the result of these tools, you can improve your website. So, that it will load faster on 2G, 3G or any other network also. You will also get some more way to improve website performance.

SSR

If you disable the js and then run any SPA i.e. angular react and vue you will not able to see anything more than an error message. which will say you to enable the javascript.

👉 React: Next.js

👉 Angular: Universal

👉 Vue: Nuxt

Means spa doesn't work without js. Server-side render website are the website which comes with HTML and CSS. So that HTML and CSS don’t need to be dependent on js. This helps low configuration device to load your website fast. because No JS being interpreted for Rendering UI or DOM manipulation. All the big company who use SPA have a server-side render website also means if you disable the js then also you can see the website.

Static Site Generator

Static site generator makes your website static means you can run your website without connecting to the database. It will only HTML, CSS and js which don't contact the database or API for any information.

👉 React: Gatsby

👉 Vue: VuePress

If you are having a blog with some 20 posts then It will fetch all the available post from the database and make it static, like all the posts are being written using in the new file and with HTML Syntax. In this case, I took an example of 20 posts means there will be 20 different pages.

Thanks for reading I hope you like it that why you are reading this. If you have any suggestion or feedback you can share. I’ll be happy to read it because that is the only thing which can help me in improving myself.

Flutter: Advance Routing and Navigator Part 1

Nitish Kumar Singh — Mon, 03 Jun 2019 13:52:55 +0000

Flutter: Advance Routing and Navigator (Part 1)

Flutter Advance Routing — Part 1: Talked about only Routing
Flutter Advance Routing — Part 2: Talked about only Data Sharing

First of all, I am going to start with basic Routing. You can find the basic routing on flutter website also.

Core concepts and classes for managing multiple screens

Route : A Route is an abstraction for a “screen” or “page” of an app, and a Navigator is a widget that manages routes.
Navigator : Creates a widget that maintains a stack-based history of child widgets. A Navigator can push and pop routes to help a user move from screen to screen
Material Page Route : A modal route that replaces the entire screen with a platform-adaptive transition.

What is platform-adaptive Transition ?

The Transition which you see when routing from one screen to other screens.

> For Android , the entrance transition for the page slides the page upwards and fades it in. The exit transition is the same but in reverse.

> For iOS , the page slides in from the right and exits in reverse. The page also shifts to the left in parallax when another page enters to cover it

This Transition happens because of MaterialPageRoute only. You can modify this transition also. To modify this transition you need to play with MaterialPageRoute or PageRouteBuilder.

Mobile apps typically display full-screen elements called “screens” or “pages”. In Flutter, these elements are called routes and they’re managed by a Navigator widget. The navigator manages a stack of Route objects and provides methods for managing the stack, like Navigator.push and Navigator.pop.

Example 1 : Simple Routing

In this example, you can see that I am using method Navigator.push to route to the new screen and Navigator.pop to go back.

Navigator maintains the Stack-based history of routes and whatever is at the top of the stack that is our current Page in our App.

Navigator.push takes two arguments (BuildContext, Route<T>). In the place of Route, we are using MaterialPageRoute which replaces the entire screen with a platform-adaptive transition.

To learn about Transition wait for tomorrow

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: HomePage(),
  ));
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: new Center(
        child: RaisedButton(
          onPressed: () {
            Route route = MaterialPageRoute(builder: (context) => SecondHome());
            Navigator.push(context, route);
          },
          child: Text('Second Home'),
        ),
      ),
    );
  }
}

class SecondHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Hoem'),
      ),
      body: new Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

Example 2 : Named Routing

In this example, you can see that I am using method Navigator.pushNamed to route to the new screen and Navigator.pop to go back. Navigator maintain Stack-based history of routes

Navigator.pushNamed takes two required arguments (BuildContext, String,{Object}) and one optional Argument. In the place of String, we are passing the String which we had predefined in routes.

If you have any idea about expressjs then it looks very much familiar to you.

As I told you in earlier that MaterialPageRoute is responsible for page Transition and Here in this complete code I haven’t used this MaterialPageRoute then it may be Little difficult for you change the page transition.

I’ll discuss about onGenerateRoute later in this post that help you . You can have custom Transition along with Named Route.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: <String, WidgetBuilder>{
      '/': (context) => HomePage(),
      '/second': (context) => SecondHome(),
    },
  ));
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: new Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Second Home'),
        ),
      ),
    );
  }
}

class SecondHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Home'),
      ),
      body: new Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

This was the basic routing and Now I want to tell you something about the above examples.

If in your route ‘ / ’ present then it is not mandatory to defined initial route. It will make ‘/’ as your initial route and If you want your initial route different than ‘/’ then you can define.

This below example will run and will open the HomePage

MaterialApp(
  routes: <String, WidgetBuilder>{
    '/': (context) => HomePage(),
    '/second': (context) => SecondHome(),
  },
)

Initial route and home are exactly the same you can use anyone at any place. You just need to take care that if you are initial route then you had defined routes or onGenerateRoute. This is not mandatory that there should be ‘/’ in routes.

This below example will run and will open the second page

MaterialApp(
  home: SecondHome(),
  routes: <String, WidgetBuilder>{
    '/home': (context) => HomePage(),
    '/second': (context) => SecondHome(),
  },
),

If you want that when any route did not match it should show 404 Not Found Link Error Screen then you can use on UnknownRoute.

MaterialApp(
  home: SecondHome(),
  routes: <String, WidgetBuilder>{
    '/home': (context) => HomePage(),
    '/second': (context) => SecondHome(),
  },
  onUnknownRoute: (RouteSettings setting) {
    # To can ask the RouterSettings for unknown router name.
    String unknownRoute = setting.name ;
    return new MaterialPageRoute(
                builder: (context) => NotFoundPage()
    );
  }
),

Example 3 : onGenerateRoute

Here you can see I am using MaterialPageRoute and now you can easily modify the Transition Animation. In this case, you need not to routes onGenerateRoute will create the routes for you. Technically routes are present there but that is not initialized by you.

onGenerateRoute: Creates a route for the given route settings

MaterialApp(
  home: SecondPage(),
  onGenerateRoute: (RouteSettings settings) {
    switch (settings.name) {
      case '/':
        return MaterialPageRoute(builder: (context)=> HomePage());
        break;
      case '/second':
        return MaterialPageRoute(builder: (context)=> SecondPage());
        break;
    }
  },
),

Here is a complete custom Transition of Screen. you can copy and paste in your IDE to see the example. Keep one thing in mind that when you change the page Transition it changes for all OS. Default Transition is Platform dependent.

Full Source Code with Demo

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: HomePage(),
      onGenerateRoute: (RouteSettings settings) {
        switch (settings.name) {
          case '/':
            return SlideRightRoute(widget:HomePage());
            break;
          case '/second':
            return SlideRightRoute(widget:SecondHome());
            break;
        }
      },
    ),
  );
}
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: new Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Second Home'),
        ),
      ),
    );
  }
}
class SecondHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Home'),
      ),
      body: new Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

class SlideRightRoute extends PageRouteBuilder {
  final Widget widget;
  AppSlideRightRoute({this.widget})
      : super(
    pageBuilder: (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation) {
      return widget;
    },
    transitionsBuilder: (BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
        Widget child) {
      return new SlideTransition(
        position: new Tween<Offset>(
          begin: const Offset(1.0, 0.0),
          end: Offset.zero,
        ).animate(animation),
        child: child,
      );
    },
  );
}

You can follow me get the get Notified about my activities.

I think I need to write part-2 of this post because there are a lot more to cover.

If you enjoyed or learned let me know on Twitter of anywhere

Understanding Streams in Flutter (Dart)

Nitish Kumar Singh — Mon, 06 May 2019 02:06:05 +0000

Understanding Streams in Flutter (Dart)

A stream is one of the challenging topics for the beginner. It took lots of efforts to understand. In order to understand the Streams, you will need to go through the various Examples and then you will get what Exactly Streams is.

At the end of the post, I will write one Flutter application which will be based on the same example which I had discussed in Dart.

I am also going to put my understanding of Streams into the words and Examples.

Streams are a concept Dart. So, I will start streams in Dart and end with applying those concepts in Flutter.

Asynchronous programming in Dart is characterized by the Future and Stream classes.

What is Future?

A Future is used to represent a potential value, or error, that will be available at some time in the future. > # A simple Example of Future with potential value.

    // asynchronous data 
    main() async {
      String x = await HelloAsync();
      print(x);
    }

    Future<String> HelloAsync() async{
       await Future.delayed(Duration(seconds:5));
       return 'Message from Future.';
    }

Why are Streams?

Streams provide an asynchronous sequence of data.

How stream and Future are similar?

Both works asynchronously
Both have some potential value

How stream and Future are different?

A stream is a combination of Futures
Future has only one response but Stream could have any number of Response.

If you had ever sent any request to any API in your flutter application then probably you know about async ( Future ).

There are two kinds of streams :

Single Subscription: There could be a **maximum of one listener **to this stream.
Broadcast: There could be the infinite number of the listener to this stream.

All the example which I will discuss in this post will be Single Subscription based. Once you understand the single subscription then you can easily understand the Broadcast.

Let’s understand this with examples

The main purpose of this example is to let you understand how the streams work. These examples will make you familiar with some available methods and property of the Stream.

Stream Methods

All the available example can be run on Dartpad. I highly recommend you to run the examples and see the pattern of output and understand them.
DartPad

Example 1:

Stream .periodic() → Stream < T >

// asynchronous data 
main() async {
  Duration interval = Duration(seconds: 2);
  Stream<int> stream = Stream<int>.periodic(interval, callback);

  await for(int i in stream){
    print(i);
  }
}

// This callback modify the given value to even number.
int callbank(int value){
  return ( value + 1 ) * 2;
}

Let’s understand the creation of the stream.

Stream .periodic: Creates a stream that repeatedly emits events at period intervals.

This is one of the basic streams which you can create easily to make anyone understand about the stream.

If callback is omitted the event values will all be null.

This stream gives us data every second because we had specified the interval as 2 second.
The argument to this callback is an integer that starts with 0 and is incremented for every event.
This is an infinite stream of data because we had not specified any condition.

Example 2:

Stream.take(int count) → Stream < T >

Let’s create a finite stream

// asynchronous data 
main() async {
  Duration interval = Duration(seconds: 1);
  Stream<int> stream = Stream<int>.periodic(interval,transform);
  // Added this statement
  stream = stream.take(5);

await for(int i in stream){
    print(i);
  }
}

int transform(int x){
  return (x + 1) * 2;
}

This is a finite stream of data because we had not specified the condition. The condition says that emit only specified data events.
This will print 2, 4, 6, 8, 10.
take: take(int count) is based on the number of events

Example 3:

Stream.takeWhile(bool test(T element)) → Stream< T >

You can specify the condition on the returned value also.

// asynchronous data 
main() async {
  Duration interval = Duration(seconds: 1);
  Stream<int> stream = Stream<int>.periodic(interval,transform);
  // Added this statement
  stream = stream.takeWhile(condition);
  await for(int i in stream){
      print(i);
   }
}
int transform(int x){
  return (x + 1) * 2;
}  
// Added this function
bool condition(int x){
  return x <= 10;
}

takeWhile: takeWhile(bool test(T element)) is based on the Event emitted value.

Example 4:

Stream.skip(int count) → Stream

You can skip some first emitted event.

// asynchronous data 
main() async {
  Duration interval = Duration(seconds: 1);
  Stream<int> stream = Stream<int>.periodic(interval,transform);
  stream = stream.take(10);
  stream = stream.skip(2);
  await for(int i in stream){
      print(i);
   }
}
int transform(int x){
  return (x + 1) * 2;
}

This will skip the first 2 Emitted Event

Example 5:

Stream.skipWhile(bool test(T element)) → Stream

You can skip the event based on the event value too.

// asynchronous data 
main() async {
  Duration interval = Duration(seconds: 1);
  Stream<int> stream = Stream<int>.periodic(interval,transform);
  stream = stream.take(10);
  stream = stream.skipWhile(condition);
  await for(int i in stream){
      print(i);
   }
}
int transform(int x){
  return (x + 1) * 2;
}
bool condition(int x){
  return x < 5;
}

If the test gets a pass then it will skip those value.
Once the test gets fails it will start emitting the value.
If the test gets fail it will stop checking the condition.

Example 6:

Stream.toList() → Future < List < T > >

This method collects all the data from the stream and store in the List.

// asynchronous data 
main() async {
  Duration interval = Duration(seconds: 1);
  Stream<int> stream = Stream<int>.periodic(interval,transform);
  stream = stream.take(5);
  List<int> data = await stream.toList();
  for(int i in data){
      print(i);
   }
}
int transform(int x){
  return (x + 1) * 2;
}

This is async, means you need to wait for some time to get the task done.
When this stream ends, the returned future is completed with that List.

Example 7:

Stream. listen() → StreamSubscription < T >

There is one specific method for listening to the stream on data. I like the for loop approach because it is much more friendly.

// asynchronous data 
main() async {
  Duration interval = Duration(seconds: 1);
  Stream<int> stream = Stream<int>.periodic(interval,transform);
  stream = stream.take(10);

  stream.listen((x){
    print(x);
  });

}
int transform(int x){
  return (x + 1) * 2;
}

Example 8:

Stream. forEach() → Future

There is one specific method for listening to the stream on data. I like the for loop approach because it is much more friendly.

// asynchronous data 
main() async {
  Duration interval = Duration(seconds: 1);
  Stream<int> stream = Stream<int>.periodic(interval,transform);
  stream = stream.take(10);

  stream.forEach((int x){
    print(x);
  });

}
int transform(int x){
  return (x + 1) * 2;
}

Stream Property

Example 9:

Stream .length → Future < int >

// asynchronous data 
main() async {
  Duration interval = Duration(seconds: 1);
  Stream<int> stream = Stream<int>.periodic(interval);
  stream = stream.take(10);
  print(await stream.length);
}

length is the property of the stream.
It specifies the number of emitted event.
Waits for all events to be emitted in the stream.

Now I will create a simple flutter application which will be based on the above example. I am pretty sure you will understand how the stream works in a flutter application. There are various ways of using the stream in flutter application. I am showing you one of them.

To build app something like this, every beginner will use build a Stateful Widget and will probably use the setState((){}) again and again to update the UI.

I am going to build the exact same app which is shown in the image

Stateless Widget
without setState((){}) ( You can’t call setState((){}) with Stateless)
I will use Stream
I will use StreamBuilder

What is this StreamBuilder?

StreamBuilder listen to the stream and build itself on every new emitted Event by the stream.

Let’s see then stream Builder Implementation.

child: StreamBuilder<T>(
  stream: stream, // a Stream<int> or null
  builder: (BuildContext context, AsyncSnapshot<T> snapshot) {
    if (snapshot.hasError) return Text('Error: ${snapshot.error}');

    switch (snapshot.connectionState) {
      case ConnectionState.none:
        return Text('Not connected to the Stream or null');
      case ConnectionState.waiting:
        return Text('awaiting interaction');
      case ConnectionState.active:
        return Text('Stream has started but not finished');
      case ConnectionState.done:
        return Text('Stream has finished');
    }
  },
),

You can see the above **Example **and get some idea about the StreamBuilder. Stream Builder needs two things.

stream: A source of asynchronous data events. We know how we can build our own asynchronous data event source (using Stream.periodic()).
builder: We need to write the logic for UI based on asynchronous interaction (stream emitted event).

Connection State

ConnectionState.none: The stream is null
ConnectionState.waiting: awaiting interaction
ConnectionState.active: The stream had started emitting data but not finished yet.
ConnectionState.done: The stream has finished.

Here is the final code.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: HomePage(),
    title: 'Stream Demo',
  ));
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stream Demo'),
      ),
      body: Center(
        child: StreamBuilder(
          builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              return Text(
                '1 Minute Completed',
                style: TextStyle(
                  fontSize: 30.0,
                ),
              );
            } else if (snapshot.connectionState == ConnectionState.waiting) {
              return Text(
                'Waiting For Stream',
                style: TextStyle(
                  fontSize: 30.0,
                ),
              );
            }
            return Text(
              '00:${snapshot.data.toString().padLeft(2,'0')}',
              style: TextStyle(
                fontSize: 30.0,
              ),
            );
          },
          initialData: 0,
          stream: _stream(),
        ),
      ),
    );
  }

  Stream<int> _stream() {
    Duration interval = Duration(seconds: 1);
    Stream<int> stream = Stream<int>.periodic(interval, transform);
    stream = stream.take(59);
    return stream;
  }

  int transform(int value) {
    return value;
  }
}

This code is using two main thing

Stream
StreamBuilder

If you have any doubts about the stream you can ask. I would love to answer your question.

I will upload the code to GitHub soon and update the link here.

GraphQL with Flutter

Nitish Kumar Singh — Mon, 29 Apr 2019 17:31:17 +0000

GraphQL is a query language in which we send the query to the GraphQL Server. The server executes the query at runtime for fulfilling those queries with your existing data.

Let’s me make you understand this in more easy words. I suppose that you know SQL (Structured Query Language). If we are having a user table with the information about their name, age, email, phone. Now you want to fetch the name and email of the user then you will write a query for that and you will get that information. (Select name, email form the users).

You will not get age and phone of the user because you have not asked for that information. These are a thing of the server-side (backend). If you are a frontend developer and you had made 20 pages where you need users information. You will ask the backend developer that I want user information on different pages so I need an API. Backend developer will make API will give you an endpoint.

> on 6 pages you want user’s name only

> on 10 pages you want user’s email and name

> on 4 pages you want user’s name email and phone.

So you backend developer may apply two approaches.

He will make 3 different endpoints with different data.
He can make a common API with all the information.

What is the problem with these two approaches?

We are having multiple endpoints. If someday we will ned user’s name and age then we need to make another endpoint.
We are not having multiple endpoints but We are over fetching the data, on each page we don’t want the user’s phone still we are getting the data.

You might think that there is nothing bad with over fetching because extra data will not be going to kill our bandwidth. You are probably wrong here because you are thinking on a low scale. You have not seen the large API’s.

I know you came here to Read about the Flutter

but one last Demo about GraphQL then we will move to Flutter part

Demo from GraphQL official website

There is various implementation for the GraphQL for different Technologies. First, we need to implement the GraphQL on to our server then we ask for data from that server using GraphQL Query. So in a flutter, we don’t need to implement the GraphQL server. We will use a readymade GraphQL serverfrom where we will fetch the data.

GraphQL Playground

Let’s come to Flutter coding part and understand how exactly it works.

Graphql Flutter is 1.x.x is currently available on the flutter dev channel. If you don’t know what is this dev channel and how to channel to the dev channel then don’t worry I’ll tell you.

Flutter is having 4 channel where flutter (beta, dev, master stable). by default, we all are on the stable channel and in order to use GraphQL (1.x.x). we need to change the channel.

How to change the channel?

$ flutter channel dev

Now you need to check the channel and this will download some Dart never version on which flutter dev channel is dependent. You just need to check the channel and that file will automatically get downloaded.

$ flutter channel

Flutter start’s from here

First, we need to add the dependency for the GraphQL (graphql_flutter)

name: flutter_graphql_demo
description: A new Flutter application.
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  graphql_flutter: ^1.0.0+4

Now Let’s start the writing code for the flutter. First, we create a GraphQL Client and that client will talk to the GraphQL server we just to notify the client about the GraphQL Query.

Let’s set up the GraphQL Client

import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

void main() {
  runApp(MaterialApp(title: "GQL App",home: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final HttpLink httpLink = HttpLink(uri: "https://countries.trevorblades.com/");

    final ValueNotifier<GraphQLClient> client = ValueNotifier<GraphQLClient>(
      GraphQLClient(
        link: httpLink as Link,
        cache: OptimisticCache(
          dataIdFromObject: typenameDataIdFromObject,
        ),
      ),
    );

    return GraphQLProvider(
      child: HomePage(),
      client: client,
    );
  }
}

I will talk about each of the points which is related to GraphQL in the Flutter.

To use the client it first needs to be initialized with a link and cache. For this example, we will be using an HttpLink as our link and Optimisticache as our cache.

In line number 15 you can see the link. Link is used for pointing to the endpoint of GraphQL server with the required header (if any). The header is used to authenticate the client.

ValueNotifiernotified to their listener whenever there is any value change

We are wrapping our complete page of the application with GraphQLProvider. So, that we can make a request to the GraphQL server without specifying the endpoint and the header. This means from the inside of our page we just need to tell the query and GraphQL provider will do all the tasks for us. That’s why it is known and Client Libray.

Here we had separated the GraphQL client in a different stateless client we had not written any UI code here because I want to keep them separate (GraphQL Client and Flutter UI).

This is the Query which we will send to get GraphQL server and display the list of Countries. You can try this query by copying and pasting it to this GraphQL Server.

query {
 countries {
 name
 }
}

Let’s consume reponse of GraphQL Clinet

Now we are going to make the UI for our application

class HomePage extends StatelessWidget {
  String query = r"""
                      query GetCountries{
                          countries {
                            name
                          }
                      }
                  """;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GraphlQL Client"),
      ),
      body: Query(
        options: QueryOptions(document: query),
        builder: (
          QueryResult result, {VoidCallback refetch}) {
          if (result.loading) {
            return Center(child: CircularProgressIndicator());
          }
          if (result.data == null) {
            return Center(child : Text("No Data Found !"));
          }
          return ListView.builder(
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text(result.data['countries'][index]['name'])
              );
            },
            itemCount: result.data['countries'].length,
          );
        },
      ),
    );
  }
}

This is Code for our UI and Let’s understand the GraphQL part out this code.

We are using Query() widget which is defined by the plugin. It is not a native widget. The Query has two fields here

options: Options ask for the query. What query we want to send to the server and if you want to some variable along with query then we have to pass that from the options.
builder: builder is the same as other builders in a flutter. Builder changes its state based on the data. (You can compare this builder as FutureBuilder.

First, it will send the query to the server and will go to the loading state. you can see the while loading we are showing the CircularProgressBar(). Once the query the executed and loading state gets changed it will come to the completed state.

In the completed state either it will have an error or it will have the data. If it is not having data then we are showing a message that is not data found!.

result.data = the data which you have seen in the GraphQL Playground.

If we get the data then we are showing the response. The response the same as JSON response you just need to grab the countries out of it and show in your UI. I assume that you know this.

nitishk72/flutter_graphql_demo

Thanks for reading if you like then do clap. If you have anything to say then do comment don’t be alien.

Nitish Kumar Singh🇮🇳 (@nitishk72_) | Twitter

What will be the Output? | JavaScript

Nitish Kumar Singh — Tue, 12 Mar 2019 11:00:51 +0000

I have a program and that is a little bit insane.

This is the program and I wanted to know how many of you already know this concept.


    var boy = {
            name:"Natasha",
            birthday : {
                date : 1,
                month : 'April',                    
            }   
        }

    var girl = { ...boy } ;  // copying object

    boy.name = 'Nitish' ;  
    boy.birthday.date = 31 ;
    boy.birthday.month = "December" ;

   console.log(boy) ;

   console.log(girl);

These types of question are usually asked in the interview.

`Comment you answer`

For more question like this follow me

Hating jQuery will not make you cool

Nitish Kumar Singh — Mon, 11 Mar 2019 05:41:41 +0000

Hating jQuery will not make you cool; However, adoring it will also not make you cool.

But In 2019 adoring jQuery will make you dumb.

So,

Leave the jQuery as it is and continue your life without it.

var vs dynamic in Dart

Nitish Kumar Singh — Thu, 21 Feb 2019 22:21:24 +0000

In Dart and JavaScript we have var keyword for the variable declaration but both are not same.

There is the dynamic keyword for variable declaration in Dart which is equivalent to JavaScript var keyword.

Dart var keyword is very much similar to javascript var keyword but not the exact same. Most of Dart developer uses Dart var as JS var which is not correct. Let's understand this by some examples.

I will give 4 different examples.

Example 1

In JavaScript and Dart, we can store any kind of data in a variable which has been defined using var keyword.

Dart

// This is valid Example this will work
void main() {
     var x = 'Maths pi';
     var y = 3.14;

     print(x); // Maths pi
     print(y); // 3.14
}

JavaScript

// This is valid Example this will work
 var x = 'Maths pi';
 var y = 3.14;

 console.log(x); // Maths pi
 console.log(y); // 3.14

Example 2

In JavaScript and Dart, we can store different kind of data in the same variable.

Dart

// This is valid Example this will work
void main() {
    var x ;
    x = 'Math pi';
    print(x); // Maths pi

    x = 3.14;
    print(x); // 3.14
}

JavaScript

// This is valid Example this will work
 var x ;
 x = 'Math pi';
 console.log(x); // Maths pi

 x = 3.14;
 console.log(x); // 3.14

Example 3

Now I am going to mix Example 1 and Example 2
Now I am going to initialize the variable and trying to store different data type in the same variable. This is going to give me some error because this is not valid in Dart but its valid in JavaScript.

This is the place where `var` behaves differently in Dart

Dart

// This is invalid Example this will work
void main() {

     var x = 'Math pi';
     print(x);  // Maths pi


     x = 3.14;  // Compilation failed error because
                // you are trying to assign double to String variable.
     print(x);
}

JavaScript

// This is valid Example this will work
 var x ;
 x = 'Math pi';
 console.log(x); // Maths pi
 x = 3.14;
 console.log(x); // 3.14

Example 4

If we had used dynamic instead of var in Dart code we haven't got error because dart dynamic is same as JavaScript var.

Dart

// This is invalid Example this will not work
void main() {
     var x = 'Math pi';
     print(x); // Maths pi
     x = 3.14; 
     print(x); // expected 3.14
}

JavaScript

// This is valid Example this will work
 var x ;
 x = 'Math pi';
 console.log(x); // Maths pi
 x = 3.14;
 console.log(x); // 3.14

This is my first post here. If you like it let me so that I can be motivated to post here

Forem: Nitish Kumar Singh

Wallet Security

Database realated help 😓

Problem

Upgrading VS Code Workspace

Installing Android 4.0 Preview

APPLE USER

WINDOWS USER

LINUX USER

Codepen of Flutter

Roadmap for Frontend Developer

Basics :

CSS Framework

Package Manager

CSS pre-processor

Build Tool

Front-end Framework

Testing

PWA

Performance

SSR

Static Site Generator

Flutter: Advance Routing and Navigator Part 1

Flutter: Advance Routing and Navigator (Part 1)

To learn about Transition wait for tomorrow

Understanding Streams in Flutter (Dart)

Understanding Streams in Flutter (Dart)

Asynchronous programming in Dart is characterized by the Future and Stream classes.

There are two kinds of streams :

Let’s understand this with examples

Stream Methods

Example 1:

Example 2:

Example 3:

Example 4:

Example 5:

Example 6:

Example 7:

Example 8:

Stream Property

Example 9:

Here is the final code.

If you have any doubts about the stream you can ask. I would love to answer your question.

GraphQL with Flutter

Flutter start’s from here

What will be the Output? | JavaScript

I have a program and that is a little bit insane.

Comment you answer

Hating jQuery will not make you cool

So,

var vs dynamic in Dart

In Dart and JavaScript we have var keyword for the variable declaration but both are not same.

Example 1

Dart

JavaScript

Example 2

Dart

JavaScript

Example 3

This is the place where var behaves differently in Dart

Dart

JavaScript

Example 4

Dart

JavaScript

This is my first post here. If you like it let me so that I can be motivated to post here

`Comment you answer`

This is the place where `var` behaves differently in Dart