使用 FutureBuilder 搭配事先定義好的對應物件，透過非同步 http 的方式接收網路上的 Json 資料。

main.dart

import 'package:flutter/material.dart';
import 'package:webservice_client/screens/post_screen.dart';

void main() {
  runApp(const AppEntryPoint());
}

class AppEntryPoint extends StatelessWidget {
  const AppEntryPoint({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        "/post-screen":(context) => const PostScreen()
      },
      initialRoute: "/post-screen",
    );
  }
}

screen/post_screen.dart

import 'package:flutter/material.dart';
import 'package:webservice_client/components/post_text.dart';

class PostScreen extends StatelessWidget {
  const PostScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: PostText(),
    );
  }
}

components/post_text.dart

import 'package:flutter/material.dart';
import 'package:webservice_client/daos/post_dao.dart';
import 'package:webservice_client/models/post.dart';

class PostText extends StatelessWidget {
  const PostText({super.key});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: PostDao.getPosts(),
      builder: (BuildContext context, AsyncSnapshot<List<Post>> asyncSnapshot) {
        List<Widget> widgets = [];
        //print(asyncSnapshot.connectionState);
        //print(asyncSnapshot.hasData);
        if(asyncSnapshot.connectionState == ConnectionState.done) {
          widgets = asyncSnapshot.requireData.map((post){
            return Text(post.toJsonObjectString());
          }).toList();
        }

        return SingleChildScrollView(
          child: Column(children: widgets),
        );
      },
    );
  }
}

daos/post_dao.dart

import 'package:webservice_client/models/post.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class PostDao {
  static Future<List<Post>> getPosts() async {
    var url = Uri.parse('https://jsonplaceholder.typicode.com/posts');
    var response = await http.get(url);

    List<Post> posts = (jsonDecode(response.body) as List<dynamic>).map((jsonObject) {
      return Post.fromJson(jsonObject);
    }).toList();

    return posts;
  }
}

models/post.dart

import 'dart:convert';

class Post {
  int userId;
  int id;
  String title;
  String body;

  Post(this.userId, this.id, this.title, this.body);

  String toJsonObjectString(){
    return jsonEncode({
      "userId": userId,
      "id": id,
      "title": title,
      "body": body
    });
  }

  factory Post.fromJson(dynamic jsonObject) {
    return Post(
      jsonObject['userId'],
      jsonObject['id'],
      jsonObject['title'],
      jsonObject['body'],
    );
  }
}