Fetching Data from API | HTTP get Request in Flutter | Part - 2

API Link: https://jsonplaceholder.typicode.com/posts

 

Add http package into pubspec.yaml file:

http: ^0.13.5


File: main.dart

 

import 'package:flutter/material.dart';

import 'package:flutter_demo/home_page.dart";


void main() {

  runApp(const MyApp());

}


class MyApp extends StatefulWidget {

  const MyApp({Key? key}) : super(key: key);


  @override

  State<MyApp> createState() => _MyAppState();

}


class _MyAppState extends State<MyApp> {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(),

        body: HomePage(),

      ),

    );

  }

}


File: home_page.dart

 

import 'package:flutter/material.dart';

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

import 'dart:convert';


class HomePage extends StatefulWidget {

  const HomePage({Key? key}) : super(key: key);


  @override

  State<HomePage> createState() => _HomePageState();

}


class _HomePageState extends State<HomePage> {

  List<SamplePosts> samplePosts = [];


  @override

  Widget build(BuildContext context) {

    return FutureBuilder(

      future: getData(),

      builder: (context, snapshot) {

        if (snapshot.hasData) {

          return ListView.builder(

            itemCount: samplePosts.length,

            itemBuilder: (context, index) {

              return Container(

                height: 130,

                color: Colors.greenAccent,

                padding: const EdgeInsets.symmetric(

                  vertical: 10,

                  horizontal: 10,

                ),

                margin: const EdgeInsets.all(10),

                child: Column(

                  crossAxisAlignment: CrossAxisAlignment.start,

                  mainAxisAlignment: MainAxisAlignment.spaceBetween,

                  children: [

                    Text(

                      'User id: ${samplePosts[index].userId}',

                      style: const TextStyle(fontSize: 18),

                    ),

                    Text(

                      'Id: ${samplePosts[index].id}',

                      style: const TextStyle(fontSize: 18),

                    ),

                    Text(

                      'Title: ${samplePosts[index].title}',

                      style: const TextStyle(fontSize: 18),

                    ),

                    Text(

                      'Body: ${samplePosts[index].body}',

                      style: const TextStyle(fontSize: 18),

                    ),

                  ],

                ),

              );

            },

          );

        } else {

          return const Center(

            child: CircularProgressIndicator(),

          );

        }

      },

    );

  }


  Future<List<SamplePosts>> getData() async {

    final response = await http.get(

      Uri.parse(

        'https: //jsonplaceholder.typicode.com/posts',

      ),

    );

    var data = jsonDecode(response.body.toString());


    if (response.statusCode == 200) {

      for (Map<String, dynamic> index in data) {

        samplePosts.add(SamplePosts.fromJson(index));

      }

      return samplePosts;

    } else {

      return samplePosts;

    }

  }

}


File: model.dart

 

// To parse this JSON data, do

//

// final samplePosts = samplePostsFromJson(jsonString);


import 'dart:convert';


List<SamplePosts> samplePostsFromJson(String str) => List<SamplePosts>.from(json.decode(str).map((x) => SamplePosts.fromJson(x)));


String samplePostsToJson(List<SamplePosts> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));


class SamplePosts {

    SamplePosts({

        required this.userId,

        required this.id,

        required this.title,

        required this.body,

    });


    int userId;

    int id;

    String title;

    String body;


    factory SamplePosts.fromJson(Map<String, dynamic> json) => SamplePosts(

        userId: json["userId"],

        id: json["id"],

        title: json["title"],

        body: json["body"],

    );


    Map<String, dynamic> toJson() => {

        "userId": userId,

        "id": id,

        "title": title,

        "body": body,

    };

}


Video Link:

 
Post a Comment (0)
Previous Post Next Post