Press "Enter" to skip to content

Flutter : Fetch and Get Json Data from Server API

Here you can learn how to fetch and retrieve data from Json coming from a hosted server API.

  • On you Pubspec.yaml file, Add http dependency (http plugin).
http: ^0.12.0+1
Flutter: Get Data from Json API on Server
  • Import packages like this.
import 'package:http/http.dart' as http;
import 'dart:convert';
  • Use these code to fetch data from server API.
var url ='http://karad.sxxxxxxn.com/get-all-members';
var response = await http.get(url);
var jsonData = json.decode(response.body);
print(jsonData);
  • Now you can see the retrieved data on ‘Run’ screen (on bottom of your android studio).
Flutter Fetch Data from Json API on Server

Use the data as you wish

Full Code for Fetching Data from JSON API hosted on Server

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Future fetchData() async{
    var url ='http://karad.sxxxxxxx.com/get-all-members';
    var response = await http.get(url);
    var jsonData = json.decode(response.body);
    print(jsonData);
  }

  @override
  Widget build(BuildContext context) {
     fetchData();

    return Scaffold(
      appBar: AppBar(
        title: Text('Fetch Data from Json API'),
      ),
    );
  }
}

Learn how to fetch data to a list using Flutter list view builder.

One Comment

  1. zortilonrel zortilonrel 20th April 2021

    Thank you for your own effort on this website. Ellie really loves engaging in internet research and it’s really easy to understand why. I know all about the powerful way you produce vital guidance on the web blog and invigorate contribution from website visitors about this subject matter and our own simple princess is truly studying a whole lot. Enjoy the remaining portion of the year. You’re the one doing a useful job.

Leave a Reply