DEV Community: Innovation Incubator

FLUTTER: 6 excellent ways to implement Image widget

tkpranav — Sat, 20 Jun 2020 14:09:10 +0000

Flutter Image Widget

You can use the Flutter Image widget in 6 ways such as FadeInImage , Ink Image , Asset Image , Network Image , Memory Image , and File Image. We will see how we can use the Flutter Image widget in a much better way. Image widget is an essential widget in Flutter because without image you cannot develop a beautiful app. Images express the content better than text.

1. Flutter Network Image

Network Image widget uses the internet to show the image, you can use any URL of an image to display the image. It is better to use Network Image over Asset Image because it reduces the app size, you don’t have to keep any images in the app.

Now you have to create main.dart file which will be used to demonstrate the all the widget example.

main.dart

import 'package:flutter/material.dart';
import 'package:flutter\_image\_widget/image\_widget/assets\_image\_widget.dart';
import 'package:flutter\_image\_widget/image\_widget/fade\_image\_widget.dart';
import 'package:flutter\_image\_widget/image\_widget/file\_image\_widget.dart';
import 'package:flutter\_image\_widget/image\_widget/ink\_image\_widget.dart';
import 'package:flutter\_image\_widget/image\_widget/memory\_image\_widget.dart';
import 'package:flutter\_image\_widget/image\_widget/network\_image\_widget.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.green),
      debugShowCheckedModeBanner: false,
      home: NetworkImageWidget()
    ),
  );
}

As you can see the main.dart file code, you can replace NetworkImageWidget() from home with our upcoming image widgets and you are ready to run the app. Now create file network_image_widget.dart file, this will be used for network image widget example.

network_image_widget.dart

import 'package:flutter/material.dart';

class NetworkImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Network Image'),
      ),
      body: Container(
        color: Colors.white,
        padding: EdgeInsets.all(16),
        child: Image.network(
          '[https://toppng.com/uploads/preview/batman-png-11553978541s9xp0sddf1.png](https://toppng.com/uploads/preview/batman-png-11553978541s9xp0sddf1.png)',
          frameBuilder: (BuildContext context, Widget child, int frame,
                  bool wasSynchronouslyLoaded) =>
              wasSynchronouslyLoaded
                  ? child
                  : AnimatedOpacity(
                      child: child,
                      opacity: frame == null ? 0 : 1,
                      duration: const Duration(seconds: 2),
                      curve: Curves.easeOut,
                    ),
          loadingBuilder: (context, child, progress) => progress == null
              ? child
              : LinearProgressIndicator(
                  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
                ),
          errorBuilder:
              (BuildContext context, Object exception, StackTrace stackTrace) =>
                  Text('Failed to load image'),

        ),
      ),
    );
  }
}

To display image from URL you have to use Image.network widget, as you can see the above code I have passed the image URL to display the image, apart from URL I have used frameBuilder, loadingBuilder, and errorBuilder. This three property is common to all image widget so I will cover these properties only for network image widget, you do the same with other image widgets.

frameBuilder :- It will display the image with given animation, I have used an AnimatedOpacity widget this will load the image.
loadingBuilder :- This will display another widget until it finishes to load, I have returned the LinearProgressIndicator widget.
errorBuilder :- If you have used the wrong URL or device is not connected to the internet then you can use this property to display another widget.

Note :- Do not use loadingBuilder and frameBuilder at a same time, loadingBuilder will override the frameBuilder.

2. Flutter Asset Image

Assets Image widget uses an image from the root directory of your project, before using any image you have to add image path to pubspec.yaml file. I have created an “images” folder inside the project root directory and added a cover.png file.

pubspec.yaml

flutter:

  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/

Add images folder inside assets tag to access all the images from directory.

Now create asset_image_widget.dart file to display the images from root directory.

assets_image_widget.dart

import 'package:flutter/material.dart';

class AssetsImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Asset Image'),
      ),
      body: Container(
        color: Colors.white,
        child: Image.asset(
          'images/cover.png',

        ),
      ),
    );
  }
}

Now replace NetworkImageWidget from main.dart file with AssetsImageWidget. You can use frameBuilder, loadingBuilder, and errorBuilder with asset image also. Image used Image.asset() widget to display the image.

3. Flutter Memory Image

Memory Image widget is best if you want to display base64Image. As said you can use frameBuilder, loadingBuilder, and errorBuilder with Image.memory() widget. Now create memory_image_widget.dart file and replace it in main.dart file from your previous widget and create image_string.dart file to store the base64 format of the image.

image_string.dart

const base64Image = 'base64Image string';

memory_image_widget.dart

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter\_image\_widget/image\_string.dart';

class MemoryImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Memory Image'),
      ),
      body: Container(
        color: Colors.white,
        child: Image.memory(
          base64Decode(base64Image),
        ),
      ),
    );
  }
}

I have used Image.memory() widget to display the base64Image and base64Decode() function is used to decode the string.

Flutter also supports to Ink Image which will gives the nice and beautiful touch or click effect i.e. ripple effect. You can have ripple effect like Android in Flutter for image widget.

4. Flutter Ripple Effect on Image

create ink_image_widget.dart file, to achieve the ripple effect on the image, make sure that you have replaced the previous widget with InkImageWidget().

ink_image_widget.dart

import 'package:flutter/material.dart';

class InkImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ink Image'),
      ),
      body: Container(
        color: Colors.white,
        child: Material(
          color: Colors.transparent,
          child: Ink.image(
            image: AssetImage('images/cover.png'),
            fit: BoxFit.contain,
            height: 100,
            child: InkWell(
              splashColor: Colors.green.withOpacity(.2),
              onTap: () {},
            ),
          ),
        ),
      ),
    );
  }
}

I have used the Ink.image() widget along with the Material widget to achieve the ripple effect. Note height parameter is important otherwise ripple effect will cover the whole screen.

5. Flutter FadeInImage Widget

FadeInImage widget is used to display the asset image and memory image with a fade animation. This widget loads the image by fading the placeholder image. Create a file fade_image_widget.dart and replace the previous widget in main.dart with FadeImageWidget().

fade_image_widget.dart

import 'package:flutter/material.dart';

class FadeImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fade In Image'),
      ),
      body: Container(
        color: Colors.white,
        child: FadeInImage.assetNetwork(
          placeholder: 'images/cover.png',
          image:
              '[https://toppng.com/uploads/preview/batman-png-11553978541s9xp0sddf1.png](https://toppng.com/uploads/preview/batman-png-11553978541s9xp0sddf1.png)',
        ),
      ),
    );
  }
}

I have used FadeInImage.assetImage() widget you can also use FadeInImage.memoryImage() instead of image path you have use base64Image string in memoryImage widget. Placeholder parameter is used to show the static image util it finishes to load the asset image.

6. Flutter File Image Widget

Flutter has Image.file() widget to display the image from the device, you can use the path_provider package to get the image path from local storage. Now create file_image_widget.dart file and add it to the main.dart.

file_image_widget.dart

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

class FileImageWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('File Image'),
      ),
      body: Container(
        color: Colors.white,
        child: Image.file(
          File(
            'Use Path provider get image from local storage',
          ),
        ),
      ),
    );
  }
}

I have used Image.file() widget along with File class to display the image from local storage.

FLUTTER : DART CHEAT SHEET- Write Smart Code

tkpranav — Sat, 20 Jun 2020 06:11:43 +0000

FLUTTER : DART CHEAT SHEET- Write Smart Code

While writing a long code for some functionality, you know that there will be an easier way to do it.

You might find a few of that in this post or maybe a hint.

This is just the icing, there are many of these functionality pre-built for you.

1. Cascades

Normal Way:

Smart Way:

2. Null -aware operator

Normal Way:

Smart Way:

3. Ternary Operator

Normal Way:

Smart Way:

4. Null -aware operator

Normal Way:

Smart Way:

5. Assert Statement

Normal Way:

Smart Way:

6. Index in List

Normal Way:

Smart Way:

7. Getters

Normal Way:

Smart Way:

8. Exceptions

Smart Way:

Flutter : How to draw with custom painter

tkpranav — Tue, 09 Jun 2020 11:29:27 +0000

Flutter : How to draw with custom painter

What is custom painter ?

Custom painter is used to draw standard as well as custom shapes on the screen and is very powerful, it let’s you draw anything that you can think about.

All you need is a little imagination and a little maths.

Here is a simple basic quick run so you don’t need to worry about technicalities and get straight to painting.

Created with custom painter.

1.Custom Paint.

In widget tree, we only have to add the CustomPaint widget and give it a painter.

2.Custom Painter.

Create MyCustomPainter class and add two required methods.

Paint method defines what we want to draw or paint on the canvas.

ShouldRepaint method defines when we want to repaint the canvas.

Shown below is a simple breakdown image of the canvas:

3. Draw Circle

To draw a circle specify the center, radius and the color of the circle.

4. Rectangle

To draw a rectangle specify center height and width.

How to automatically update IP addresses without using Elastic IPs on Amazon Route:53

NAEEM HADIQ — Tue, 09 Jun 2020 06:21:33 +0000

Here’s a handy way to automatically update an A-Record in Amazon Route 53 whenever an EC2 instance changes IP address.

Scenario: When you have a domain name in Amazon Route 53 pointing to an Amazon EC2 instance. However, if the instance is stopped and started, its public IP address changes. This breaks the A-Record since it is pointing to the wrong IP address.

You could simply use an Elastic IP address

Yes, using an Elastic IP address on the instance will prevent the A-Record from breaking. However, AWS gives a default limit of 5 Elastic IP addresses per region. You can request a limit increase, but in cases, you need a lot of them its still hard and still a pain.

As an example, let's assume a service providing a separate Amazon EC2 instance for each customer, to ensure secure separation of data. Each customer is given a domain name to access their server (x.medium.com). The required number of Elastic IP addresses could be huge.

There is a simple way to do this without elastic ip though there is a fairly simple way to achieve the objective without needing any Elastic IP addresses.

The architecture is quite simple:

When an EC2 instance starts, it should get its new public IP address and update its own record in Route 53
The DNS name to update is stored in a Tag on the EC2 instance
The script should execute every time the EC2 instance starts (that is, every time it starts, not just the first boot)

Implementation

First, there should be a Record Set in Amazon Route 53 that defines the existing domain name.

It is currently pointing to the public IP address of an EC2 instance.

Next, add some tags to the EC2 instance that will be used by the script:

DNS Name: The DNS Name to associate with the instance
Hosted Zone ID: Uniquely identifies the Zone record in Route 53 that needs to be updated (get it from your Route 53 Hosted Zone record)

Whenever the EC2 instance starts, it will run a script that will:

Grab the information from the above tags
Retrieve the instance’s current public IP address
Update the Route 53 record set with the new IP address

#!/bin/bash
# Extract information about the Instance
INSTANCE\_ID=$(curl -s http://169.254.169.254/latest/meta-data/instance-id/)
AZ=$(curl -s http://169.254.169.254/latest/meta-data/placement/availability-zone/)
MY\_IP=$(curl -s http://169.254.169.254/latest/meta-data/public-ipv4/)

# Extract tags associated with instance
ZONE\_TAG=$(aws ec2 describe-tags --region ${AZ::-1} --filters "Name=resource-id,Values=${INSTANCE\_ID}" --query 'Tags[?Key==`AUTO_DNS_ZONE`].Value' --output text)
NAME\_TAG=$(aws ec2 describe-tags --region ${AZ::-1} --filters "Name=resource-id,Values=${INSTANCE\_ID}" --query 'Tags[?Key==`AUTO_DNS_NAME`].Value' --output text)

# Update Route 53 Record Set based on the Name tag to the current Public IP address of the Instance
aws route53 change-resource-record-sets --hosted-zone-id $ZONE\_TAG --change-batch '{"Changes":[{"Action":"UPSERT","ResourceRecordSet":{"Name":"'$NAME\_TAG'","Type":"A","TTL":300,"ResourceRecords":[{"Value":"'$MY\_IP'"}]}}]}'

To execute the script automatically each time the instance starts (as opposed to User Data scripts that only run on the first boot), put the above script in this directory:

/var/lib/cloud/scripts/per-boot/

Finally, the EC2 instance will need an IAM Role assigned that has permission to run the above commands:

{
    "Version": "2020-06-9",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "ec2:DescribeTags",
            "Resource": "\*"
        },
        {
            "Effect": "Allow",
            "Action": "route53:ChangeResourceRecordSets",
            "Resource": "arn:aws:route53:::hostedzone/HOSTED-ZONE-ID"
        }
    ]
}

How to test

To test the script, simply Stop the instance then Start it again.

This will result in a new public IP address being assigned to the instance. The script will call Amazon Route 53 to update the record set. This might take a minute to update.

Then, return to Route 53 and look at the IP address assigned to the A-Record. It should be updated with the new IP address.

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 ……………!

How To Make API Request In Flutter.?

tkpranav — Tue, 26 May 2020 14:03:00 +0000

What all we need ….??

http package to make the request.
dart:convert to process the response from server.

So now let’s make an App that will make API request to get the List of ToDo’s.

And then we will display the first ToDo.

Let’s get into the steps:

1. Creating UI.

Create a ListTile , that will show our ToDo and a button which will make API request.

2. Making Request.

Create a method ,which will make API request.

3. Processing Data.

Now, we have to process the response, so we can use it easily.

4.Updating UI

Update the UI with received data.

5. Functionality

At last, add functionality to the Raised Button

The URL i have used above provides dummy API’s for trial

Also don’t forget to mention the http package in the pubspec.yaml file.

Why you should choose/ consider to move to Flutter?

tkpranav — Fri, 15 May 2020 12:44:35 +0000

At present the rate at which Flutter apps are published on Google Play continues to increase. Flutter is becoming a hot topic and, whether you decide to use it or not, if you want to develop or improve your mobile app, you should be aware of what Flutter is, as well as what pros & risks it carries. Let’s go for a quick roundup.

What is Flutter?

Flutter is Google’s mobile app SDK, complete with a framework, widgets, and tools, that gives developers an easy way to build and deploy visually attractive, fast mobile apps on both Android and iOS platforms.Flutter enables a smooth and easy cross-platform mobile app development.

What’s more, Flutter:

Is free and open source,
Is based on Dart — a fast, object-oriented programming language which is in itself easy to learn,
Provide its own widgets, drawn with its own high-performance rendering engine. They are fast, pretty, and customizable,
Thanks to the rich widgets, Flutter apps look and feel great (you can create your own custom app design, but also use readily available UI elements following specific platforms’ guidelines).
The architecture of Flutter is based on the very popular reactive programming of today (the same that React has been made from)

Why Flutter?

1. Faster code writing

For developers, Flutter means faster & more dynamic mobile app development. We can make changes in the code and see them straight away in the app! This is the so-called Hot reload, which usually only takes (milli)seconds and helps teams add features, fix bugs, and experiment faster. It is one of the things about Flutter loved by every development team.

In other words, with Flutter, your designer or tester can work together with a developer on the UI, making changes — for example, “Put it 2 pixels right” or “Make the animation faster” — and see them immediately.

Most types of code changes can be hot reloaded. But there is a list of changes that require a full restart: Hot reload Limitations.

Whereas, in the case of native app development the project needs to be rebuilt and that takes much more time. You have to wait for every single change — sometimes, even up to several minutes.

2. One code for 2 platforms

Developers write just one codebase for your 2 apps — covering both Android and iOS platforms. Flutter doesn’t depend on the platform, because it has its own widgets and designs. This means that you have the same app on two platforms. Yet what’s important is that if you want to differentiate your apps, it’s possible.

3. Faster apps

Flutter apps work in a smooth and fast way, without hanging and cutting while scrolling. Also, check out this amazing page in the Flutter documentation that talks about best practices for app performance.

4. Less testing

If you have the same app for 2 platforms, it means less testing! The Quality Assurance process can be faster. Because of one codebase, the developers write automatic tests only once. What’s more, Quality Assurance specialists have less work to do, because they have only one app to check. Of course, if your apps have some differences, they need to be tested on both platforms.

5. The same app UI on older devices

Your new app will look the same, even on old versions of Android and iOS systems. There are no additional costs for supporting older devices. Flutter runs on Android Jelly Bean or newer, as well as iOS 8 or newer.

6. Perfect for MVP

Do you need an MVP (Minimum Viable Product) for your app to show it to your investors? Flutter will be perfect, especially if you have little time.

If you want to see some apps built with Flutter, check out the Flutter Gallery app, which is a demo of some of Flutter’s features, widgets, and vignettes.

7. Using Dart as a Programming Language

Dart is an object-oriented programming language which is used for writing mobile application code for Flutter and which contributes to the efficiency and effectiveness of app development flow. It is a comfortable language and uses a lot of CSS parts as well. Dart uses for generational garbage collection which helps in creating frames for short-lived objects. It also helps to allocate the objects with a single pointer bump to avoid UI jank and shutter.

8. The flutter API is very consistant

AnimationBuilder, FutureBuilder, StreamBuilder,…Once you understand them you have no limit. Anything is a widget. A button can use as a screen, a full page used as a button with animation and transformation.

9. The customizable kit of widgets

Flutter has built with a rich and customizable set of widgets for Android, IOS and Material Design. The collaboration between Flutter and Google’s material design has rendered and easily create powerful UI experience. This help to create smooth, crisp and refined app experience as are available with a native app.

Here are a few apps made using flutter framework:-

1. Google Ads

With Google Ads, you can view your ad campaign stats like impressions, clicks, conversions, manage your bids on campaigns, get real-time alerts and information and get direct support from Google.

Google Play Link | App Store link

2. Xianyu by Alibaba

Xianyu is being used by more than 50+ million users regularly to buy and sell millions of products from an enormous number of categories of products. It helped connect consumers, making the buying and selling process more natural.

https://www.youtube.com/watch?v=jtYk3gWRSw0

3. MedRabbits.

MedRabbits is a Home Healthcare service provider. Which aim to bring fast, convenient and cost effective home healthcare at your doorstep.You can search, sort and book from their curated set of home nurses that specialise in elderly care, maternity care and a lot more.

Google Play link

4. Reflectly

Reflectly is an exciting take on a journal app that helps you store your daily thoughts at one place in an orderly manner. Reflectly tries to give you an overview of your past days and how you’ve improved yourself over time.

Google Play link | App Store Link

5. Watermaniac

Watermaniac is an Android app that helps you keep track of your daily water intake. Using the app, you can set daily goals, know your water intake in the past and be alerted when its time to take the next sip with a notification.

Google Play link

6. Hamilton

Hamilton is the official app for the hit American Broadway musical , showcasing everything related to Hamilton. The app provides all the latest updates about Hamilton, videos, bits of information, daily trivia, fun stickers for chat, access to merchandise and also gives access to its lottery section for its three cities and tour locations.

Google Play link | App Store link

In my opinion, Flutter has many more advantages for business and development teams than risks. It’s a great chance to build beautiful, high-performance and outstanding mobile apps that fit your custom needs and requirements. It’s worth considering Flutter, especially if you want an app both for iOS and Android.

Flutter — Installation (Windows/MacOS)

tkpranav — Fri, 08 May 2020 22:02:05 +0000

Flutter — Installation (Windows/MacOS)

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single code base.

This section is a step by step guide for installing Flutter on your local computer.

Installation in Windows:

Step 1 − Go to URL,https://flutter.dev/docs/get-started/install/windows and download the latest Flutter SDK. The file is flutter_windows_1.17.0-stable.zip.

Step 2 − Unzip the zip archive in a folder, say C:\src\flutter\

Step 3 −Now update the system path to include flutter bin directory.

Now to access flutter from any terminal, set the SDK path in environmental variables(type “env” in start menu, go to edit environmental variable. Once the env tab is open select path and click edit. Now add your SDK location: here it would be C:/src/flutter/bin).

So now open your windows terminal and type “ flutter --version”. This would display your flutter version and details, if not verify the env path you have provided.

Step 4 − Flutter provides a tool, flutter doctor to check whether all the requirement of flutter development is met.

Type “flutter doctor” on your prompt and it will display the list of completed installations and the pending or error ones.

The report says that all development tools are available but the device is not connected. We can fix this by connecting an android device through USB or starting an android emulator.

Step 6 − Install the latest Android SDK, if reported by flutter doctor.

Step 7 − Install the latest Android Studio, if reported by flutter doctor.

Step 8 − Start an android emulator or connect a real android device to the system.

Step 9 − Install Flutter and Dart plugin for Android Studio. It provides startup template to create new Flutter application, an option to run and debug Flutter application in the Android studio itself, etc.,

Open Android Studio.
Click File → Settings → Plugins.
Search for Flutter plugin and click Install.
Click Yes when prompted to install the Dart plugin.
Restart Android studio.

Installation in MacOS :

To install Flutter on MacOS, follow the following steps :

Step 1 − Go to the URL,https://flutter.dev/docs/get-started/install/macos and download latest Flutter SDK. The file is flutter_macos_1.17.0- stable.zip.

Step 2 − Unzip the zip archive in a folder, say /path/to/flutter

$ cd ~/development
$ unzip ~/Downloads/flutter\_macos\_1.17.0-stable.zip

If you don’t want to install a fixed version of the installation bundle, you can skip steps 1 and 2. Instead, get the source code from the Flutter repo on GitHub, and change branches or tags as needed. For example:

$ git clone [https://github.com/flutter/flutter.git](https://github.com/flutter/flutter.git) -b stable

Step 3 − Update the system path to include flutter bin directory (in ~/.bashrc file).

$ export PATH="$PATH:`pwd`/flutter/bin"

Step 4 − Enable the updated path in the current session using below command and then verify it as well.

source ~/.bashrc
source $HOME/.bash\_profile
echo $PATH

Flutter provides a tool, flutter doctor to check whether all the requirement of flutter development is met.

Run flutter doctor

Run the following command to see if there are any dependencies you need to install to complete the setup (for verbose output, add the -v flag):

$ flutter doctor

This command checks your environment and displays a report to the terminal window. The Dart SDK is bundled with Flutter; it is not necessary to install Dart separately. Check the output carefully for other software you might need to install or further tasks to perform (shown in bold text).For example:

Step 5 − Install latest XCode, if reported by flutter doctor.

Step 6 − Install latest Android SDK, if reported by flutter doctor.

Step 7 − Install latest Android Studio, if reported by flutter doctor.

Step 8 − Start an android emulator or connect a real android device to the system to develop android application.

Step 9 − Open iOS simulator or connect a real iPhone device to the system to develop iOS application.

Step 10 − Install Flutter and Dart plugin for Android Studio. It provides the startup template to create a new Flutter application, option to run and debug Flutter application in the Android studio itself, etc.,

Open Android Studio
Click Preferences → Plugins
Select the Flutter plugin and click Install
Click Yes when prompted to install the Dart plugin.
Restart Android studio.

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……………

Agora.io: Creating a Basic Video Chat Room.

tkpranav — Thu, 30 Apr 2020 12:56:23 +0000

In this tutorial, I’m showing about how to create your own video chat room with agora.io.

We all make many Apps websites etc.., Now think about integrating a video chat room in your own app or website. You can do it with the help of agora. Here I will explain a short method to do all the stuff easily.

First of all what is Agora.io ??

Agora.io provides a simple and powerful SDK in which you can real-time voice and video communications. We can make the Agora SDK integrate into our websites to enable real-time communications.

Agora is perfect when embedded in social engagement apps.

You can also apply animated stickers, magic mirror and color filters. Take control of everything from UI to stream size and support third-party add-ons like filter, encryption, facial recognition, emojis, and more.

Agora also provides much documentation for developers to use Agora SDKs and sample codes. You can check it here.

Agora provides the first 10,000 minutes free each month. It can be customized easily and easy to implement.

Agora.io mainly Provides,

Video SDK

Voice SDK

Gaming SDK

RTM SDK

Recording Add-on

Click here to see the Agora Platform Overview.

Now Lets Start Building the VideoChat Room

First of all, you should create an account at Agora.io

Click here to create an account.

You can log in with Gmail, Github, Cocos, and even with your email.

Enter your desired project name and then submit. Now your first project is created.

we have now created the project to collect the APPID. We will discuss what is APPID and its uses in this Later.

Now create your own sample website to implement Agora SDK .

This will be the structure of the Application we are developing.

.

├── index.html

├── scripts

│ ├── AgoraRTCSDK-3.0.2.js(Version may vary, check the latest version)

│ └── script.js

└── styles

└── style.css

You should download the latest Agora.io SDK for the Web. Click here to Download.

At First , copy the AgoraRTCSDK-3.0.2.js file which is downloaded to the scripts folder.
And then set up the index.html file by adding the scripts.

Then set up the page.html file in the same way.
Next, go to the Agora.io Console and collect the APP ID.

To get the APP ID, follow these steps

Navigate in the Dashboard tree on the left to Projects > Project List.
Save the App ID from the Dashboard

Now paste the APP ID to the scripts.js folder.

Don’t forget to paste the APP ID you have got. The next step is opening it up.

Type npx serve in the terminal and create a lite server and open it with that the URL.

I have shared the Screenshot of my project below :

Now if you guys click the “join for free” button you will be redirected to another page where the microphones and camera permissions are to be provided.

Your camera will be opened and you can see yourself (if not wait for a few seconds for loading).

Now paste the same URL on another tab and join.So that we can fake a remote user join.

And now you would see two faces of yours.(as the remote user is also yourself.)

So by following these simple steps with the help of agora.io you can implement video chat into your own website successfully.

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/

How to Write a useful Commit Message: A Git Guide

NAEEM HADIQ — Thu, 30 Apr 2020 11:23:15 +0000

Let's start with what commit messages are, they basically are messages or tags given along with a commit statement in git so that reviews are easier and the version log is understandable.

To create a successful and understandable revision history teams must agree upon a common commit convention to use in the project, in the present scenario even personal projects would really be easier with such conventions.

Introduction to version control with Git

Version control refers to maintaining the source code and the software with a history log in stages. It is an unavoidable tool in all modern-day industries.

By far, Git is the most widely used version control system in the world. It is a distributed and actively maintained open source project originally developed in 2005 by Linus Torvalds, the famous creator of the Linux operating system kernel.

New to Git? Check out the official getting started guide.

What is a commit message?

The commit command is used to save changes to a local repository after staging in Git. However, before you can save changes in Git, you have to tell Git which changes you want to save for easier backtracking as you might have made tons of edits. A great way to do that is by adding a commit message to identify your changes.

Commit Options

-m

This option adds a message to commit for easier understanding

git add \*
git commit -m 'new medium blog added'

a or — all

This option adds all existing tracked including new and edited

git commit -a -m "corrected medium blog"

— amend

This option overwrites the last commit with the present staged changes. This should only be done before you push the staged commits to the server.

git commit --amend -m "overwrite previous blog"

Why should you write good commit messages?

You might wonder why to write a good commit message because it's only you or only your team who understand and know what each other is committing. Just imagine a new team working on your project or expanding your team to a scale where each other do not know what you are committing.

A well-crafted Git commits message is the best way to communicate context about a change to other developers working on that project, and indeed, to your future self.

Have you ever tried running git log on one of your old projects to see the “weird and funny ” commit messages you have used since its inception? It can be hard to understand why you made some changes in the past or what some commits even where, you would wish to have known about the techniques earlier.

How to write commit messages with Git

By now you would have understood the commit message format and its syntaxes.

giving smthing like

git commit -m 'Fix:added y to x'

or

git commit -m 'Fix Typo in readme.md'

Would be understandable on smaller fixes but in case of more detailed fixes this would not work out well

Adding a Detailed Commit message

Command line method

git commit -m 'Fix:xyz bug' -m 'Added Moderator to solve xyz bug in main.py'

The first -m option is the subject (short description/Title), and the next is the extended description (body).

How to write good commit messages

There are several conventions used by different teams and developers to write good commit messages. I’ll only outline some general rules and tips for writing commit messages–you have to decide what convention you want to follow. And if you work for a company or contribute to open source, you have to adapt to their convention.

For consistency, you can use one convention for work and another for personal projects as you might change jobs sometime, and the convention might also change.

Be sure to check out this thread for some amazing commit message conventions or add yours to help someone make a decision.

Here’s a great template of a good commit message originally written by Tim pope

Capitalized, short (50 chars or less) summary

More detailed explanatory text, if necessary. Wrap it to about 72
characters or so. In some contexts, the first line is treated as the
subject of an email and the rest of the text as the body. The blank
line separating the summary from the body is critical (unless you omit
the body entirely); tools like rebase can get confused if you run the
two together.

Write your commit message in the imperative: "Fix bug" and not "Fixed bug"
or "Fixes bug." This convention matches up with commit messages generated
by commands like git merge and git revert.

Further paragraphs come after blank lines.

- Bullet points are okay, too

- Typically a hyphen or asterisk is used for the bullet, followed by a
  single space, with blank lines in between, but conventions vary here

- Use a hanging indent

If you use an issue tracker, add a reference(s) to them at the bottom,
like so:

Looks great, right? Here’s how you can make yours great too:

Specify the type of commit:

feat: The new feature you’re adding to a particular application
fix: A bug fix
style: Feature and updates related to styling
refactor: Refactoring a specific section of the codebase
test: Everything related to testing
docs: Everything related to documentation
chore: Regular code maintenance.[You can also use emojis to represent commit types]

Separate the subject from the body with a blank line
Your commit message should not contain any whitespace errors
Remove unnecessary punctuation marks
Do not end the subject line with a period
Capitalize the subject line and each paragraph
Use the imperative mood in the subject line
Use the body to explain what changes you have made and why you made them.
Do not assume the reviewer understands what the original problem was, ensure you add it.
Do not think your code is self-explanatory
Follow the commit convention defined by your team

Conclusion

The most important part of a commit message is that it should be clear and meaningful. In the long run, writing good commit messages shows how much of a collaborator you are. The benefits of writing good commit messages are not only limited to your team, but indeed expand to yourself and future contributors.

Want to learn more about Git and become a professional “version controller”? Check out these excellent resources: