Home Blog Page 54

Persistent footer button flutter example

0
Scafford Persistent Footer Button
Scafford Persistent Footer Button

Hi Guys, Welcome to Proto Coders Point, In this flutter tutorial article, will learn how to implement persistent footer button in flutter with example.

In Flutter, We can easily set button or any widget at bottom of app to do that we use persistent footer buttons properties of scaffold widget.

A persistentfooterbuttons are a set of widget that is been displayed at bottom of scaffold body.

As the name “persistent” means continuing exist in the view, so any widget defined inside persistent footer button is persistently visible to user, even if user scrolls to the views.

The persistentFooterButtons properties widget are always rendered above flutter bottomNavigationBar(if used) & it’s below scaffold widget body.

Syntax

Scaffold( 
       body:.........,
       persistentFooterButtons: const [
       // any widget here

      ],
)

How to give space between widget in persistent footer buttons

As any you know, Inside persistent footer you can use any widget like IconButton, Icons, TextWidget, Admob ads at bottom in flutter, and you can use SizedBox() widget to give space between widget in flutter.

Snippet Code

persistentFooterButtons: const [

        Icon(Icons.settings),
        SizedBox(width: 5),
        Icon(Icons.exit_to_app),
        SizedBox(width: 10,),

      ],

As you can see in above snippet code, persistent footer button accepts an arrayList of Widget & don’t have any properties to customize it, It make use of backgroundColor from Scafford Widget body.

Here is how the view got generated.

Complete Source Code with persistent footer button properties used in scafford widget

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false ,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
        appBar: AppBar(
          title: Text("Persistent Footer"),
          centerTitle: true,
        ),
        body: ListView.builder(
            itemCount: 15,
            itemBuilder: (BuildContext context,int index){
              return ListTile(
                  leading: const Icon(Icons.list),
                  title:Text("List item $index")
              );
            }
        ),
        persistentFooterButtons: const [
          Icon(Icons.settings),
          SizedBox(width: 5),
          Icon(Icons.exit_to_app),
          SizedBox(width: 10,),
        ],
        bottomNavigationBar: BottomNavigationBar(
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home,color: Colors.blue,),title: Text("Home",style: TextStyle(color: Colors.black),)),
            BottomNavigationBarItem(icon: Icon(Icons.person,color: Colors.blue,),title: Text("Profile",style: TextStyle(color: Colors.black),)),
            BottomNavigationBarItem(icon: Icon(Icons.chat,color: Colors.blue,),title: Text("Chat",style: TextStyle(color: Colors.black),)),
            BottomNavigationBarItem(icon: Icon(Icons.settings,color: Colors.blue,),title: Text("Settings",style: TextStyle(color: Colors.black),))
          ],
        )
    );
  }
}


Output

That’s all in this flutter article, will explore more on flutter & together build our skills.
Thanks for reading…!

[Solution] Nodemailer not working – username and password not accepted

0
NodeMailer Username PAssword Not Accepted Solution
NodeMailer Username PAssword Not Accepted Solution

Nodejs, nodemailer is not working, returning log error saying: Invalid login: 535-5.7.8 Username and Password w\node_modules\nodemailer\lib\smtp-connection\index.js:1536:34)    not accepted..

response: '535-5.7.8 Username and Password not accepted.

Solution – Why nodemailer is not sending email

-> If your google account is enabled with 2-factor authentication, then you can’t use your regular password as authentication while creating transport auth to access & send email programmatically.

var transporter = nodemailer.createTransport({
    service:'gmail',
    auth:{
        user:'rajatrrpalankar@gmail.com',
        pass:'your regular password'   // instead you should use app specific password here
    }
}); // initialize create Transport service

To send email using nodejs nodemailer you need to generate app-specific login credential(password) & use it as auth password.

How to generate app-specific password for gmail access

To send email from your nodejs script using nodemailer you need to generate app-specific password, using which you can get accessed to your gmail account to send email from nodejs app.

Follow the steps

Login to Google Account, Goto MyAccount (Manage your google Account) -> Security -> App Password

How to generate app password in google account

Select App Passwords,

Select app -> a drop down will appear -> select choose custom name

Give a app custom name as: nodemailer and click on GENERATE button

As you can see above, password for nodemailer auth is created. copy this password & paste it in nodejs script

var transporter = nodemailer.createTransport({
    service:'gmail',
    auth:{
        user:'rajatrrpalankar@gmail.com',
        pass:'paste google app password here'
    }
}); // initialize create Transport service

and BOOM, you can now easily send email using nodejs mailer.

Complete Nodejs Script to Send Email using nodemailer

How to send email from node.js using NodeMailer module

0
Send Email using NodeMailer
Send Email using NodeMailer

Hi Guys, Welcome to Proto Coders Point, You might have went across many web application that has feature of sending email to the users, the mail can be for account verification through OTP or any kind of mail.

In this node.js Tutorial, we will implement a nodejs script to learn how to send email from node.js app by using Nodemailer module library.

In this NodeJS send email Article, will learn how to send email using NodeMailer through Gmail Account. (You can use any mail sending service provider)

What is NodeMailer module

When it comes to send email from web app with nodejs as backend, the most famous & widely used module is nodemailer for sending email from nodejs app.

By using NodeMailer we can send emails with content like plainText, HTML Pages, or File Attachment.

Feature of NodeMailer

  • Secured Emails Delivery.
  • We can embed HTML page in email.
  • Add Attachment in email
  • Various email transport supported (gmail, yahoo mail, mailtrap etc).
  • Zero dependencies on other modules.

Let’s get Started

How to send email using nodemailer example – NODE.JS

There are many modules & packages that helps us in sending emails, from them the most famous & widely used is nodemailer module & one of the favorite module of all the nodejs developer to send email.

Step-by-Step Guide to implement nodejs send email using nodemailer gmail

Step 1: Create NodeJS Project

create a folder for nodejs project & run npm init -y, to generate package.json file.

use below command to do it.

$mkdir email_node

$cd email_node

$npm init -y

Step 2: Install Nodemailer Dependencies

To install the required mailer dependencies run below commond in your terminal

$npm install nodemailer

Step 3: Create javascript file & import required module

To Create file, run:

touch app.js

Import the npm mailer module

const nodejsmailer = require('nodemailer');

Step 4: connect to gmail account using gmail services

initialize create transport using gmail service

var transporter = nodejsmailer.createTransport({
    service:'gmail',
    auth:{
        user:'rajatrrpalankar@gmail.com',
        pass:'<your google account password here>'
    }
});

The above code will simple make a authentication to gmail account by creating transport to send email using nodejs mailer.

Step 5: Sending email using nodemailer through gmail

create a object var that content email details i.e. from, to, subject, & text.

var mailOptions ={
    from:'from----@gmail.com',
    to:'to---@gmail.com',
    subject:"Sending Email to Rajat",
    text:"Welcome to NodeMailer, It's Working",
}  

now simple run sendMail function using transport we that we have created above to send the email

transporter.sendMail(mailOptions,function(error,info){
     if(error){
         console.log(error);
     }else{
         console.log('Email Send ' + info.response);
     }
});

Step 6: (optional) send email with file/attachment

var mailOptions ={
    from:'----from----@gmail.com',
    to:'----to---@gmail.com',
    subject:"Sending Email to Rajat",
    text:"Welcome to NodeMailer, It's Working",
    html: '<h1>Welcome</h1><p>That was easy!</p>',
    attachments: [
        { filename: 'txt.txt', path: './txt.txt' }
     ]
}    // details of to send from, to,  subject, text(message),

Complete Source Code to send email using nodejs script

email_node> app.js

// send an Email from NODEJS Server using nodemailer module
//This tutorial will show you how to use your Gmail account to send an email:

var nodejsmailer  = require('nodemailer'); // use mailer nodejs module

var mailOptions ={
    from:'---from---@gmail.com',
    to:'----to----@gmail.com',
    subject:"Sending Email to Rajat",
    text:"Welcome to NodeMailer, It's Working",
    html: '<h1>Welcome</h1><p>That was easy!</p>',
    attachments: [
        { filename: 'txt.txt', path: './txt.txt' }
     ]
}    // details of to send from, to,  subject, text(message),


var transporter = nodejsmailer.createTransport({
    service:'gmail',
    auth:{
        user:'rajatrrpalankar@gmail.com',
        pass:'<your password>'      // note: always keep password in .env file to keep it hidden
    }
}); // initialize create Transport service

//sends the mail
transporter.sendMail(mailOptions,function(error,info){

     if(error){
         console.log(error);
     }else{
         console.log('Email Send ' + info.response);
     }
});

Result Output

How to Call Native Android Code from Flutter

0
flutter Call Android Native Code
flutter Call Android Native Code

Hi Guys, Welcome to Proto Coders Point, In this Flutter tutorial we will learn how to call Android Native code from Flutter.

Flutter provide a framework that helps us to access platform specific feature, By doing this developer can extend the functionality of flutter framework using android specific code.

You can easily access platform specific code functionality like camera, battery Level, MAC address etc through flutter framework.

Platform specific Architecture flutter framework

How flutter communicate to Native Platform code

Flutter platform specific architecture
Flutter platform specific architecture

The Flutter client, sends message to Host(Native Code i.e. Android/iOS code).

The Host native code listen to Message / Method Channel, receive the message & does the necessary functionality as defined & return the result back to client through method channel


Flutter Call Native Android Code – Easily Example

Let’s create a flutter app that calls Android Specific code and print the message on console & show a Toast message to user from Native code.

Flutter Side Code main.dart

1. Create a new Flutter Project

2. Import services dart classes

import 'package:flutter/services.dart';

3. Create a method channel

static const channel = MethodChannel('yourpackageName/channelName');

Here MethodChannel name should be unique so it better to use your app package name with channelName because it happens unique.

4. A button, that calls a function that invoke native code

Write a Function/Method(), _showToast() that calls and invoke platform method through method channel.

So In below Snippet method, we have used channel.invokeMethod to invoke Native Code

  Future<void> _showToast() async{
    final int callToast = await channel.invokeMethod('showToast',<String,String>{
      'message':'This is a Toast from From Flutter to Android Native Code Yes, It is working'
    });

    print(callToast);
  }

Here showToast key we need to use in android code to detect which method to invoke on android side, and we are also passing message in map form.

Android Module MainActivity.kt

To write android native codde, you need to open flutter – android module in new Window, to do that follow below step as shown in screenshot

flutter project > android > app > src > main > kotlin > MainActivity.kt

open for editing in android studio android module
open for editing in android studio android module

1. Initialize variable

private val CHANNEL = "yourpackageName/channelName";

private lateinit var channel: MethodChannel

2. override configureFlutterEngine

 override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        
        channel = MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL)

        channel.setMethodCallHandler { call, result ->
            var argument = call.arguments() as Map<String, String>;
            var message = argument["message"];
            if (call.method == "showToast") {
                Log.d("TAG", "message");
                Toast.makeText(this, message, Toast.LENGTH_LONG).show()
            }
        }
    }

Here, when flutter send a event through methodChannel, host(android code) will listen to the event, channel it was, and setMethodCallHandler process the data and perform the functionality as defined & return the result back to flutter through method channel.



Flutter Call Native Android Code – Complete Source Code

Flutter – main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  //channel name, used in android code to invoke method
  static const Channel = MethodChannel('yourpackageName/channelName');
  @override
  Widget build(BuildContext context) {
    return Scaffold(
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               Text("Call Native Code to show Toast Message"),
               ElevatedButton(onPressed: (){
                 _showToast();
               },child: Text("Show Toast"),),
             ],
           ),
         ),
    );
  }

  //a method that invoke native code
  Future<void> _showToast() async{
    final int batteryLevel = await Channel.invokeMethod('showToast',<String,String>{
      'message':'This is a Toast from From Flutter to Android Native Code Yes, It is working'
    });

    print(batteryLevel);
  }

}

Android – MainActivity.kt

package com.example.native

import android.util.Log
import android.widget.Toast
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
import java.lang.reflect.Method

class MainActivity: FlutterActivity() {
    private val CHANNEL = "yourpackageName/channelName";

    private lateinit var channel: MethodChannel

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)


        channel = MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL)

        channel.setMethodCallHandler { call, result ->
            var argument = call.arguments() as Map<String, String>;
            var message = argument["message"];
            if (call.method == "showToast") {


                Log.d("TAG", "message");
                Toast.makeText(this, message, Toast.LENGTH_LONG).show()
            }
        }
    }
}


Feature of Microsoft Edge browser that Google Chrome don’t have yet

0
Feature of Edge Browser
Feature of Edge Browser

I used to use Google Chrome as main browser, but now i am thinking to switch from google chrome to microsoft edge since, I found out many cool feature of new edge browser.

In this article, I will list features of microsoft edge browser that Chrome browser don’t have ..Yet!.

In the end, Microsoft Edge vs Google Chrome – which is the best browser? – There is no proper/right answer for it yet.

Exclusive Feature of new Edge Browser

  1. Install Website as App in Windows
  2. OR Code Generator
  3. Microsoft immersive reader Mode
  4. Read ALOUD web page or PDFs files
  5. Scrollable Screenshot
  6. Sidebar Search
  7. Save Collections

1. Install Website as App in Windows

Now you can install regularly used website as app in windows using microsoft edge feature.

install this site as app
install this site as app

It easy to Install website as app:

Settings > Apps > Install this site as an app

Save the app by giving name & create shortcut on desktop, App will get created and will get opened immediately, re-open it from Start-Menu or Desktop.

To uninstall, installed web app, navigate to Settings > Apps > ManageApps


2. QR Code Generator – Edge Feature

Usually we used to make use of any app or a website to generate a QR Code, now you can easily create QR code using microsoft Edge browser itself.

embedded qr code in edge browser

To Generate QR code, Open a URL for which you wish to create qr code, side to url you will see QR logo click on it.


3. Microsoft Immersive Reader Mode in Edge

edge emmersive reader mode

Edge has a super cool and useful feature i.e. Immersive Reader Mode that lets a read to browser a website page without any distraction.

To Switch to edge Immersive reader mode click on book+speak logo or simply press F9 key.


4. Edge Read aloud from webpage or pdf

In Edge Emmersive reader mode, you can make the browser to read the text for you.

Read Aloud is a great feature of edge browser for you to listen to web content/pdf like a podcast show.

edge read aloud feature

5. Scrollable Screenshot – Take full website page Screenshot

Now, take a scrollable screenshort, means, capture full page or selected area of web page, by using “Web Capture” Edge Feature, you can easily scroll down the page conetent that you want as Image Content(image).

To Web Capture, Right click on Website > Web Capture or shortcut ctrl + shift + S.

Select you desired capture mode

Capture Area

Capture Full Website

check the example here


6. Edge Sidebar search

Usually, What we all do is, We just copy a text from a webpage > goto new tab in browser & paste to search the content, but now with edge sidebar search feature, we can simply open a sidebar search directly.

How to: have a look

edge sidebar search feature

7. Edge Save to Collection

Microsoft edge collections is very useful feature of edge, it help use to keep a note of your ideas on a webpage or if you want to keep a note of a page.

You can create a group collection, I mean 1 collection can have multiple web pages stored.

Edge Collection is somewhat similar to bookmarks.


How to uninstall flutter from android studio

0
How to uninstall flutter from android studio
How to uninstall flutter from android studio

Hi Guys, Welcome to Proto Coders Point, In this Article, let’s checkout how to uninstall flutter from Android Studio and windows properly.

Follow the step below & completely uninstall flutter in windows 10 & unistall flutter & dart plugin from android studio IDE.

How to remove flutter from android studio

Step 1: Open Android Studio

Goto file -> Settings (Windows Opens) -> Plugin

In plugin option goto -> Installed tab

how to uninstall flutter plugin from android studio

Step 2: uninstall flutter & dart plugin from android Studio

In Installed Tab, you may see flutter & dart plugin installed, select them individually, side to disable button click on drop down & click uninstall

how to uninstall flutter plugin from android studio

Step 3: Restart Android Studio IDE

After uninstalling flutter & dart, just restart IDE.

Now, you have successfully uninstalled flutter plugin from android studio IDE.

Now you need to delete flutter sdk from windows.


How to Delete Flutter SDK from windows

Search path where you have unzipped flutter SDK files.

If you know where you have unzip flutter sdk just go to that path & delete it and that’s it.

OR

If you don’t remember where is your flutter SDK, you can easily find it by checkin Environment variable path to flutter sdk.

follow below step to goto Envirnoment variable.

  • This PC (Right Click Properties)
  • Advance System Setting
  • Envirnoment Variable
  • System Variable(search for path)
  • click Edit

Check the path where you have kept flutter SDK.

& then remove the path that is set to flutter SDK as shown in above screenshot & also delete the flutter sdk folder and we have successfully installed flutter from windows.