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 [ 'value' ] ,