這個示例展示了如何創建數據模型、解析 JSON 數據，以及在 UI 中使用這些數據：

import 'package:flutter/material.dart';
import 'dart:convert';void main() {// 示例：手動創建User對象final user = User(id: 1,name: '張三',age: 25,email: 'zhangsan@example.com',isPremium: true,);// 示例：將User對象轉為JSONfinal jsonData = user.toJson();print('轉為JSON: $jsonData');// 示例：從JSON解析User對象final jsonString = '{"id":2,"name":"李四","age":30,"email":"lisi@example.com","isPremium":false}';final parsedUser = User.fromJson(json.decode(jsonString));print('解析后的用戶: ${parsedUser.name}');runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text('數據模型示例')),body: const Center(child: Text('查看控制臺輸出了解數據模型用法'),),),);}
}// 數據模型
class User {final int id;final String name;final int age;final String email;final bool isPremium;// 構造函數User({required this.id,required this.name,required this.age,required this.email,required this.isPremium,});// 從JSON解析為User對象factory User.fromJson(Map<String, dynamic> json) {return User(id: json['id'] ?? 0, // 提供默認值，防止nullname: json['name'] ?? '',age: json['age'] ?? 0,email: json['email'] ?? '',isPremium: json['isPremium'] ?? false,);}// 將User對象轉為JSONMap<String, dynamic> toJson() {return {'id': id,'name': name,'age': age,'email': email,'isPremium': isPremium,};}// 重寫toString方法，方便打印對象信息@overrideString toString() {return 'User{id: $id, name: $name, age: $age, email: $email, isPremium: $isPremium}';}
}

多條數據

1. 數據模型

class User {final int id;final String name;final int age;User({required this.id,required this.name,required this.age,});// 從JSON解析單個用戶factory User.fromJson(Map<String, dynamic> json) {return User(id: json['id'] ?? 0,name: json['name'] ?? '',age: json['age'] ?? 0,);}// 解析用戶列表static List<User> fromJsonList(List<dynamic> jsonList) {return jsonList.map((json) => User.fromJson(json)).toList();}
}

2. 模擬 JSON 數據與解析示例

// 模擬API返回的用戶列表JSON
String mockUserListJson = '''
[{"id": 1, "name": "張三", "age": 25},{"id": 2, "name": "李四", "age": 30},{"id": 3, "name": "王五", "age": 22}
]
''';// 解析示例
void parseUsers() {final List<dynamic> jsonList = json.decode(mockUserListJson);final List<User> users = User.fromJsonList(jsonList);print('用戶數量: ${users.length}');print('第一個用戶: ${users[0].name}');
}

3. UI 展示（列表組件）

class UserListPage extends StatelessWidget {@overrideWidget build(BuildContext context) {// 解析模擬數據final List<dynamic> jsonList = json.decode(mockUserListJson);final List<User> users = User.fromJsonList(jsonList);return Scaffold(appBar: AppBar(title: const Text('用戶列表')),body: ListView.builder(itemCount: users.length,itemBuilder: (context, index) {final user = users[index];return ListTile(leading: CircleAvatar(child: Text('${user.id}')),title: Text(user.name),subtitle: Text('年齡: ${user.age}'),trailing: const Icon(Icons.arrow_forward_ios),onTap: () {// 點擊事件處理ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('點擊了 ${user.name}')),);},);},),);}
}