Flutter：加载本地json文件返回null

Question

对不起，我的初学者问题，我正在尝试自学 Flutter，所以我正在从 youtube 上做一些教程，Invalid argument(s)但不知何故，即使我在教程中输入的内容完全一样，我还是会出错，我尝试通过打印进行调试，然后首先它打印 null 然后它用 json 对象打印列表，但是当我打印mydata[0]它时打印The method '[]' was called on null..

import 'package:flutter/material.dart';
import 'dart:convert';

void main() {
  runApp(new MaterialApp(
    home: new Home(),
    theme: ThemeData(
      primarySwatch: Colors.indigo,
    ),
  ));
}

class Home extends StatefulWidget {
  @override
  HomeState createState() => new HomeState();
}

class HomeState extends State<Home> {
  List data;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Some App"),
      ),
      body: Container(
        child: Center(
          child: FutureBuilder(
            future: DefaultAssetBundle.of(context).loadString('assets/data.json'),
            builder: (context, snapshot) {
              var mydata = json.decode(snapshot.data.toString());
              print(mydata);
              return ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: <Widget>[
                        Text("Name " + mydata[index]['Name']),
                        Text("Age " + mydata[index]['Age']),
                        Text("Gender " + mydata[index]['Gender']),
                      ],
                    ),
                  );
                },
                itemCount: mydata == null ? 0 : mydata.length,
              );
            },
          ),
        ),
      ),
    );
  }
}

Answer 1

您需要在 FutureBuilder 的构建器方法中检查 Future 是否交付。喜欢：

首先不要忘记 pubspec.yaml：

  assets:
   - assets/data.json

这是json：

[
  {
    "Name": "John Doe",
    "Age": "30",
    "Gender": "Male"
  },
  {
    "Name": "Jane Doe",
    "Age": "25",
    "Gender": "Female"
  }
]

这是构建方法：

import 'dart:convert';

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new Home(),
    theme: ThemeData(
      primarySwatch: Colors.indigo,
    ),
  ));
}

class Home extends StatefulWidget {
  @override
  HomeState createState() => new HomeState();
}

class HomeState extends State<Home> {
  List data;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Some App"),
      ),
      body: Container(
        child: Center(
          child: FutureBuilder(
            future:
                DefaultAssetBundle.of(context).loadString('assets/data.json'),
            builder: (context, snapshot) {
              if(!snapshot.hasData) {
                return CircularProgressIndicator();
              }
              var myData = json.decode(snapshot.data);
              print(myData);
              return ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: <Widget>[
                        Text("Name " + myData[index]['Name']),
                        Text("Age " + myData[index]['Age']),
                        Text("Gender " + myData[index]['Gender']),
                      ],
                    ),
                  );
                },
                itemCount: myData == null ? 0 : myData.length,
              );
            },
          ),
        ),
      ),
    );
  }
}

它正在工作，但我对您的情况有更好的解决方案，请检查：

从 Json 文件加载和读取数据