Posts

Showing posts from June, 2024

Implementing User Authentication in Flutter: A Step-by-Step Guide to Login with API

Image
 In this tutorial, we will walk you through the process of implementing user authentication in a Flutter application using an API. We will cover everything from setting up the project to handling login errors gracefully. api_service.dart class ApiService { final String _baseUrl = 'http://hyperquiz.hirenow.co.in/api/login' ; Future < LoginResponse > login ( String username , String password ) async { final url = Uri . parse ( _baseUrl ) ; final headers = { 'Authorization' : 'Bearer 35|3c6l1ZQvk2EGl6kE7TIOHaCRXp6FpuzzSbXFhnBs' , 'Content-Type' : 'application/json' , } ; final body = json.encode ( { 'username' : username , 'password' : password , } ) ; final response = await http.post ( url , headers : headers , body : body , ) ; final Map < String , dynamic > responseData = json.decode ( response .body ) ; if ( response .statusCode == 200 )...

Fetching and Displaying a Single User's Data from an API in Flutter

{ "id" : 1 , "name" : "Leanne Graham" , "username" : "Bret" , "email" : "Sincere@april.biz" , "address" : { "street" : "Kulas Light" , "suite" : "Apt. 556" , "city" : "Gwenborough" , "zipcode" : "92998-3874" , "geo" : { "lat" : "-37.3159" , "lng" : "81.1496" } } , "phone" : "1-770-736-8031 x56442" , "website" : "hildegard.org" , "company" : { "name" : "Romaguera-Crona" , "catchPhrase" : "Multi-layered client-server neural-net" , "bs" : "harness real-time e-markets" } }   Introduction Fetching data from an API and displaying it in a mobile app is a common requirement for many applications. In this tutorial, we will walk you through the steps to fetch data from an API and d...

Displaying API Data in Flutter Without Using FutureBuilder

  import 'dart:convert' ; import 'package:flutter/material.dart' ; import 'package:http/http.dart' as http; void main () { runApp ( const MyApp () ) ; } class MyApp extends StatelessWidget { const MyApp ( { super . key } ) ; @override Widget build ( BuildContext context ) { return MaterialApp ( title : 'Flutter Demo' , theme : ThemeData ( colorScheme : ColorScheme . fromSeed ( seedColor : Colors .deepPurple ) , useMaterial3 : true , ) , home : MyHomePage () , ) ; } } class MyHomePage extends StatefulWidget { MyHomePage ( { super . key } ) ; @override _MyHomePageState createState () => _MyHomePageState () ; } class _MyHomePageState extends State < MyHomePage > { List < StatusItem > _statusItems = [] ; bool _isLoading = true ; String ? _error; @override void initState () { super .initState () ; _fetchData () ; } Future < void > _fetchData () async { ...

Handling and Displaying List Data from an API in Flutter

  Introduction Briefly introduce the topic and explain why handling and displaying list data from an API is a common and useful task in Flutter development. Step 1: Setting Up Your Flutter Project Explain how to create a new Flutter project using flutter create project_name . Mention adding the http dependency in pubspec.yaml . dependencies:   flutter:     sdk: flutter   http: ^0.13.3 class StatusItem { final int id; final String value; final String label; final int status; final int sequence; final String ? deletedAt; final String createdAt; final String updatedAt; StatusItem ( { required this .id, required this .value, required this .label, required this .status, required this .sequence, this .deletedAt, required this .createdAt, required this .updatedAt, } ) ; factory StatusItem . fromJson ( Map < String , dynamic > json ) { return StatusItem ( id : json [ 'id' ] , value : json [ 'va...