การใช้งาน Http ดึงข้อมูลจาก Server มาแสดงใน Flutter

import 'dart:math';

import 'package:flutter/material.dart';
  
class Home extends StatefulWidget {
    static const routeName = '/';
 
    const Home({Key? key}) : super(key: key);
  
    @override
    State<StatefulWidget> createState() {
        return _HomeState();
    }
}
  
class _HomeState extends State<Home> {

    // จำลองข้อมูล สร้างลิสรายการ 100 รายการ
    List<String> items = List<String>.generate(100, (i) => 'Item ${i+1}');
  
    @override
    void initState() {
      print("initState"); // สำหรับทดสอบ
      super.initState(); 
    }     

    void _refreshData(){
      setState(() {
        print("setState"); // สำหรับทดสอบ
        Random rng = Random(); // ข้อมูล Random
        int rd_number = rng.nextInt(20); // สุ่มค่าจาก 0 - 20
        print(rd_number); // สำหรับทดสอบ
        // สร้างลิสรายการใหม่
        items = List<String>.generate(rd_number, (i) => 'Item ${i+1}');
      });
    }

    @override
    Widget build(BuildContext context) {
        print("build");  // สำหรับทดสอบ
        return Scaffold(
            appBar: AppBar(
                title: Text('Home'),
            ),
            body: Column(
              children: [
                Container( // สร้างส่วน header ของลิสรายการ
                  padding: const EdgeInsets.all(12.0),
                  decoration: BoxDecoration(
                    color: Colors.teal.withAlpha(100),
                //    borderRadius: BorderRadius.circular(8.0),
                  ),                  
                  child: Row(                  
                    children: [
                      Text('Total ${items.length} items'),
                    ],
                  ),
                ),
                Expanded(
                      child: items.length > 0 // กำหนดเงื่อนไขตรงนี้
                      ? ListView.separated( // กรณีมีรายการ แสดงปกติ
                              itemCount: items.length,
                              itemBuilder: (context, index) {
                                  return ListTile(
                                    title: Text('${items[index]}'),
                                  );
                              },
                              separatorBuilder: (BuildContext context, int index) => const Divider(),                    
                        )
                      : const Center(child: Text('No items')), // กรณีไม่มีรายการ
                  ),
              ],
            ),
              floatingActionButton: FloatingActionButton(// ปุ่มสำหรับดึงข้อมูลใหม่
                  onPressed: _refreshData,
                  child: const Icon(Icons.refresh),
              ),
        );
    }

}

dependencies:
  http: ^1.2.2 

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

<uses-permission android:name="android.permission.INTERNET" />

<manifest xmlns:android...>
 ...
 <uses-permission android:name="android.permission.INTERNET" />
 <application ...
</manifest>

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaeenderit",
    "body": "quia et suscipitnsuscipit recusatecto"
  }
]

class Article {
  final int userId;
  final int id;
  final String title;
  final String body;

  Article({
    required this.userId,
    required this.id,
    required this.title,
    required this.body,
  });

  // ส่วนของ name constructor ที่จะแปลง json string มาเป็น Article object
  factory Article.fromJson(Map<String, dynamic> json) {
    return Article(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }

} 

import 'dart:async'; // สำหรับจัดการข้อมูลแบบ async
import 'dart:convert'; // สำหรับจัดการข้อมูล JSON data

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';  // มีคำสั่งสำหรับจัดการข้อมูลอยู่ background
import 'package:http/http.dart' as http; // ดึงข้อมูลจัดการข้อมูลบนเครือข่าย internet

// สรัางฟังก์ชั่นดึงข้อมูล คืนค่ากลับมาเป็นข้อมูล Future ประเภท List ของ Article
Future<List<Article>> fetchArticle() async {
  // ทำการดึงข้อมูลจาก server ตาม url ที่กำหนด
  final response = await http
      .get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));

  // เมื่อมีข้อมูลกลับมา
  if (response.statusCode == 200) {
    // ส่งข้อมูลที่เป็น JSON String data ไปทำการแปลง เป็นข้อมูล List<Article
    // โดยใช้คำสั่ง compute ทำงานเบื้องหลัง เรียกใช้ฟังก์ชั่นชื่อ parseArticles
    // ส่งข้อมูล JSON String data ผ่านตัวแปร response.body
    return compute(parseArticles, response.body);
  } else { // กรณี error
    throw Exception('Failed to load article');
  }
}

// ฟังก์ชั่นแปลงข้อมูล JSON String data เป็น เป็นข้อมูล List<Article>
List<Article> parseArticles(String responseBody) {
  final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
  return parsed.map<Article>((json) => Article.fromJson(json)).toList();
}

// กำนหดตัวแปรข้อมูล articles
late Future<List<Article>> articles;

@override
void initState() {
  print("initState"); // สำหรับทดสอบ
  super.initState(); 
  articles = fetchArticle(); // ทำตามสัญญา กำหนดค่า โดยให้ไปดึงจากฟังก์ชั่น
}     

void _refreshData(){
  setState(() {
    print("setState"); // สำหรับทดสอบ
    articles = fetchArticle(); // โหลดข้อมูลใหม่
  });
}

@override
Widget build(BuildContext context) {
    print("build");  // สำหรับทดสอบ
    return Scaffold(
        appBar: AppBar(
            title: Text('Home'),
        ),
        body: Center(
          child: FutureBuilder<List<Article>>( // ชนิดของข้อมูล
            future: articles, // ข้อมูล Future
            builder: (context, snapshot) {
              print("builder");  // สำหรับทดสอบ
              print(snapshot.connectionState); // สำหรับทดสอบ
              // กรณีสถานะเป็น waiting ยังไม่มีข้อมูล แสดงตัว loading                  
              if (snapshot.connectionState == ConnectionState.waiting){
                   return const CircularProgressIndicator();
              }			  
              if (snapshot.hasData) {// กรณีมีข้อมูล
                  return Column(
                      children: [
                        Container( // สร้างส่วน header ของลิสรายการ
                          padding: const EdgeInsets.all(5.0),
                          decoration: BoxDecoration(
                            color: Colors.teal.withAlpha(100),
                          ),                  
                          child: Row(                  
                            children: [
                              Text('Total ${snapshot.data!.length} items'), // แสดงจำนวนรายการ
                            ],
                          ),
                        ),
                        Expanded( // ส่วนของลิสรายการ
                              child: snapshot.data!.length > 0 // กำหนดเงื่อนไขตรงนี้
                              ? ListView.separated( // กรณีมีรายการ แสดงปกติ
                                      itemCount: snapshot.data!.length,
                                      itemBuilder: (context, index) {
                                          return ListTile(
                                            title: Text(snapshot.data![index].title),
                                          );
                                      },
                                      separatorBuilder: (BuildContext context, int index) => const Divider(),                    
                                )
                              : const Center(child: Text('No items')), // กรณีไม่มีรายการ
                          ),
                      ],
                    );
              } else if (snapshot.hasError) { // กรณี error
                return Text('${snapshot.error}');
              }
              // กรณีสถานะเป็น waiting ยังไม่มีข้อมูล แสดงตัว loading
              return const CircularProgressIndicator();				  
            },
          ),  
        ),          
        floatingActionButton: FloatingActionButton( // ปุ่มทดสอบสำหรับดึงข้อมูลซ้ำ
            onPressed: _refreshData,
            child: const Icon(Icons.refresh),
        ),
    );
}

snapshot.data![index].title

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;
  
class Home extends StatefulWidget {
    static const routeName = '/';
 
    const Home({Key? key}) : super(key: key);
  
    @override
    State<StatefulWidget> createState() {
        return _HomeState();
    }
}
  
class _HomeState extends State<Home> {

    // กำนหดตัวแปรข้อมูล articles
    late Future<List<Article>> articles;
  
    @override
    void initState() {
      print("initState"); // สำหรับทดสอบ
      super.initState(); 
      articles = fetchArticle();
    }     

    void _refreshData(){
      setState(() {
        print("setState"); // สำหรับทดสอบ
       articles = fetchArticle();
      });
    }

    @override
    Widget build(BuildContext context) {
        print("build");  // สำหรับทดสอบ
        return Scaffold(
            appBar: AppBar(
                title: Text('Home'),
            ),
            body: Center(
              child: FutureBuilder<List<Article>>( // ชนิดของข้อมูล
                future: articles, // ข้อมูล Future
                builder: (context, snapshot) {
                  print("builder");  // สำหรับทดสอบ
                  print(snapshot.connectionState); // สำหรับทดสอบ
                  // กรณีสถานะเป็น waiting ยังไม่มีข้อมูล แสดงตัว loading                  
                  if (snapshot.connectionState == ConnectionState.waiting){
                      return const CircularProgressIndicator();
                  }				  
                  if (snapshot.hasData) {// กรณีมีข้อมูล
                      return Column(
                          children: [
                            Container( // สร้างส่วน header ของลิสรายการ
                              padding: const EdgeInsets.all(5.0),
                              decoration: BoxDecoration(
                                color: Colors.teal.withAlpha(100),
                              ),                  
                              child: Row(                  
                                children: [
                                  Text('Total ${snapshot.data!.length} items'), // แสดงจำนวนรายการ
                                ],
                              ),
                            ),
                            Expanded( // ส่วนของลิสรายการ
                                  child: snapshot.data!.length > 0 // กำหนดเงื่อนไขตรงนี้
                                  ? ListView.separated( // กรณีมีรายการ แสดงปกติ
                                          itemCount: snapshot.data!.length,
                                          itemBuilder: (context, index) {
                                              return ListTile(
                                                title: Text(snapshot.data![index].title),
                                              );
                                          },
                                          separatorBuilder: (BuildContext context, int index) => const Divider(),                    
                                    )
                                  : const Center(child: Text('No items')), // กรณีไม่มีรายการ
                              ),
                          ],
                        );
                  } else if (snapshot.hasError) { // กรณี error
                    return Text('${snapshot.error}');
                  }
                  // กรณีสถานะเป็น waiting ยังไม่มีข้อมูล แสดงตัว loading
                  return const CircularProgressIndicator();				  
                },
              ),  
            ),          
            floatingActionButton: FloatingActionButton( // ปุ่มทดสอบสำหรับดึงข้อมูลซ้ำ
                onPressed: _refreshData,
                child: const Icon(Icons.refresh),
            ),
        );
    }

}

// สรัางฟังก์ชั่นดึงข้อมูล คืนค่ากลับมาเป็นข้อมูล Future ประเภท List ของ Article
Future<List<Article>> fetchArticle() async {
  // ทำการดึงข้อมูลจาก server ตาม url ที่กำหนด
  final response = await http
      .get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));

  // เมื่อมีข้อมูลกลับมา
  if (response.statusCode == 200) {
    // ส่งข้อมูลที่เป็น JSON String data ไปทำการแปลง เป็นข้อมูล List<Article
    // โดยใช้คำสั่ง compute ทำงานเบื้องหลัง เรียกใช้ฟังก์ชั่นชื่อ parseArticles
    // ส่งข้อมูล JSON String data ผ่านตัวแปร response.body
    return compute(parseArticles, response.body);
  } else { // กรณี error
    throw Exception('Failed to load article');
  }
}

// ฟังก์ชั่นแปลงข้อมูล JSON String data เป็น เป็นข้อมูล List<Article>
List<Article> parseArticles(String responseBody) {
  final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
  return parsed.map<Article>((json) => Article.fromJson(json)).toList();
} 

// Data models
class Article {
  final int userId;
  final int id;
  final String title;
  final String body;

  Article({
    required this.userId,
    required this.id,
    required this.title,
    required this.body,
  });

  // ส่วนของ name constructor ที่จะแปลง json string มาเป็น Article object
  factory Article.fromJson(Map<String, dynamic> json) {
    return Article(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }

} 

if (snapshot.hasData){

// มีข้อมูล และต้องเป็น done ถึงจะแสดงข้อมูล ถ้าไม่ใช่ ก็แสดงตัว loading 
if (snapshot.hasData &&  snapshot.connectionState == ConnectionState.done) {