Coders In C

Hey there, Step by step method for calling api in your Flutter application. What is API ? Well in simple terms api is way to connect your server with your android application and access database and perform action on database and retrieve result from server.

YouTube video Example

https://www.youtube.com/shorts/NnhY13mpVeI

Step 1 : Add “Http” package

Open your “pubspec.yaml” file and add “http: ^0.13.4” in side dependencies and in terminal type “flutter pub get” or in vscode save the file it will automatically run “flutter pub get” for you. After finishing package download you will have http package to use in your project. For more info visit official docs of http package

click here Flutter HTTP :

---

Step 2 : Create API calling function (get / post)

In this example i have used my own api end point as url. You can use fake apis or create your own api for calling data from the server.

here is my example – i have created get method for getting Quiz Categories from my dummy server.

getCategory() async {
    Uri url = Uri.parse('https://quicdeal.in/api_ex/get_cat.php');
    var response = await http.get(url);
    print("status code :" + response.statusCode.toString());
    print("status code :" + response.body.toString());

    result = response.body.toString();
    var data = jsonDecode(response.body);
    var data_array = data['data'];
    for (var item in data_array) {
      result += '\n ' + item['id'].toString() + " :" + item['title'];
    }
    print(data['data'][0]['title']);

    setState(() {});
  }

Here you have to call

htpp.get() = for making get requests on server

Uri.parse() = converting your string url into uri for get requests

response = will get the results from the server

jsondecode() = converting string response into map object

Complete Home page source code

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

//package for pubspec.yaml =   http:
//
class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var result = 'result';

  getCategory() async {
    Uri url = Uri.parse('https://quicdeal.in/api_ex/get_cat.php');
    var response = await http.get(url);
    print("status code :" + response.statusCode.toString());
    print("status code :" + response.body.toString());

    result = response.body.toString();
    var data = jsonDecode(response.body);
    var data_array = data['data'];
    for (var item in data_array) {
      result += '\n ' + item['id'].toString() + " :" + item['title'];
    }
    print(data['data'][0]['title']);

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('APi'),
      ),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () {
              getCategory();
            },
            child: Text("Call API"),
          ),
          Text(
            '$result',
            style: TextStyle(fontSize: 40),
          )
        ],
      ),
    );
  }
}