Hey Guys, welcome to Proto Coders Point , in this Python Tutorial we will implement qr code generator using pyqrcode library.
What is pyqrcode library/module?
The pyqrcode library is a qr code generator, By using this module we can easily develop QR code with pure python.
This Library can be used for building or creating QR codes, Then you can save the QR coder with is generated as SVG,PNG and plain text.
Let’s begin implementation of the library
Step 1 : Create New Python project or open existing project
Off-Course you need to create a new Python Project to work on this QR code generator tutorial
File > New Project
Step 2 : Create a new Python file to handle QR code generator
You need to create a new python file where you can write python code
Right click on Project > New > Python File
i have created a new python file with name as ” QRCodeGenerator”
Step 3 : Add pyqrcode library in your python project
How to install the pyqrcode module ?
File > Setting > Project Interpretor > Click on ” + ” > Search for “pyqrcode” then select the package and then click on install package button.
Step 4 : open the python file “QRCodeGenerator”
# Import QRCode from pyqrcode
import pyqrcode
from pyqrcode import QRCode
# String which represent the QR code result
s = "www.protocoderspoint.com"
# Generate QR code
url = pyqrcode.create(s)
# Create and save the png file naming "myqr.png"
url.svg("myqr.svg", scale=8)
As you have added or installed the pyqrcode module in your project now you can just import the pyqrcode library and use them in your code.
we have initialized a string “s” that holds a website address.
then pyqrcode.create(s) : Here are we passing the string that holds url of website to create a QR Code in PYTHON
and then this url variable is passed to create a new Image of that QR Code with is been generated.
Final Result
Now just Run the project and you will see a QR Code as below image
you can just scan the QR Code and check the result will open the browser with protocoderspoint.com
Step 2 : Add bot toast dependencies in pubspec.yaml file
Then, once you Flutter project is been created open pubspec.yaml file and you need to add Bot_Toast dependencies
dependencies:
bot_toast: ^2.2.1 //add this line
// version may update check official site for more
then click on Package Get
Step 3 : Import bot toast package
then, when you have successfully added the library into your flutter project, now you will be able to use this bot toast message package where-ever required, just you need to import the bot_toast.dart file.
import 'package:bot_toast/bot_toast.dart';
add this import statement on top of main.dart in your project.
This Snippet Code will show a Notification when user click on the button,
There are various property that can we used eg :
title : show text on the notification
subTitle : shows description
hideCloseButton : their is a close button on the Toast Notification using which user can close immedietly by clicking on close button, we can hide that button by setting it to true.
In this Flutter Tutorial we will learn How to implement QR Code Scanner or Bar code scanner in our Flutter App.
so to make this work we gonna use flutter library called QRSCAN
Introduction on QR Code Scanner Flutter
When it comes to barcode scanner each QR or bar code will contain uinque identity number that are used to identify the product. Using this QR code scanner, flutter app you will be able to find out the data value stored in that bar code or QR code.
In the end of this tutorial, our Flutter app will be able to scan both Barcode as well as QRCode.
Then now Let’s begin implementing QR Scan flutter library
DEMO
Video Tutorial
QR Code scanner in flutter development with Example
A Flutter plugin to scanning. Ready for Android and iOS devices
Step 1 : Add QR Scanner Dependencies in pubspec.yaml file
To make use of this library you need to add the library into your flutter project, to do so you need to add required dependencies in pubspec.yaml file.
dependencies:
qrscan: ^0.2.17
Step 2 : Add Camera Permission for Android
offcourse to make use of any physical device of mobile you firstly need to ask for the permission from the user.
under your project open android > app > src > main > AndroidManifest.xml and just add the below permissions.
Hi Guys welcome to Proto Coders Point In this Flutter Tutorial we gonna implement Flutter Refresh Indicator that help app user to refresh the data by just pull down to refresh listview.
Brief about Refresh Indicator
The refresh indicator will be the parent of its child or children, The progress loading indicator will appear when a user will scroll descentdant is over-scrolled. An animated circular progress indicator is faded into view.
When the user swipe down to refresh the data, the onRefresh callback property is been called.The callback is expected to update the scrollable’s contents and then complete the Future it returns.
I have already implemented this feature in android application.
Let’s begin implementing Refresh Indicator in our Flutter Project.
Flutter Refresh Indicator – A pull to refresh listview with example
Create new Flutter project
offcourse you need to create a new flutter project or just open any existing project, I am using android-studio to implement this widget.
File > New > New Flutter Project
Remove all the Default code that comes, when you create new Flutter project.
Just Copy paste below code in main.dart
The below code is just to get ride of default code generated by flutter.
Find the complete code of RefreshIndicator below at the end of this tutorial.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Refresh Indicator"),
),
body: Container(),
);
}
}
Import async & math package
import 'dart:async';
import 'dart:math';
we are making use of async task and math library.
async package is used so that we can use Future,await and async function.
Math package is used to make use of Random method to generate random numbers.
Variable and method we gonna use
var refreshkey = GlobalKey<RefreshIndicatorState>();
var list;
var random;
GlobalKey : A key that is unique across the entire app. learn more
list : a list that holds array of list data.
random : which holds random number 0 – 10 using Random() method.
initState
This will be called only once when app get open
@override
void initState() {
super.initState();
random = Random();
refreshlist();
}
refreshlist() is an Future async function that refresh the list data, we need to user Future function because onRefresh property of RefreshIndicator accept a Future.
Future<Null> refreshlist() async {
refreshkey.currentState?.show(
atTop:
true); // change atTop to false to show progress indicator at bottom
await Future.delayed(Duration(seconds: 2)); //wait here for 2 second
setState(() {
list = List.generate(random.nextInt(10), (i) => " Item $i");
});
}
Here when user pull down to refresh the list is been re-generate again with new data.
UI Design snippet code
In the below code we have RefreshIndicator as a parent of ListView.builder
SizedBox which has it child as Card() where card color is orange,
This card() Widget has child as Text() widget to show text inside the cards.
Hi Guys, Welcome to Proto Coders Point , In this Flutter Tutorial we will Implement how to display Listview using Flutter Animated List widget with a simple example.
What is Animated List widget in flutter ?
Suppose you have an application that simply show a ListView and some times items may get updated ( inserted or removed from the list but with normal listView application user will not get to know about the update.
For this reason it would be better if we can show some kind of Animation effect while any item is added or removed from the listview, so the user will be aware of the update. In Flutter Development, we can do it easily using AnimatedList Class
In this Flutter Tutorial example, We gonna store the data in :
List<String> where all the data will be stored in Array form.
I am making use of english_words package to randomly generate a work and add it in our list<String>.
Remember you need to add english_words in pubspec.yaml . get Library here
We also need an instance of GlobalKey<AnimatedListState> so that we can store the state of the AnimatedList widget.
Let’s begin implementing AnimatedList in our flutter project.
Demo on how final code looks like
Introduction to basic layout of this project
In this example the layout design is very simple, it contain are Three RaisedButton at the bottom of the app, this button consist of child widget as Icon and Texts. It has functionally such as adding new item or removing the last time or removing all the item from ListView at once.
In the above snippet code of layout , in body property we simply have an empty container(), we need to replace the body with our listview i’e AnimatedList, To be able to build AnimatedList View,
Here we us _listKey as key parameter and number of items as initialItemCount
To be able to insert an item in AnimatedList, we need to first insert it to _data string array, After that, we can insert the aminated list using insertItem. Each Time an item is been added the itemBuilder will be called.
In the above Snippet code, we are keeping note of latest item “itemToRemove”, After that, we are removing that item from _listKey and then finally remove that item from _data List using removeAt() method.
2. Remove All the item from AnimatedList
Likewise to remove all the item from listview, Firstly we are counting total number of item present in _data using length function, then with the help of for loop we are traversing upto last item in _data list and remove all the item from _data List and then just update the AnimatedList.
void _removeAllItems() {
final int itemCount = _data.length;
for (var i = 0; i < itemCount; i++) {
String itemToRemove = _data[0];
_listKey.currentState.removeItem(
0,
(BuildContext context, Animation<double> animation) =>
_buildItem(context, itemToRemove, animation),
duration: const Duration(milliseconds: 250),
);
_data.removeAt(0);
}
}
Complete Code of Flutter AnimatedList View
copy paste the below line of dart code in main.dart
Hi Guys, welcome to Proto Coders Point In this Android Tutorial we will implement an Swipe Down Refresh Layout with helps app user to simple pull down to refresh for new Contents
You might have be using many android application those have added the pull to refresh android UI that helps to reload or refresh the feed contents. Loading new content get refreshed when user swipe the view downwords to load the data. Here when user pull down a small loader icon will be shown at the top of the screen and get disappears when contents get loaded completly.
Swipe Refresh Layout – Android Pull Down to Refresh Library
Finally, Google released an official version of the pull-to-refresh library! It is called SwipeRefreshLayout.
This Library is very useful and easy to use where user can easily swipe down or pull down to refresh for new data or contents in the Views.
In the above lines of xml code we have SwipeRefreshLayout as a parent which is a pull to refresh the layout, in this i have a ListView where all the data will be displayed in list form, you can use any Views in it.
Step 4 : Create a new XML Layout
Then you need an XML file with TextView in it, so that we can display text in listview.
Create a new XML file under res>layout and name it as listview_text.xml
listview_text.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- Single List Item Design -->
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/label"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dip"
android:textSize="16dip"
android:textStyle="bold" >
</TextView>
Step 5 : Add a listener to Swipe Refresh layout – a pull down to refresh class.
Here is a snippet code to add a listener.
Swipe RefreshLayout pullToRefresh = (SwipeRefreshLayout) findViewById(R.id.swipeRefreshLayout);
pullToRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
Data_Function(); // your function call code
}
});
This setOnRefreshListener will get called whenever a user swipe down
Copy paste the below lines of code in main class or where you are using this widget.
main_activity.java
package com.ui.swiperefreshlayout;
import androidx.appcompat.app.AppCompatActivity;
import androidx.swiperefreshlayout.widget.SwipeRefreshLayout;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
SwipeRefreshLayout pullToRefresh;
ListView listView;
String[] mobileArray = {"Android","IPhone","WindowsMobile","Blackberry",
"WebOS","Ubuntu","Windows7","Max OS X"}; //list of data to show in list view
ArrayAdapter adapter;
Handler handler; // handler to show data after some seconds
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
adapter = new ArrayAdapter<String>(this,R.layout.listview_text,mobileArray);
listView = (ListView) findViewById(R.id.listView);
handler = new Handler();
pullToRefresh = (SwipeRefreshLayout) findViewById(R.id.swipeRefreshLayout);
pullToRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
Data_Function(); // your code
}
});
}
public void Data_Function()
{
handler.postDelayed(new Runnable() {
@Override
public void run() {
listView.setAdapter(adapter);
pullToRefresh.setRefreshing(false); // swipe Refresh layout is disabled after first refreshed
}
},3000);
}
}
In the above java code i have
List of array : That holds String values ( Operating System Names )
ArrayAdopter : that holds list of array and an textview layout using which we can set the adoptor to listView.
Handler : To show the data in ListView after some seconds