Flutter点击onPressed按钮获取JSON响应时请求提前执行如何解决

问题原因 #

1. 你在initState生命周期中直接执行了futureBalance = fetchBalance();，页面初始化时就会触发网络请求，此时_addressController还没有任何输入值，自然会抛出异常。
2. 点击提交按钮时仅执行了fetchBalance()方法，没有将新的请求结果赋值给futureBalance，也没有触发页面重绘，FutureBuilder无法响应点击按钮后的请求结果。

修复步骤 #

1. 调整变量定义 #

去掉late修饰，将futureBalance改为可空类型，初始值设为null，避免页面加载时自动触发请求：

// 替换原来的late Future<Balance> futureBalance;
Future<Balance>? futureBalance;

2. 删除initState中的预请求逻辑 #

移除initState里的futureBalance = fetchBalance();这行代码，修改后的initState如下：

@override
void initState() {
  super.initState();
  // 删掉原来的futureBalance赋值逻辑
}

3. 修改提交按钮的点击逻辑 #

点击按钮时先校验输入是否为空，再赋值新的请求Future并触发页面刷新：

ElevatedButton(
  onPressed: () {
    // 输入非空校验，避免空提交
    if (_addressControler.text.trim().isEmpty) {
      // 可自行添加Toast提示用户输入内容
      return;
    }
    setState(() {
      futureBalance = fetchBalance();
    });
  },
  child: const Text('Submit'),
)

4. 调整FutureBuilder的初始状态判断 #

新增futureBalance为空时的占位展示，避免初始状态就显示加载动画：

FutureBuilder<Balance>(
  future: futureBalance,
  builder: (context, snapshot) {
    // 初始未提交状态展示提示
    if (futureBalance == null) {
      return const Text('请输入地址后点击提交查询');
    }
    if (snapshot.hasData) {
      // 原有数据处理逻辑保持不变
      print(snapshot.data!.height);
      var x = (snapshot.data!.result[0].amount);
      var y = int.parse(x);
      var z = (y / 1000000);
      print(z); 
      return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            z.toString(),
            style: const TextStyle(fontSize: 20),
          ),
        ]
      );
    } else if (snapshot.hasError) {
      return Text("${snapshot.error}");
    }
    return const CircularProgressIndicator();
  },
)

可选优化 #

• 可给TextField添加输入格式校验，只有符合地址规则的输入才允许提交
• 请求报错时可添加重试按钮，降低用户操作成本

内容的提问来源于stack exchange，提问作者VARADHARAJ MAHENDRAN