Hi Guys, Welcome to Proto Coders Point, In this Android Tutorial we will create an App that convert a website into an app.
For this we gonna use webview to display our website
What is Webview in android?
In android a webviewis a component of android Operating system(OS) that allows our application to load and display any website into an application.
This tutorial will be short and simple to understand so let’s begin implementation to display website straight into our android applicaton.
How to Convert Website into Android App ? Follow the Steps.
you can even learn this from below video
Step 1: Create a new Android Project or open Existing Project.
OffCourse you need to create a new android project.
Go to File > New > New Project name the project as “Loading Website android” or as per your choice.
Step 2 : Add Internet Permission
Open AndroidManifest.xml file and add the <user-permission> INTERNET as we gonna load a URL into our android application we do need INTERNET PERMISSION to be set.
paste below inside <manifest> tag in AndroidManifest.xml
Then, Now open MainActivity.xml and add the java code
package com.protocoderspoint.webviewexample;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//find the view
webView = (WebView)findViewById(R.id.webview);
// to load all the web page in app itself use this
webView.setWebViewClient(new WebViewClient());
webView.loadUrl("https://protocoderspoint.com/");
WebSettings webSettings =webView.getSettings();
//if your website is using any javascript that needs to load some script then you need to enable javascript in android application
webSettings.setJavaScriptEnabled(true);
}
@Override
public void onBackPressed() {
// if any previous webpage exist then onback pressed will take care of it
if(webView.canGoBack())
{
webView.goBack();
}else{
//else it will exit the application
super.onBackPressed();
}
}
}
Hi Guys,Welcome to Proto Coders Point, In this Flutter Tutorial we gonna design a beautiful Login UI Screen in Flutter using Velocity X Library developed by Pawan Kumar.
ZStack is a widget of Velocity X that Will simply Overlap the children and display it.
VxBox is a widget of Velocity X that will simple display by default in square shape, you can customize it as per your requirement.
Flutter Sign In with Email
Then, let’s have a look on next button design SignIn with Email which is actual a Card Widget that works as a button.
GestureDetector(
onTap: () {
// perform your action here
print("Sign in Email Clicked");
},
child: 'Sign-In with Email'
.text
.xl
.semiBold
.gray700
.makeCentered()
.card
.rounded
.gray400
.make()
.wh(MediaQuery.of(context).size.width, 65)
.pOnly(left: 20, right: 20, top: 20),
),
Here i have Converted a Text String into a Text Widget using VelocityXmake() property, Then i have wrapped the whole Text widget with card view so that it looks like a button.
Facebook/Google Signin flutter UI Design
Then the last step we will create 2 buttons inside a row widget so that each button get set side by side as how below:
Then, As you can see there are 2 buttons for Facebook SignIn flutter and flutter signIn using google.
Hi Guys, Welcome to Proto Coders Point, In this Flutter Tutorial we will discuss & implement 2 different flutter plugin/library, that is been used to ask use to 5 star rating review in our flutter application.
This library is the best library as it comes with a star rating with touch and even it enables to swipe rating to star review. It’s named as smooth star rating flutter because this library will detect this gesture you make on the flutter star rating icon to give the rating.
This are the feature of this library:
Change the default star icons with your desired Icons.
Give user to rate using half rate or full ( Eg : 2.5 rating or 4.5 rating )
swiping on icon will increment/decrement the rating bar star.
allowHalfRating - Whether to use whole number for rating(1.0 or 0.5)
onRatingChanged(int rating) - Rating changed callback
starCount - The maximum amount of stars
rating - The current value of rating
size - The size of a single star
color - The body color of star
borderColor - The border color of star
spacing - Spacing between stars(default is 0.0)
filledIconData - Full Rated Icon
halfFilledIconData - Half Rated Icon
defaultIconData - Default Rated Icon
2. Flutter Rating Dialog ( Library 2 )
This flutter rating dialog is awesome as it provide beautiful and customizable Rating star icon dialog package for flutter application development.
Installation of Flutter rating dialog plugin
Adding depencencies
Open pubspec.yaml file and all the below raiting dialog depencencies
dependencies:
rating_dialog: ^1.0.0 // add this line
Then, just click on package_get this will download all the required classes in your flutter project.
Import the package class file
Then, after adding the library, you need to import the rating_dialog.dart whereever you need to show rating dialog box.
Snippet Code to show AlertDialogin flutter with rating dialog
void show() {
showDialog(
context: context,
barrierDismissible: true, // set to false if you want to force a rating
builder: (context) {
return RatingDialog(
icon: const Icon(
Icons.star,
size: 100,
color: Colors.blue,
), // set your own image/icon widget
title: "Flutter Rating Dialog",
description: "Tap a star to give your rating.",
submitButton: "SUBMIT",
alternativeButton: "Contact us instead?", // optional
positiveComment: "We are so happy to hear 😍", // optional
negativeComment: "We're sad to hear 😭", // optional
accentColor: Colors.blue, // optional
onSubmitPressed: (int rating) {
print("onSubmitPressed: rating = $rating");
// TODO: open the app's page on Google Play / Apple App Store
},
onAlternativePressed: () {
print("onAlternativePressed: do something");
// TODO: maybe you want the user to contact you instead of rating a bad review
},
);
});
}
The above snippet code has a method show() which have showDialog() widget that will return/display RatingDialog() which is a class of this library.
RatingDialog() widget have various parameters or we can say features.
icon : when you can display your flutter app logo
title: basically to title text
description : text to ask user for there valuable star reviews.
submitButton : will show a simple button for submission of the review.
alternativeButton : you may use this button to navigate user to URL of your company website to know more.
positiveComment : if you select more the 3 star rating then you can show a positive message to user.
negativeComment: if you select 3 or less star rating then you can show different message to user.
onSubmitPressed(){} : what action to be performed when used click of submit review button
onAlternativePressed(){} : where the used should be navigated when user click on more info button.
Complete Source Code with above 2 rating bar dialog example in flutter
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:smooth_star_rating/smooth_star_rating.dart';
import 'package:rating_dialog/rating_dialog.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> {
double rating = 4.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("App Rating stars")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Library First : 'Smooth Star Rating' ",
style: TextStyle(fontSize: 20),
),
SizedBox(
height: 10,
),
SmoothStarRating(
rating: rating,
size: 35,
filledIconData: Icons.star,
halfFilledIconData: Icons.star_half,
defaultIconData: Icons.star_border,
starCount: 5,
allowHalfRating: true,
spacing: 2.0,
onRatingChanged: (value) {
setState(() {
rating = value;
print(rating);
});
},
),
Text(
"You have Selected : $rating Star",
style: TextStyle(fontSize: 15),
),
SizedBox(
height: 15,
),
Text(
"Library Second: 'Rating_Dialog ' ",
style: TextStyle(fontSize: 20, color: Colors.deepOrange),
),
RaisedButton(
onPressed: () {
show();
},
child: Text("Open Flutter Rating Dialog Box"),
)
],
),
));
}
void show() {
showDialog(
context: context,
barrierDismissible: true, // set to false if you want to force a rating
builder: (context) {
return RatingDialog(
icon: const Icon(
Icons.star,
size: 100,
color: Colors.blue,
), // set your own image/icon widget
title: "Flutter Rating Dialog",
description: "Tap a star to give your rating.",
submitButton: "SUBMIT",
alternativeButton: "Contact us instead?", // optional
positiveComment: "We are so happy to hear 😍", // optional
negativeComment: "We're sad to hear 😭", // optional
accentColor: Colors.blue, // optional
onSubmitPressed: (int rating) {
print("onSubmitPressed: rating = $rating");
// TODO: open the app's page on Google Play / Apple App Store
},
onAlternativePressed: () {
print("onAlternativePressed: do something");
// TODO: maybe you want the user to contact you instead of rating a bad review
},
);
});
}
}
Hi Guys, Welcome to Proto Coders Point, In this Flutter Tutorial we will learn how to make a Expandable Card in Flutter using ExpansionTile Widget.
What is Expansion Tile Widget in Flutter ?
Expansion is Similar to Expandable CardView in android,Using this Expansion Tile Widget one can Tap on the card to Expands or just collapses the view of the children inside it.
In other words, Expansion Tile is a simple ListTile with a traling icon or image that works some thing like expands or collapses the tile to open the hidden children widget in it.
Video Tutorial
Snippet Code of ExpansionTile widget Flutter
ExpansionTile(
leading: Icon(FontAwesomeIcons.sign),
title: Text("Expansion Title"),
subtitle: Text(" Sub Title's"),
children: <Widget>[
Text(
"In Children use can use any flutter Widget",
style: TextStyle(fontSize: 20),
),
SizedBox(
height: 20,
),
Center(
child: Text(
"Children Widgets are expanded/ visible when Expansion Tile Widget is Clicked"),
)
],
),
In above, snippet code of ExpansionTile i have included ExpansionTile properties such as title,subtitle,children, and a leading icon.
leading: Leading is the first properties of this widget, here you may include any widgets of your choice, In my case i have added an Icon
title: giving a title to the Expansion tile.
subtitle : giving a subtitle to Expansion tile.
children: <Widget>[] : define widgets inside the Expansion Tile, this children widget will be visiable when user clicks on the expansion tile card.
When user click on the Tile, it expands(open) or collopses(closes).
Result of above snippet code.
Complete Source Code with Example of using Expansion Tile Widget
main.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutterexpandablelibrary/ExpandableCardViewFlutter.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("Expandable Card View Widget"),
),
body: SingleChildScrollView(
child:
MyExpanableCardViewFlutter()), //Wrapped into SingleChildScrollView because when click on TextField keyboard will open and you may get error on screen "bottom overflowed by pixels flutter"
);
}
}
Create a new dart file in lib directory and name it as “MyExpanableCardViewFlutter”
Login-Registration UI Screen using Android Expandable CardView Library
Hi Guys, Welcome to Proto Coders Point, In this Android Tutorial we gonna make use of a Android Library called Expandable CardviewGithub Library, Developed by AleSpero. Using this Android UI Library we will build a simple Login-Registration UI Screen.
Our App will have 2 Expandable cardview:
One for Login UI
another for Registration UI
What is Android Expandable CardView?
This Library is very useful, it lets you to create a simple,fastest way for creating a CardView where you can just insert any custom xml layout which will be poped/expanded.
Eg: Whenever user click on the cardview, a drop down will be animated with the custom XML layout.
Let’s start adding this library in our android project
How to integrate Expandable CardView in android with example?
DEMO OF FINAL RESULT
Step 1: Create a new android Project
ofCourse you need android studio to create a new android project
Open android studio and create a new android project or open any existing project and name it as “expandable cardview android tutorial”
Step 2: Add Required Dependencies / Library
Open your build.gradle(app level) file and in-between dependencies{} add 2 of this library
Here only mandatory/required attributes are inner_view and title. The other attributes are optional.
inner_view : In inner_view you need to just pass the xml layout resources you have just created above.
expandOnClick: Expandable onClick must be set to true is you want the CardView Expandable
app:title : This is optional but if you want then you can specify it by giving title to your cardview.
icon: a small icon will be shown at the starting of the Extendable cardview
startExpanded: this works something like, if you want to set the cardview expanded or closed when the app is been open for first time.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="@drawable/bacgroundimage"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="center"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LogIn / Registration"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:textColor="@android:color/white"
android:textStyle="italic|bold"
android:layout_gravity="center"
android:textSize="20sp"
/>
<com.alespero.expandablecardview.ExpandableCardView
android:id="@+id/expend_Login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:title="Login"
android:layout_marginStart="30sp"
android:layout_marginEnd="30sp"
android:layout_marginBottom="30dp"
app:icon="@drawable/ic_profile"
app:inner_view="@layout/login_layout_view"
app:expandOnClick="true"
app:animationDuration="300"
android:elevation="5dp"
app:startExpanded="false"/> <!-- start Expanded we can set to true if you want this card to expanded on start -->
<!-- Here inner view is link to the view or xml design you want to show, when expanded -->
<com.alespero.expandablecardview.ExpandableCardView
android:id="@+id/expend_Reg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:title="Registration"
android:layout_marginStart="30sp"
android:layout_marginEnd="30sp"
app:icon="@drawable/ic_fiber_new_black_24dp"
app:inner_view="@layout/registration_layout_view"
app:expandOnClick="true"
app:animationDuration="300"
android:elevation="5dp"
app:startExpanded="false"/>
</LinearLayout>
</LinearLayout>
Step 5: Snippet code of using this Expandable CardView
ExpandableCardView ExpandLogin; // create an object if it
OnCreate()
In OnCreate method, initiate the object by using findViewById and point to the view.
//find the view from activity_main
ExpandLogin = (ExpandableCardView)findViewById(R.id.expend_Login);
setOnExpandedListener(……….)
//Listen to Expandable Cardview when card is been expanded or closed
ExpandLogin.setOnExpandedListener(new ExpandableCardView.OnExpandedListener() {
@Override
public void onExpandChanged(View v, boolean isExpanded) {
Toast.makeText(MainActivity.this, isExpanded ? "Expanded!" : "Collapsed!", Toast.LENGTH_SHORT).show();
// do something here
}
});
Step 6 : Complete Code tutorial on Android Expandable CardView
MainActivity.java
Open MainActivity.java and paste the below lines of java codes
package com.protocoderspoint.expandablecardview;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import com.alespero.expandablecardview.ExpandableCardView;
import com.google.android.material.textfield.TextInputEditText;
public class MainActivity extends AppCompatActivity {
ExpandableCardView ExpandLogin;
ExpandableCardView ExpandRegister;
Button SignIn,SignUp;
TextInputEditText Loginemail;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//find the view from activity_main
ExpandLogin = (ExpandableCardView)findViewById(R.id.expend_Login);
ExpandRegister = (ExpandableCardView)findViewById(R.id.expend_Reg);
//Listen to Expandable Cardview when card is been expanded or closed
ExpandLogin.setOnExpandedListener(new ExpandableCardView.OnExpandedListener() {
@Override
public void onExpandChanged(View v, boolean isExpanded) {
Toast.makeText(MainActivity.this, isExpanded ? "Expanded!" : "Collapsed!", Toast.LENGTH_SHORT).show();
Loginemail = (TextInputEditText)v.findViewById(R.id.email);
SignIn = (Button)v.findViewById(R.id.login_ButtonID);
SignIn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//do you staff here onbutton click
Toast.makeText(MainActivity.this, Loginemail.getText().toString(), Toast.LENGTH_SHORT).show();
}
});
}
});
ExpandRegister.setOnExpandedListener(new ExpandableCardView.OnExpandedListener() {
@Override
public void onExpandChanged(View v, boolean isExpanded) {
if(ExpandLogin.isExpanded()) //check is top login expandable card view is expanded
{
ExpandLogin.collapse(); //if yes then close the Expension
}
Toast.makeText(MainActivity.this, isExpanded ? "Expanded!" : "Collapsed!", Toast.LENGTH_SHORT).show();
//initializing the view of inner_view of Expandable cardview android
SignUp = (Button)v.findViewById(R.id.Reg_ButtonID);
//do you staff here onbutton click
}
});
}
}
All set you android app is ready with login UI and Registration UI using the above specified awesome android library.
Flutter Push Notifications using flutter firebase messaging with example
Hi Guys, Welcome to Proto Coders Point, In this Flutter Tutorial we will learn how to implement firebase flutter push notifications service in flutter app.
Using which you can send Firebase Cloud messages to your flutter app user using firebase console that is flutter push notifications.
DEMO OUTPUT
flutter firebase push notification example
Let’s start
Flutter Firebase Push Notification
Step 1: Adding Firebase Messaging dependencies
Using this Flutter Plugin we can use the Firebase Cloud Messaging Service (FCM).
With the use of this plugin, your Flutter application will be ready to process and receive the push notification from the firebase console server as well as data messaging on android and iOS devices.
Give a name to your firebase project as “Firebase-Push-Notification”, Just fill all the common required details for creating the firebase project.
2. Add firebase to your android application
Then, After successful creating firebase project, you will see an Add app with list of platform where you can integrate firebase eg : android, iOS, web, unity3D.
Select Android playform
3. Register app with android package name
Came back to IDE (Android Studio) Navigate towords Androidmanifest.xml file to get android package name
buildscript {
repositories {
google() // add this if not there
jcenter()
}
dependencies {
classpath 'com.google.gms:google-services:4.3.3' //add here line
}
}
as shown in the below screenshot
Note: check if google() repositories is added, if not then add it
Then, open build-gradle(app level)
project > Android > app > build-gradle
Add the google services apply plugin
apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // add the plugin on top or at the bottom og build-gradle (app-level)
