1、首先将json变成实体方便调用

contact_bean.dart

class ContactBean {
  int? id;
  String? firstName;
  String? lastName;
  String? phoneNumber;
  int? age;
  int? sex;
  String? address;

  ContactBean(
      {this.id,
        this.firstName,
        this.lastName,
        this.phoneNumber,
        this.age,
        this.sex,
        this.address});

  ContactBean.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    firstName = json['firstName'];
    lastName = json['lastName'];
    phoneNumber = json['phoneNumber'];
    age = json['age'];
    sex = json['sex'];
    address = json['address'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['firstName'] = this.firstName;
    data['lastName'] = this.lastName;
    data['phoneNumber'] = this.phoneNumber;
    data['age'] = this.age;
    data['sex'] = this.sex;
    data['address'] = this.address;
    return data;
  }
}

2、修改一下main_provider.dart让返回来的json变成实体

先贴完整代码：

main_provider.dart

import 'dart:convert';

import 'package:day03/bean/base_bean.dart';
import 'package:day03/bean/contact_bean.dart';
import 'package:day03/dio_util.dart';
import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';

class MainProvider with ChangeNotifier {
  String _text = '';

  String get text => _text;

  List<ContactBean> _dataList = [];
  List<ContactBean> get dataList => _dataList;

  void getList() async {
    await DioUtil.getInstance().get(
      "http://192.168.5.116:20080/contact/list",
      null,
      () {
        _text = "loading";
        notifyListeners();
      },
      (data) {
        BaseBean bean = BaseBean.fromJson(data);
        _dataList=List.from(bean.data.map((e) => ContactBean.fromJson(e)));
        notifyListeners();
      },
      (reason) {
        _text = reason;
        notifyListeners();
      },
    );
  }

  void addContact() async {
    DioUtil.getInstance().addHeader("token", "123456789");
    await DioUtil.getInstance().post(
      "http://192.168.5.116:20080/contact/add",
      {
        'firstName': '王',
        'lastName': '六',
        'phoneNumber': '13456789010',
        'age': '22',
        'sex': 1,
        'address': '山西省晋城市',
      },
      () {
        _text = "loading";
        notifyListeners();
      },
      (data) {
        _text = '添加成功';
        notifyListeners();
      },
      (reason) {
        _text = reason;
        notifyListeners();
      },
    );
  }
}

首先添加了个dataList的变量

  List<ContactBean> _dataList = []; //私有变量
  List<ContactBean> get dataList => _dataList; //对外引用只读

然后在getList()方法里将原来的：

_text = bean.data.toString();

换为：

 _dataList=List.from(bean.data.map((e) => ContactBean.fromJson(e)));

将数据更新从更新text文字变成dataList列表，然后使用map方法遍历出ContactBean

好了，数据怎么来解决了，接下来改UI

4、改UI！

main.dart

import 'package:day03/main_provider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [ChangeNotifierProvider(create: (context) => MainProvider())],
      child: MyApp(),
    ),
  );
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    final provider = Provider.of<MainProvider>(context);

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(provider.text),
            ElevatedButton(
              onPressed: provider.getList,
              child: const Text('请求数据'),
            ),
            ElevatedButton(
              onPressed: () => provider.addContact(),
              child: const Text('添加一个联系人'),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: provider.dataList.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('${provider.dataList[index].firstName} ${provider.dataList[index].lastName}'),
                    subtitle: Text('${provider.dataList[index].phoneNumber}'),
                  );
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

仍然是StatelessWidget，不过后面用Expanded撑开剩下的地方，往里面放了一个ListView，使用ListView.Builder构建。
itemCount指List的计数；itemBuilder内放置ListView item组件
为演示方便就返回一个ListTile用于展示数据，直接provider.dataList[index]引用列表里的ContactBean对象