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的builder方法内检查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,
              );
            },
          ),
        ),
      ),
    );
  }
}

它正在运行，但是我对您的情况有更好的解决方案，请检查一下

Load and read data from Json file

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

1 个答案: