Hi Guys, Welcome to Proto Coders Point, if you have seen our last post on how to make an android http request call using okhttp android library, where we have just fetched data from the API which is in JSON format, and just displayed the response.body() in text view.
In this Tutorial post we will show/display the data received by okhttp call a http response data in Simple Listview Adapter.
So to so open AndroidManifest.xml file and the <user-permissioon> Internet.
Snippet code to GET data from URL
OkHttpClient client = new OkHttpClient();
String url = "your api link here";
Request request = new Request.Builder()
.url(url) //request for url by passing url
.build();
client.newCall(request).enqueue(new Callback() {
@Override
public void onFailure(@NotNull Call call, @NotNull IOException e) {
e.printStackTrace();
}
@Override
public void onResponse(@NotNull Call call, @NotNull Response response) throws IOException {
if(response.isSuccessful())
{
// task after data is received
}
}
});
OkHttp will perform best when simple OkHttpClient instance is been created and reused it in program when every needed to make HTTP Calls, This is best each client is given to hold its own connection so this makes the task smooth, fast and easy to load data from server side.
Complete Source Code to make Http Request using OkHttp android library – Part 1
Hi Guys, Welcome to Proto Coders Point, In this Flutter Tutorial we gonna use the HTTP flutter library to Fetch data from the Internet which is in JSON format, and display the data in Flutter ListView builder with ListTile widget.
void getData() async {
http.Response response = await http.get(Uri.parse("https://protocoderspoint.com/jsondata/superheros.json"));
//if response is 200 : success that store
if (response.statusCode == 200) {
String data = response.body; //store response as string
setState(() {
superheros_length = jsonDecode(data)['superheros']; //get all the data from json superheros
print(superheros_length.length); // just printed length of data
});
var venam = jsonDecode(data)['superheros'][4]['power']; // get data from particular index
print(venam);
} else {
print(response.statusCode);
}
}
How to Show/Display data from Server in Flutter listView?
ListView.builder is commonly been used to construct a children’s widgets as much as required depending on the dynamic data you receive from server or API calls.
ListView.builder comes with parameters like
itemCount : describes how many itemBuilder ( widget ) must be created
Step 4 : Specifying the Google API key in AndroidManifest.xml ( ANDROID )
open AndroidManifest.xml file and add the <meta-data> tag inside <application> tag
<manifest ...
<application>
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR KEY HERE"/> // add this line and replace with you API KEY
</application>
</manifest>
Step 5: Specifying API key in AppDelegate.swift ( for iOS)
in iOS you need to Specify Application delegates to make use of google maps services in IOS
To do so navigate ios/Runner/AppDelegate.swift
import UIKit
import Flutter
import GoogleMaps // add this line
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GMSServices.provideAPIKey("YOUR KEY HERE") // add this line replace with your API KEY
GeneratedPluginRegistrant.register(with: self)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
mapType: Specify which kind of map interface do you want to load.
normal.
satellite.
hybrid.
terrain.
initialCameraPosition: This will load the map with initial camera position may be currect location of the users.
onMapCreated: this will create a map with complete controls to the map you can zoom in, zoom out, go to other location in the map and many things under your controls.
Login and Registration form in android using volley
Hi Guys, Welcome to Proto Coders Point, In this android tutorial we will create an android login and Registration form using volley library and phpmyadmin as my database server.
How to keep user logged in android?
In this Android Project i am making used of sharedPreferences to store data of successful logged in uses so that we can keep the user logged in until the user manually logout himself.
Things required for this android mini project.
1. A server: with phpmyadmin installed for database holding.
2. A Hosting: where we will store our server code (.php codes)
3. Android Studio
In this Android Mini Project we gonna make use of Volley Library to Store and Retrieve data form database server using php codes.
Let’s begin creating login and registration form in android studio using volley library
Create a new Android project in android studio
Then, Let’s add the required dependencies in our android project.
Create a new directory named ‘xml‘ under res directory
right click on res > New > Directory > name it as 'xml'
Now under xml folder/directory create a new XML resource file named “network_security_config.xml” and Copy Page the below lines of network confiq code.
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">protocoderspoint.com</domain> //here replace with you localhost server or your domain name
</domain-config>
</network-security-config>
Here you need you replace protocoderspoint.com with your localhost ip address or with your domain address.
Adding Internet Permission
Then, Open AndroidManifest.xml and add the <uses-permission INTERNET />
OK, Now all the basic requirement for this android project is been added.
Login & Registration form in android using volley library.
For this project we need total 3 Activitys and 3 xml files
1. RegistrationActivity
The RegistrationActivity is where user will be able to register himself to get access for the further feature of any android application
2. LoginActivity
After the user Successfully register himself with the app, now a the user is the part of our application services and his data is registered with us in our phpmyadmin database, now the user can easily Login through the app using his login credential.
3. MainActivity
MainActivity is somewhat like any application home page or dashboard.
UI DESIGN for Login, Registration and MainActivity
button_design.xml
create a new Drawable Resource file in drawable folder and name it as button_design.xml and add the following code.
Here is java Volley Snippet code that is used to send and receive data from server.
private void Register()
{
StringRequest stringRequest = new StringRequest(Request.Method.POST, URL_REGISTER,
new Response.Listener<String>() {
@Override
public void onResponse(String response) {
try{
// after success response from server
} catch (Exception e) {
// if any exception is been cought
}
}
}, new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
// if server fails to response on time
}
})
{
@Override
protected Map<String, String> getParams() {
Map<String,String> params = new HashMap<>();
// params.put("name",sname); // passing parameters to server
return params;
}
};
RequestQueue requestQueue = Volley.newRequestQueue(this);
requestQueue.add(stringRequest);
}
The above snippet code is how we send data from application to server and how to deal with the server response.
Here Request.Method.POST describle which Method we gonna use to store or retrieve either GET or POST.
URL_REGISTER : This is the url where out server side code is been kept, for example a url path to the server code.
JAVA CODE for Login,Registration using volley
RegistrationActivity.java
Just change the URL_REGISTER link with your file hosting server path
if you are in localhost your path may be as below :
Hi Guys, Welcome to Proto Coders Point, In this Flutter Tutorial we will integrate Flutter library called Email Validator to validate email address.
Email Validation
Usually Email Validation is done, by a String value that contains alphabets, @ symbols and a .(dot) symbol
For Example: contact@protocoderspoint.com, This email address contains all the characters required to be a perfect/valid email address.
Flutter Email Validation Library
Flutter Comes with awesome and easy to use flutter Library/Plugins. This Email validation flutter library is pre defined class that validated email addresses. You just need to call its class.
This plugin is very easy to use and understand. Visit official site to learn more here
Let’s start adding the library in our Flutter Project.
Adding Dependencies in our project
Open Pubspec.yaml and add the dependencies
dependencies:
email_validator: ^1.0.4 // add this line
Import the email validator dart class
you need to import the email_validator.dart file, where you want to make use validator library.
In my case i have imported it in main.dart file
const String email = 'contact@protocoderspoint.com';
final bool isValid = EmailValidator.validate(email);
print('Email is valid? ' + (isValid ? 'yes' : 'no'));
The above code is snippet code,
Their is a string that holds email address, a boolen type variable that stored true or false based on email address, is the email is valid it will store true else false.(isValid ? ‘yes’ : ‘no’) : is similar to if else statement.
Complete code on Email Validation in flutter
In my flutter project i have 2 dart files.
main.dart is with TextFormField() where we will check if email is valid, if entered email is valid that the user will be navigated to page2.dartmain.dart
Copy paste the below code in main.dart
