Flutter FutureBuilder snapshot.data接收null答案

【问题标题】：Flutter FutureBuilder snapshot.data receiving nullFlutter FutureBuilder snapshot.data接收null
【发布时间】：2021-10-08 03:47:06
【问题描述】：

我正在尝试使用 FutureBuilder 从 sqflite 获取数据这是我的代码：

从 Sqflite 获取图表的功能

getCharts(table, column_name, ids) async {
   var conn = await database;
   // var li = [];
   var data = await conn.query(table,
       where: "indicator_id IN (${List.filled(ids.length, '?').join(',')})",
       whereArgs: ids);


   return data;
 }

此函数返回：

[
 {
   id: 1, indicator_id: 1, 
   label: Percentage of population with access to electricity,
   np: 89.9, 
   p1: 88.5,
   p2: 96.3,
   p3: 97.4, 
   p4: 98.9,
   p5: 90.8,
   p6: 44.9,
   p7: 77.1,
   chart_type: pie_chart, 
   name: Access to electricity,
   description: Percentage of population with access to electricity
  }
]

图表服务的功能

Future<List<Chart>> getCharts(List<int> ids) async {
    var res = await _repository!.getCharts('charts', 'indicator_id', ids);

    var mapped = res.map((chart) => new Chart.fromJson(chart)).toList();
    print(mapped);

    return mapped;
  }

此函数返回：

[Instance of 'Chart']

在图表屏幕上

 ChartService _chart2service = ChartService();
Future<List<Chart>>? futureChart;
  @override
  void initState() {
    super.initState();

    futureChart = _chart2service.getCharts(this.widget.ids!);
  }

但是当我尝试 FutureBuilder 时：

 FutureBuilder<List<Chart>>(
            future: futureChart,
            builder: (context, snapshot) {
            print(snapshot.data);
             })

snapshot.data 返回空值。

【问题讨论】：

标签： flutter null flutter-futurebuilder

【解决方案1】：

检查snapshot.data 是否为空。 FutureBuilder 会在准备好后提供结果。

FutureBuilder<List<Chart>>(
  future: futureChart,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      print(snapshot.data);
      return Text('Data Loaded');
    }
    return Text('Loading Data...');
  },
);

【讨论】：

【解决方案2】：

我可能会提供一个“愚蠢”的答案，但builder 函数的主体只是直接打印snapshot.data。

Future 启动时，根据定义，它尚未完成。您必须首先检查它的状态：它是否未完成？是完成了，还是有错误（例如连接丢失）？

下面是一些示例代码：

class MyApp extends StatelessWidget {
  final futureChart = Future.delayed(Duration(seconds: 5));
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Center(
            child: FutureBuilder(
                future: futureChart,
                builder: (context, snapshot) {
                  if (snapshot.hasError) {
                    // some logic... and the following UI:
                    return Container(child: Text("Woops!"));
                  }                   else if(snapshot.connectionState != ConnectionState.done) {
                    // some logic... and the following UI:
                    return Container(child: Text("Waiting..."));
                  }
                  
                  // we're finally done, we can add logic and some UI
                  return Container(child: Text("our future is done: ${snapshot.data}"));
                }),
          ),
        ),
      );
}

【讨论】：

我得到了这个错误类型 List is not a subtype of type FutureOr>

【解决方案3】：

首先考虑检查您的getChart() 函数是否存在数据：

var mapped = res.map((chart) => new Chart.fromJson(chart)).toList();
  print(mapped);
  return mapped;

如果您的函数返回映射或控制台打印映射的数据，则您的数据成功。

然后您使用FutureBuilder 创建小部件，如下所示：

FutureBuilder<List<Chart>>(
                  future: futureChart(),
                  builder: (context, snapshot) {
                    if (snapshot.hasData) { 
                return Text('Your Data : ${snapshot.data}');
          } else{ 
            return CircularProgressIndicator();
         }
       } 
   ),

【讨论】：