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.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *