lib
├── domain
│   └── books_provider.dart
├── main.dart
└── model
    └── model.dart

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

/// [mocker-serverから、データを取得するクラスを定義]
/// [JSONのデータの中のオブジェクトと同じ名前にする]
class BookList {
  final int id; // idは数字なのでint型
  final String title; // titleは文字なのでstring型
  final String author; // authorは文字なのでstring型

  // コンストラクターを定義
  BookList({required this.id, required this.title, required this.author});

  // 新しいインスタンスを作成し、jsonを解析してデータを
  // 新しいインスタンスに配置します。(公式を翻訳)
  BookList.fromJson(Map<String, dynamic> json)
      : id = json['id'],
        title = json['title'],
        author = json['author'];

  // インスタンスをマップに変換するtoJson()メソッド
  Map<String, dynamic> toJson() => {
        'id': id,
        'title': title,
        'author': author,
      };
}

/// [BookListを型に使いモックサーバーからデータを取得する関数.]
List<BookList> parseBook(String responseBody) {
  // 引数をキャストしてMap型に変換
  final parsed = convert.jsonDecode(responseBody).cast<Map<String, dynamic>>();
  // 配列をmapメソッドでループさせる。
  return parsed.map<BookList>((json) => BookList.fromJson(json)).toList();
}

// インターネットからデータを取得するメソッド
Future<List<BookList>> fetchPosts() async {
  const endpoint = 'http://localhost:3000/bookList/';
  var url = Uri.parse(endpoint);

  var response = await http.get(url);
  if (response.statusCode == 200) {
    // ステータスコードを表示する
    print('ステータスコード: ${response.statusCode}');
    // JSONのデータを表示する
    print('JSONのデータ:  ${response.body}');
    return compute(parseBook, response.body);
  } else {
    throw Exception('Failed to load book');
  }
}

// ステータスコードを表示する
print('ステータスコード: ${response.statusCode}');
// JSONのデータを表示する
print('JSONのデータ:  ${response.body}');

Syncing files to device iPhone 13...
flutter: ステータスコード: 200
flutter: JSONのデータ:  [
  {
    "id": 1,
    "title": "BookListSample",
    "author": "Kboy"
  },
  {
    "id": 2,
    "title": "フリーランスの生き方",
    "author": "Daigo"
  },
  {
    "id": 3,
    "title": "ノマドになってどうなった?",
    "author": "Taisei"
  },
  {
    "id": 4,
    "title": "Flutter別荘の日常",
    "author": "fen"
  },
  {
    "id": 5,
    "title": "ソフトウェアエンジニアリング",
    "author": "イルカ"
  },
  {
    "id": 6,
    "title": "起業家の生き方",
    "author": "yuto315"
  },
  {
    "id": 7,
    "title": "リードエンジニアとは?",
    "author": "あっぷる中谷"
  },
  {
    "id": 8,
    "title": "人生とは何か?",
    "author": "JboyHashimoto"
  }
]
Application finished.

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:http_mock_app/model/model.dart';

// 自動でデータを再取得するよう設定するFutureProvider.
final booksProvider = FutureProvider<List<BookList>>((ref) async {
  // model.dartの関数を呼び出す.
  return fetchPosts();
});

R の 場合< R >(
{必要な R データ(
T データ
)、
必要な R エラー(
オブジェクト エラー、
スタック トレース
)、
必要な R 読み込み()}
)

R when<R>({
  required R Function(T data) data,
  required R Function(Object error, StackTrace stackTrace) error,
  required R Function() loading,
}) {
  return map(
    data: (d) => data(d.value),
    error: (e) => error(e.error, e.stackTrace),
    loading: (l) => loading(),
  );
}

/// [BookListを型に使いモックサーバーからデータを取得する関数.]
List<BookList> parseBook(String responseBody) {
  // 引数をキャストしてMap型に変換
  final parsed = convert.jsonDecode(responseBody).cast<Map<String, dynamic>>();
  // 配列をmapメソッドでループさせる。
  return parsed.map<BookList>((json) => BookList.fromJson(json)).toList();
}

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:http_mock_app/domain/books_provider.dart';

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // このページで使用するriverpodを呼び出す変数を定義
    final value = ref.watch(booksProvider);

    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('mock-serverからデータを習得する'),
          backgroundColor: Colors.pinkAccent,
        ),
        body: Center(
          child: value.when(
              data: (books) {
                return ListView.builder(
                  // 配列のデータを描画するWidget
                  itemCount: books.length, // 配列の数をカウント
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(books[index].title), // 配列のtitleプロパティを表示
                      subtitle: Text(books[index].author), // 配列のauthorプロパティを表示
                    );
                  },
                );
              },
              // データが習得できなかったら、ローディングされる.
              error: (err, stack) => Center(child: Text(err.toString())),
              loading: () => const Center(child: CircularProgressIndicator())),
        ),
      ),
    );
  }
}