Flutter / Examples / Form Api Integration
FORM API integration
-
Steps
STEP 1: Add http dependencies
Open pubspec.yaml file and add the below lines of code
dependencies: http: ^0.12.0+4 //add this line STEP 2: install http dependencies
'Get dependencies' is shown in the Adroid studio window. Click on it to install new dependencies
STEP 3: import http in the dart file
import 'package:http/http.dart' as http; STEP4 :API call
Complete codeFuture RegistrationUser() async{ // url to registration php script var APIURL = "https://protocoderspoint.com/php/registration.php"; //json maping user entered details Map mapeddate ={ 'name':_name.text, 'email':_email.text, 'phone':_phone.text, 'password':_password.text }; //send data using http post to our php code http.Response reponse = await http.post(APIURL,body:mapeddate ); //getting response from php code, here var data = jsonDecode(reponse.body); print("DATA: ${data}"); } import 'dart:convert'; import 'package:flutter/material.dart'; import 'InputDeco_design.dart'; import 'package:http/http.dart' as http; class FormPage extends StatefulWidget { @override _FormPageState createState() => _FormPageState(); } class _FormPageState extends State { TextEditingController _name = TextEditingController(); TextEditingController _email = TextEditingController(); TextEditingController _phone = TextEditingController(); TextEditingController _password = TextEditingController(); TextEditingController _confirmpassword = TextEditingController(); final GlobalKey _formkey = GlobalKey (); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: SingleChildScrollView( child: Form( key: _formkey, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ CircleAvatar( radius: 70, child: Image.network("https://protocoderspoint.com/wp-content/uploads/2020/10/PROTO-CODERS-POINT-LOGO-water-mark-.png"), ), SizedBox( height: 15, ), Padding( padding: const EdgeInsets.only(bottom:15,left: 10,right: 10), child: TextFormField( controller: _name, keyboardType: TextInputType.text, decoration: buildInputDecoration(Icons.person,"Full Name"), validator: (String value){ if(value.isEmpty) { return "Please enter name"; } return null; }, onSaved: (String name){ }, ), ), Padding( padding: const EdgeInsets.only(bottom: 15,left: 10,right: 10), child: TextFormField( controller: _email, keyboardType: TextInputType.text, decoration:buildInputDecoration(Icons.email,"Email"), validator: (String value){ if(value.isEmpty) { return "Please enter email"; } if(!RegExp("^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+.[a-z]").hasMatch(value)) { return "Please enter valid email"; } return null; }, onSaved: (String email){ }, ), ), Padding( padding: const EdgeInsets.only(bottom: 15,left: 10,right: 10), child: TextFormField( controller: _phone, keyboardType: TextInputType.number, decoration:buildInputDecoration(Icons.phone,"Phone No"), validator: (String value){ if(value.isEmpty) { return "Please enter phone"; } if(value.length < 9) { return "Please enter valid phone"; } return null; }, onSaved: (String phone){ }, ), ), Padding( padding: const EdgeInsets.only(bottom: 15,left: 10,right: 10), child: TextFormField( controller: _password, keyboardType: TextInputType.text, decoration:buildInputDecoration(Icons.lock,"Password"), validator: (String value){ if(value.isEmpty) { return "Please enter password"; } return null; }, ), ), Padding( padding: const EdgeInsets.only(bottom: 15,left: 10,right: 10), child: TextFormField( controller: _confirmpassword, obscureText: true, keyboardType: TextInputType.text, decoration:buildInputDecoration(Icons.lock,"Confirm Password"), validator: (String value){ if(value.isEmpty) { return "Please enter re-password"; } if(_password.text != _confirmpassword.text) { return "Password Do not match"; } return null; }, ), ), SizedBox( width: 200, height: 50, child: RaisedButton( color: Colors.redAccent, onPressed: (){ if(_formkey.currentState.validate()) { RegistrationUser(); print("Successful"); }else { print("Unsuccessfull"); } }, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(50.0), side: BorderSide(color: Colors.blue,width: 2) ), textColor:Colors.white,child: Text("Submit"), ), ) ], ), ), ), ), ); } Future RegistrationUser() async{ // url to registration php script var APIURL = "https://protocoderspoint.com/php/registration.php"; //json maping user entered details Map mapeddate ={ 'name':_name.text, 'email':_email.text, 'phone':_phone.text, 'password':_password.text }; //send data using http post to our php code http.Response reponse = await http.post(APIURL,body:mapeddate ); //getting response from php code, here var data = jsonDecode(reponse.body); print("DATA: ${data}"); } }