Question

我正在尝试显示我的东西列表，但它一直失败，snapshot.data似乎为空。请我如何解决这个问题。我添加了CheckList类进行仿真。我试图将checkList.length更改为checkList？.length？ 0，但仍然无法正常工作，我检查了路径“ data / checklist.json”是否正确。

 class CheckList {
  final String checkListName;
  final ItemList list;
  final int total;

  CheckList({this.checkListName, this.list, this.total});
  factory CheckList.fromJson(Map<String, dynamic> json) {
    return new CheckList(
      checkListName: json['checkListName'],
      list: ItemList.fromJson(json['list']),
      total: json['total'],
    );
  }

  static Future<List<CheckList>> browse() async {
    String content = await rootBundle.loadString('data/checklist.json');

    await Future.delayed(Duration(seconds: 1));

    List collection = json.decode(content);
    List<CheckList> _checklist =
      collection.map((json) => CheckList.fromJson(json)).toList();

    return _checklist;

  }
}

Future<List<CheckList>> checkList;

@override
void initState() {
    super.initState();
    checkList = CheckList.browse();
}

body: FutureBuilder(
        future: checkList, // a previously-obtained Future<String> or null
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.none:
            case ConnectionState.active:
            case ConnectionState.waiting:
              return Center(child: CircularProgressIndicator());
            case ConnectionState.done:
              // if (snapshot.hasError) return Text('Error is: ${snapshot.error}');
              var checkList = snapshot.data;
              return ListView.separated(
                itemCount: checkList.length,
                itemBuilder: (BuildContext context, int index) {
                  CheckList checklist = checkList[index];
                  return ListTile(
                    title: Padding(
                      padding: const EdgeInsets.fromLTRB(0, 15, 0, 0),
                      child: Text(
                        checklist.checkListName,
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                    ),

enter image description here

Answer 1

假设您有两个清单学校清单和abc清单
我将json文件放在路径asset / data / checklist.json
对于演示，我并没有使用您所有的函数名称
您可以在更改json路径后直接运行此代码。

完整的工作代码

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

void main() => runApp(MyApp());
// To parse this JSON data, do
//
//     final checkList = checkListFromJson(jsonString);

List<CheckList> checkListFromJson(String str) => List<CheckList>.from(json.decode(str).map((x) => CheckList.fromJson(x)));

String checkListToJson(List<CheckList> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class CheckList {
  String checkListName;
  List<ListElement> list;
  int total;

  CheckList({
    this.checkListName,
    this.list,
    this.total,
  });

  factory CheckList.fromJson(Map<String, dynamic> json) => CheckList(
    checkListName: json["checkListName"],
    list: List<ListElement>.from(json["list"].map((x) => ListElement.fromJson(x))),
    total: json["total"],
  );

  Map<String, dynamic> toJson() => {
    "checkListName": checkListName,
    "list": List<dynamic>.from(list.map((x) => x.toJson())),
    "total": total,
  };
}

class ListElement {
  String itemName;
  int noOfItems;
  int unitPrice;

  ListElement({
    this.itemName,
    this.noOfItems,
    this.unitPrice,
  });

  factory ListElement.fromJson(Map<String, dynamic> json) => ListElement(
    itemName: json["itemName"],
    noOfItems: json["noOfItems"],
    unitPrice: json["unitPrice"],
  );

  Map<String, dynamic> toJson() => {
    "itemName": itemName,
    "noOfItems": noOfItems,
    "unitPrice": unitPrice,
  };
}



class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: ListContent(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class ListContent extends StatefulWidget {
  @override
  _ListContentState createState() => _ListContentState();
}

class _ListContentState extends State<ListContent> {
  List<CheckList> _words = List<CheckList>();

  Future<List<CheckList>> _getWords() async {
    var dictionaryData = await DefaultAssetBundle.of(context)
        .loadString('assets/data/checklist.json');
    var words = List<CheckList>();
    if (dictionaryData != null) {
      words = checkListFromJson(dictionaryData);
      print("words lenght ${words.length}");
    } else {
      print('fail');
    }
    return words;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      builder: (context, AsyncSnapshot<List<CheckList>> snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.none:
            return new Text('none');
          case ConnectionState.waiting:
            return new Center(child: new CircularProgressIndicator());
          case ConnectionState.active:
            return new Text('');
          case ConnectionState.done:
            if (snapshot.hasError) {
              return new Text(
                '${snapshot.error}',
                style: TextStyle(color: Colors.red),
              );
            } else {
              return ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (context, index) {
                    CheckList checkList = snapshot.data[index];
                    return Card(
                        elevation: 6.0,
                        child: Padding(
                          padding: const EdgeInsets.only(
                              top: 6.0, bottom: 6.0, left: 8.0, right: 8.0),
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                checkList.checkListName,
                              ),
                              Spacer(),
                              Text(
                                checkList.total.toString(),
                              ),
                            ],
                          ),
                        ));
                  });
            }
        }
      },
      future: _getWords(),
    );
  }
}

演示json文件内容

[
{ "checkListName": "School List", "list": [ { "itemName": "cabin", "noOfItems": 3, "unitPrice": 100 }, { "itemName": "milk", "noOfItems": 10, "unitPrice": 50 }, { "itemName": "milo", "noOfItems": 10, "unitPrice": 50 } ], "total": 1300 },
{ "checkListName": "abc List", "list": [ { "itemName": "cabin", "noOfItems": 3, "unitPrice": 100 }, { "itemName": "milk", "noOfItems": 10, "unitPrice": 50 }, { "itemName": "milo", "noOfItems": 10, "unitPrice": 50 } ], "total": 2000 }
]

Answer 2

尝试一下。

Future<List<CheckList>> checkList;

替换为

List<CheckList> checkList;

然后。

@override
void initState() {
  super.initState();
  checkList = []; //It is important
  this.getCheckList();
}

Future<void> getCheckList() async{
  checkList = await CheckList.browse();
  setState({});
}

如何解决Flutter中的“ getter'length'在null上被调用”错误

2 个答案: