Flutter / GetX Basics / STEP4: API Integration
STEP4: API Integration
-
Steps
1. Package
add http package in pubspec.xml
dependencies: flutter: http: 2. constants
util/constants.dart
const urlBase = 'https://reqres.in/api/'; const urlLogin = 'login'; const urlUserList = 'users?page=1'; 3. Service
lib/apis/request.dart
import http package
import 'package:http/http.dart' as http; define class and constructor
class Request { final String url; final dynamic body; Request({this.url, this.body}); } Define functions
complete codeFuture post() { return http.post(urlBase + url, body: body).timeout(Duration(minutes: 2)); } Future get() { return http.get(urlBase + url).timeout(Duration(minutes: 2)); } import 'package:flutter_api_calling_using_getx/util/constants.dart'; import 'package:http/http.dart' as http; class Request { final String url; final dynamic body; Request({this.url, this.body}); Future post() { return http.post(urlBase + url, body: body).timeout(Duration(minutes: 2)); } Future get() { return http.get(urlBase + url).timeout(Duration(minutes: 2)); } } 4. controller
controllers/login_controller.dart
define class
class LoginController extends GetxController { } declare the variable for form fields
TextEditingController emailTextController; TextEditingController passwordTextController; assign the controller
@override void onInit() { emailTextController = TextEditingController(); passwordTextController = TextEditingController(); super.onInit(); } define apilogin()
Complete codevoid apiLogin() async { Get.dialog(Center(child: CircularProgressIndicator()), barrierDismissible: false); Request request = Request(url: urlLogin, body: { 'email': emailTextController.text, 'password': passwordTextController.text }); request.post().then((value) { Get.back(); Get.off(() => HomeScreen()); print(value.body); }).catchError((onError) {}); } import 'package:flutter/material.dart'; import 'package:flutter_api_calling_using_getx/apis/request.dart'; import 'package:flutter_api_calling_using_getx/screens/home_screen.dart'; import 'package:flutter_api_calling_using_getx/util/constants.dart'; import 'package:get/get.dart'; class LoginController extends GetxController { TextEditingController emailTextController; TextEditingController passwordTextController; @override void onInit() { emailTextController = TextEditingController(); passwordTextController = TextEditingController(); super.onInit(); } void apiLogin() async { Get.dialog(Center(child: CircularProgressIndicator()), barrierDismissible: false); Request request = Request(url: urlLogin, body: { 'email': emailTextController.text, 'password': passwordTextController.text }); request.post().then((value) { Get.back(); Get.off(() => HomeScreen()); print(value.body); }).catchError((onError) {}); } @override void onClose() { emailTextController?.dispose(); passwordTextController?.dispose(); super.onClose(); } } 5. Screen
screens/login_screen.dart
create class
class LoginScreen extends StatelessWidget { @override Widget build(BuildContext context) { } } login controller
Complete codeimport 'package:flutter_api_calling_using_getx/core/controllers/login_controllers.dart'; class LoginScreen extends StatelessWidget { final LoginController _loginController = Get.put(LoginController()); } import 'package:flutter/material.dart'; import 'package:flutter_api_calling_using_getx/common_components/default_button.dart'; import 'package:flutter_api_calling_using_getx/core/controllers/login_controllers.dart'; import 'package:get/get.dart'; import 'package:google_fonts/google_fonts.dart'; class LoginScreen extends StatelessWidget { static String routeName = "/login_screen"; final LoginController _loginController = Get.put(LoginController()); final _formKey = GlobalKey (); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: AppBar( title: Text( 'GetX Login', ), ), body: Container( padding: EdgeInsets.all(16), child: Form( key: _formKey, child: Column( children: [ TextFormField( controller: _loginController.emailTextController, keyboardType: TextInputType.emailAddress, decoration: InputDecoration( fillColor: Colors.grey[200], filled: true, hintText: 'Email', hintStyle: GoogleFonts.exo2( fontSize: 16, color: Colors.grey, fontWeight: FontWeight.normal, ), border: OutlineInputBorder( borderRadius: BorderRadius.circular(10), borderSide: BorderSide( color: Colors.transparent, width: 0, ), ), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(10), borderSide: BorderSide( color: Colors.transparent, width: 0, ), ), ), style: GoogleFonts.exo2( fontSize: 16, color: Colors.black, fontWeight: FontWeight.normal, ), validator: (value) => value.trim().isEmpty ? 'Email required' : null, ), SizedBox(height: 16), TextFormField( controller: _loginController.passwordTextController, keyboardType: TextInputType.text, obscureText: true, decoration: InputDecoration( fillColor: Colors.grey[200], filled: true, hintText: 'Password', hintStyle: GoogleFonts.exo2( fontSize: 16, color: Colors.grey, fontWeight: FontWeight.normal, ), border: OutlineInputBorder( borderRadius: BorderRadius.circular(10), borderSide: BorderSide( color: Colors.transparent, width: 0, ), ), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(10), borderSide: BorderSide( color: Colors.transparent, width: 0, ), ), ), validator: (value) => value.trim().isEmpty ? 'Password required' : null, style: GoogleFonts.exo2( fontSize: 16, color: Colors.black, fontWeight: FontWeight.normal, ), ), SizedBox(height: 16), DefaultButton( text: 'Login', press: () { if (_formKey.currentState.validate()) { _loginController.apiLogin(); } }) ], ), ), ), ); } }