DEV Community: NIBRAS NAZAR

Live Location (Flutter + Google Map)

NIBRAS NAZAR — Fri, 29 May 2020 09:55:16 +0000

Integrating Google Map

To get started we need to first add Google Maps in our flutter application. This is done with the help of a Flutter plugin google_maps_flutter for integrating Google Maps in iOS and Android applications.

Add google_maps_flutter as a dependency in your pubspec.yaml file.

Get an API key at https://cloud.google.com/maps-platform/ and enable Google Map SDK. find detailed steps here.
Specify your API key in the application manifest android/app/src/main/AndroidManifest.xml

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API\_KEY"
               android:value="YOUR API KEY"/>

import the package and you can now add a GoogleMap widget to your widget tree.

**import**'package:google\_maps\_flutter/google\_maps\_flutter.dart';

**void** main() => runApp(MyApp());

**class**  **MyApp**  **extends**  **StatelessWidget** {
**@override**
  Widget build(BuildContext context) {
**return** MaterialApp(
      title: 'Demo',
      home: MapSample(),
    );
  }
}

class MapSample extends StatefulWidget {
@override
\_MapSampleState createState() => \_MapSampleState();
}

class \_MapSampleState extends State<MapSample> {

GoogleMapController mapController;

LatLng \_initialPosition = LatLng(37.42796133588664, -122.885740655967);

void \_onMapCreated(GoogleMapController \_cntrl) async {
mapController = await \_cntrl;
}

return Scaffold(
  appBar: AppBar(
  backgroundColor: Color(0xff2758a1),
  title: Text('Demo'),
  ),
  body: Stack(
    children: <Widget>[
    GoogleMap(
      initialCameraPosition: CameraPosition(target: \_initialPosition, zoom: 10),
      mapType: MapType.normal,
      onMapCreated: \_onMapCreated,
      myLocationEnabled: true,
      myLocationButtonEnabled: true,
      zoomControlsEnabled: false,
      )
     ],
   ),
 );
}

Implementing live location

To implement live location we need to add Flutter Location Plugin . It's a Flutter plugin to easily handle a realtime location in iOS and Android.

Add Flutter Location Pluginas a dependency in your file.

import the package with

**import**'package:location/location.dart';

now we will make use of a listener to get continuous callbacks whenever the device position is changing.

Location location = **new** Location();

location.onLocationChanged.listen((LocationData currentLocation) {
_// Use current location_
});

now let’s add this listener on our _onMapCreated Function with the functionality to animate the camera to each change in the device position.

void \_onMapCreated(GoogleMapController \_cntrl) async {

mapController = await \_cntrl;

locationSubscription = \_location.onLocationChanged.listen((l) {
  mapController.animateCamera(
    CameraUpdate.newCameraPosition(
      CameraPosition(target: LatLng(l.latitude, l.longitude),zoom: 18)),

);

}

Final code

**void** mai() => runApp(MyApp());

**class**  **MyApp**  **extends**  **StatelessWidget** {
**@override**
  Widget build(BuildContext context) {
**return** MaterialApp(
      title: 'Demo',
      home: MapSample(),
    );
  }
}

class MapSample extends StatefulWidget {
@override
\_MapSampleState createState() => \_MapSampleState();
}

class \_MapSampleState extends State<MapSample> {

GoogleMapController mapController;
Location location = **new** Location();

LatLng \_initialPosition = LatLng(37.42796133588664, -122.885740655967);

void \_onMapCreated(GoogleMapController \_cntrl) async {

mapController = await \_cntrl;

locationSubscription = \_location.onLocationChanged.listen((l) {
  mapController.animateCamera(
    CameraUpdate.newCameraPosition(
      CameraPosition(target: LatLng(l.latitude, l.longitude),zoom: 18)),

);

}

return Scaffold(
  appBar: AppBar(
  backgroundColor: Color(0xff2758a1),
  title: Text('Demo'),
  ),
  body: Stack(
    children: <Widget>[
    GoogleMap(
      initialCameraPosition: CameraPosition(target: \_initialPosition, zoom: 10),
      mapType: MapType.normal,
      onMapCreated: \_onMapCreated,
      myLocationEnabled: true,
      myLocationButtonEnabled: true,
      zoomControlsEnabled: false,
      )
     ],
   ),
 );
}

Reference

Google Map plugin: https://pub.dev/packages/google_maps_flutter location plugin: https://pub.dev/packages/location

Enjoy Coding ……………!

Android Wireless Debugging (Flutter + MAC + VsCode)

NIBRAS NAZAR — Fri, 08 May 2020 13:23:27 +0000

This article is purely for Mac Users who develop flutter apps in MacBook with VScode.

Follow the steps below to get done.

Step 1: Install ADB

ADB stands for “Android Debug Bridge,” and it is a command-line tool that is used to communicate with a smartphone, tablet, smartwatch, set-top box, or any other device that can run the Android operating system (even an emulator). The computer with ADB can send commands to our device through the USB cable and wirelessly for debugging

the easiest way to install ADB is

Install homebrew

ruby -e "$(curl -fsSL [https://raw.githubusercontent.com/Homebrew/install/master/install](https://raw.githubusercontent.com/Homebrew/install/master/install))"

Install ADB

brew cask install android-platform-tools

run adb --versioncommand in terminal to ensure ADB has been installed

Step 2: Install ADB interface for VScode

Search for ADB interface in the Extensions of VScode

Select the above Extension and install

Step 3: Wireless debugging

Before we start wireless debugging make sure that your android phone is in developer mode and “debugging” and “wireless debugging” options are toggled on.

Also, both the computer and android device must be connected to the same WiFi.

Now follow the steps given below…

Open VScode
Connect an Android device to the computer using a USB cable
Open Command Palette ( command + shift + P)

Select the commands given below from the command palette

‘ADB: Disconnect from any device’
‘ADB: Reset connected devices port to:5555

Now disconnect the Android device from the computer and Select the command below from the Command Palette

‘ADB: Connect to device IP’

Enter the IP address of the Android device when prompted

(you can find the IP address of the android device from its *settings>status )

You may have to wait for a while to start.

Enjoy Android wireless debugging……………

Flask: Before and After request Decorators

NIBRAS NAZAR — Thu, 30 Apr 2020 12:53:40 +0000

In addition to static and dynamic routes to functions/views using the @app.route() decorator, Flask empowers us with several powerful decorators to supplement the routes we create with .route(). In this article, we will look at some ways to run functions before and after a request in Flask using the decorators

before_request
after_request

before explaining those, let’s write a very basic flask application

from flask import Flask

app = Flask(\_\_name\_\_)

@app.route("/")
def index():
    print("Index running!")

if \_\_name\_\_ == "\_\_main\_\_":
    app.run()

So whenever a request to the root (“/”) is made, we would see the output shown below.

Index running!

We make use of before_request and after_requestIf we want any specific task to get executed before and after the request respectively.

before_request

The before_request decorator allows us to execute a function before any request. i.e, the function defined with the .before_request() decorator will execute before every request is made.

We can do this by decorating a function with @app.before_request:

@app.before\_request
def before\_request\_func():
    print("before\_request executing!")

after adding this function, we get the following output whenever we try to make a request to the route (“/”).

before\_request executing!
Index running!

we can make use of this function in cases like :

Opening database connections.
tracking user actions
adding a “back button” feature by remembering the last page the user visited before loading the next
determining user permissions, etc……

before_request are not required to return anything, however, If a before_request function returns a value, it will be considered as if it was the return value for the view and any further request handling is stopped.

after_request

The after_request decorator works in the same way as before_request decorator, except, It allows us to execute a function after each request.

let us see an example by adding this function to our application:

@app.after\_request
def after\_request\_func(response):
    print("after\_request executing!")
    return response

by making a request to any route on our application we would see the following output:

before\_request executing!
Index running!
after\_request executing!

after_request functions must take and return an instance of the Flask response class.

this function can be used in cases like :

close a database connection
To alert the user with changes in the application, etc….

Any functions decorated with after_request will NOT run if the application throws an exception.

Our application :

from flask import Flask

app = Flask(\_\_name\_\_)

@app.before\_request
def before\_request\_func():
    print("before\_request executing!")

@app.after\_request
def after\_request\_func(response):
    print("after\_request executing!")
    return response

@app.route("/")
def index():
    print("Index running!")

if \_\_name\_\_ == "\_\_main\_\_":
    app.run()

for more you can visit the flask documentation page here https://flask.palletsprojects.com/en/1.1.x/

JavaScript Execution Context

NIBRAS NAZAR — Fri, 17 Apr 2020 12:13:15 +0000

‘JavaScript is the world’s most misunderstood programming language.’

- Douglas Crockford

This article is for js beginners to understand the concept of order of execution. for that, we need to talk about Execution Contexts.

Prerequisite: knowledge about

Objects
Functions

Execution Contexts

All JavaScript code runs in an environment, and these environments are called Execution Contexts. Imagine an Execution Context as a container or a simple box which stores variables, and in which a piece of our code is evaluated and executed. We can associate each Execution Context as an Object

Global Execution Context is the default Execution Context in which all the code that is not inside of any function is executed. Global execution context is associated with the global object, in the case of a browser, it will be a window object.

firstName == window.firstName //true

Each time a function is called, a new Execution Context( variables and statement to be executed of that function ) is created and stacked up in the Execution Stack. An Execution Stack is the one that holds the Execution Contexts of the currently invoked functions.

An active Execution Context is the one that is at the top of the Execution Stack.

let’s see an example

var name = 'Ron';

function first(){
  var a = 'hello';
  second(); // calling fuction 'second()' 
  var x = a + name;
}

function second(){
  var b = 'hi';
  var y = b + name;
}

first(); // calling function 'first();'

In the beginning, the Execution stack contains Global Execution Context. The variable ‘name’ and function declarations belong to this Global Execution Context.

When the function ‘first()’ is called, its Execution Context gets on to the top of the current Execution Context (global execution context ) and becomes the active execution context.

Function ‘first’ then calls the ‘second()’ before completing its execution and execution context of ‘second’ becomes active.

When function ‘second’ finishes its execution, its Execution Context gets popped off from the Execution Stack and Execution Context of ‘first’ becomes active and continues with its remaining task.

similarly when function ‘first’ finishes its task, its execution context gets popped off from the stack.

As said before, Execution Context can be considered as an object and this object has three properties:

Variable Object
Scope Chain
“This” Variable

Variable Object _— _which will contain function arguments in a variable declaration as well as function declarations.

Scope Chain — contains the current variable objects as well as the variable objects of all its parents;

“This” Variable — reference to the current Execution Context.

When a function is called, a new execution context is put on top of the execution stack, and this happens in two phases:

Creation Phase
Execution Phase

Creation Phase

The Creation Phase includes:

creation of the variable object ( VO ),
creation of the scope chain,
determines the value of “this” variable.

Creation of Variable Object ( VO ) :

The argument object is created, which contains all the arguments that were passed into the function.
The code is scanned for function declarations , and for each function, a property is created in a variable object, pointing to that function.
the code is scanned for variable declarations , and for each variable, a property is created in a variable object and set to “ undefined ”.

The last two points are called “ Hoisting ”.Functions and variables are hoisted in JavaScript, which means that they are available before the execution phase actually starts.

let's see an example….

calculateAge(1996); // function call

function calculateAge(year) { // function declaration
    console.log(2020 - year);
}

output : 
24

The ‘calculateAge’ function is available to use it before the function declaration due to Hoisting.

Creation of Scope Chain :

A Scope defines the access to a variable from a place
Each function creates a scope: space or an environment in which the variables that it defines are accessible.
Lexical scoping: a function that is lexically within another function gets access to a scope of the outer function.

let’s see an example …

var a = 'Hello!';
first();

function first() {
    var b = 'Hi!';
    second();

    function second() {
        var c = 'Hey!';
        console.log(a + b + c);
    }
}

output:
 Hello!Hi!Hey!

Here the function ‘second’ can access the global variables and variables from its parent function ‘first’.

In the creation phase, each execution context object will get exact scope chain, which is basically all the variable objects ( VO )that an execution context has access to, because the variable object (VO) stores all the defined variables and functions. In this example, in the second scope, we have access to the variable object, of the second functions, of the first function, and to global variable object

The global scope will never ever have access to the variables b or c unless we return the values from the functions. So locally scoped variables are not visible to their parent scopes.

The execution stack is different from the scope chain. An Execution Stack is an order in which functions are called but the scope chain is the order in which functions are written in the code

You can find the difference with the example given below

var a = 'Hello!';
first();

function first() {
    var b = 'Hi!';
    second();

function second() {
        var c = 'Hey!';
        third()
    }
}

function third() { //on top of execution stack
  var d = 'John';
  console.log(a+b+c+d); //here b and c not accessible by ScopeChain        
}

Determining ‘this’ Variable :

‘this’ variable is a variable that each and every Execution Context gets and points to an object

In a Regular Function Call , the ‘this’ keyword simply points at the global object (The window object. in the browser )
In a method call , ‘this’ variable points to the object that is calling the method.
the ‘this’ keyword is not assigned a value until the function where it is defined is actually called.

let’s see two examples here….

example 1 :

calculateAge(1985);

function calculateAge(year) {
    console.log(2020 - year);
    console.log(this); // output : window object{}
}

here ‘this’ Variable is the window object because it is a regular function call and object that the function ‘calculateAge’ is attached to is the global object.

example 2 :

var john = {
    name: 'John',
    yearOfBirth: 1990,
    calculateAge: function() {
        console.log(this); // output : john object {}
        console.log(2016 - this.yearOfBirth);
    }
}

john.calculateAge();

here ‘this’ keyword refers to the object that called the method which is the john object. In method call, ‘this’ variable always points to the object that is calling the method.

Execution Phase

The Execution phase includes the execution of the code and the function that generated the current execution context.

The End