DEV Community: tkpranav

Speed up your image heavy website…

tkpranav — Thu, 02 Jul 2020 17:15:05 +0000

Speed up your image heavy website.

1. Resize your image

<img src="image.jpg" alt="full size image" width="200" height="200"/>

<img src="resized\_200x200\_image.jpg" alt="resized image"/>

2. Optimize your image

JPG , PNG and GIF are the most common image formats being used currently

on the web. There is another relatively new image format called WebP that

combines the best of these image formats.

3. Build for mobile

Data suggests that almost 60% of the global traffic originates from mobile

devices. With responsive image tags, using the ‘ srcset ’ and the ‘ sizes ’

attributes of the img tag

4. Load fewer resources

Use lazy loading for your images. Lazy loading basically means that we

defer loading of images that are not required immediately.

5. Use a good CDN for image delivery

How To Validate Forms In Flutter.?

tkpranav — Mon, 29 Jun 2020 16:51:55 +0000

NEED:

To show that something is wrong with the submitted data, we use form validation.

Widgets Used:

Form
TextFormField

Lets go to the Steps:

STEP 1:

Inside your project, add a Scaffold with a Floating Action Button.

We use this button to submit and validate the form.

STEP 2:

Add a Form widget to the body of the Scaffold.Give a global key to this form to validate it from anywhere.

After that, add two TextFormField’s to the form.

STEP 3 :

Apply decoration and onChanged method to these Text Form Fields.

Then add the validator, which will validate the submitted string.

STEP 4 :

At last, when we press the FAB , we need to validate the form.

So, inside OnPressed method of FAB, carryout the validation of the form.

And DONE ..!

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

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.