Flutter API返回数据但ListView.Builder读取变量为空问题

调用API函数可成功获取目标数据，但将数据传入ListView.Builder时，发现类成员变量ledger始终为null。

页面代码 #

// import 'package:asanhisab/models/ledger_model.dart';
import 'package:asanhisab/utils/helper.dart';
import 'package:flutter/material.dart';
import 'package:odoo_api/odoo_api.dart';
import 'package:asanhisab/services/remoteservices.dart';

class GeneralLedgerScreen extends StatefulWidget {
  const GeneralLedgerScreen({Key? key}) : super(key: key);

  @override
  State<GeneralLedgerScreen> createState() => _GeneralLedgerScreenState();
}

class _GeneralLedgerScreenState extends State<GeneralLedgerScreen> {
  List? ledger;
  bool isloaded = false;
  @override
  void initState() {
    super.initState();
    getLedgerData();
  }

  getLedgerData() async {
    var ledger = await RemoteServices().getLedgerData();
    if (ledger != null) {
      setState(() {
        isloaded = true;
      });
    }
    logger.d(ledger.length);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('General Ledger'),
      ),
      body: Scrollbar(
        child: Center(
          child: Visibility(
            visible: isloaded,
            child: ListView.builder(
              itemCount: ledger?.length,
              itemBuilder: (context, index) {
                logger.d(ledger);
                return Card(
                  child: ListTile(
                    leading: const Icon(Icons.payment),
                    title: Text(index.toString()),
                    subtitle: const Text('Name'),
                    iconColor: Colors.blue,
                    isThreeLine: true,
                    trailing: const Text('1000'),
                    onTap: () {},
                  ),
                );
              },
            ),
            replacement: const CircularProgressIndicator(),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        label: const Text('Create'),
        icon: const Icon(Icons.add),
        backgroundColor: Colors.blue,
        onPressed: () {
          // Get.to(() => const CreateAccountHead());
        },
      ),
    );
  }
}

API服务代码 #

getLedgerData() async {
    var client = OdooClient(storage.read('link'));
    var authres = await client.authenticate(storage.read('email'),
        storage.read('password'), storage.read('dbname'));
    if (authres.isSuccess) {
      var data = await client
          .callKW('ah_general_ledger.ah_account_head', 'search_read', []);
      if (data.getStatusCode() == 200) {
        return data.getResult();
      } else {
        logger.d('Error Occured while fetching data');
      }
    } else {
      logger.d('Error Occured');
    }
    return null;
  }

问题原因 #

getLedgerData方法中使用了局部变量var ledger接收API返回值，未将其赋值给类的成员变量ledger，导致ListView.Builder无法读取到数据。

修复方案 #

修改getLedgerData方法，将API返回值直接赋值给类成员变量，并在setState中同步状态：

getLedgerData() async {
  // 去掉var，直接赋值给类成员变量
  ledger = await RemoteServices().getLedgerData();
  if (ledger != null) {
    setState(() {
      isloaded = true;
    });
  }
  logger.d(ledger?.length);
}

修改后类成员变量ledger会正确存储API返回的数据，ListView.Builder就能正常读取并渲染内容。

内容的提问来源于stack exchange，提问作者Arslan Mughal