flutter中如何读取本地json文件

Question

我正在尝试读取名为“catalog.json”的本地 json 文件，我编写了所有必需代码，但它显示此错误“lateinitializationError：字段'catalogdata'尚未初始化。” 然后我尝试初始化“catalogdata”变量，但随后显示“catalogdata”变量为空。我不知道如何解决。请帮我。我的代码

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

class Homepage extends StatefulWidget {
  const Homepage({Key? key}) : super(key: key);

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

class _HomepageState extends State<Homepage> {
  late List catalogdata;
  Future<String> loadData() async {
    var data = await rootBundle.loadString("assets/images/files/catalog.json");
    setState(() {
      catalogdata = json.decode(data);
    });
    return "success";
  }

  @override
  void initState() {
    // TODO: implement initState
    this.loadData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Homepage"),
      ),
      body: Center(
        child: Text(
          catalogdata[0],
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

Answer 1

这里\xe2\x80\x99ssample.json：

\n

{\n  "items": [\n    {\n      "id": "p1",\n      "name": "Item 1",\n      "description": "Description 1"\n    },\n    {\n      "id": "p2",\n      "name": "Item 2",\n      "description": "Description 2"\n    },\n    {\n      "id": "p3",\n      "name": "Item 3",\n      "description": "Description 3"\n    }\n  ]\n}\n

\n

用于从 JSON 文件获取数据的代码（请参阅下面的完整代码）：

\n

Future<void> readJson() async {\n  final String response = await rootBundle.loadString('assets/sample.json');\n  final data = await json.decode(response);\n// ... \n}\n

\n

在 pubspec.yaml 文件的 asset 部分声明 json 文件：

\n

flutter:\n  assets:\n    - assets/sample.json\n

\n

主程序.dart

\n

import 'package:flutter/material.dart';\nimport 'dart:convert';\n\nimport 'package:flutter/services.dart';\n\n void main() {\n  runApp(const MyApp());\n }\n\n class MyApp extends StatelessWidget {\n  const MyApp({Key? key}) : super(key: key);\n\n  @override\n Widget build(BuildContext context) {\n   return const MaterialApp(\n  // Hide the debug banner\n  debugShowCheckedModeBanner: false,\n  title: 'Kindacode.com',\n  home: HomePage(),\n);\n}\n}\n\nclass HomePage extends StatefulWidget {\n  const HomePage({Key? key}) : super(key: key);\n\n  @override\n_HomePageState createState() => _HomePageState();\n}\n\nclass _HomePageState extends State<HomePage> {\n  List _items = [];\n\n// Fetch content from the json file\nFuture<void> readJson() async {\nfinal String response = await rootBundle.loadString('assets/sample.json');\nfinal data = await json.decode(response);\nsetState(() {\n  _items = data["items"];\n});\n}\n\n  @override\n Widget build(BuildContext context) {\n  return Scaffold(\n    appBar: AppBar(\n    centerTitle: true,\n    title: const Text(\n      'Kindacode.com',\n    ),\n  ),\n  body: Padding(\n    padding: const EdgeInsets.all(25),\n    child: Column(\n      children: [\n        ElevatedButton(\n          child: const Text('Load Data'),\n          onPressed: readJson,\n        ),\n\n        // Display the data loaded from sample.json\n        _items.isNotEmpty\n            ? Expanded(\n                child: ListView.builder(\n                  itemCount: _items.length,\n                  itemBuilder: (context, index) {\n                    return Card(\n                      margin: const EdgeInsets.all(10),\n                      child: ListTile(\n                        leading: Text(_items[index]["id"]),\n                        title: Text(_items[index]["name"]),\n                        subtitle: Text(_items[index]["description"]),\n                      ),\n                    );\n                  },\n                ),\n              )\n            : Container()\n      ],\n    ),\n  ),\n );\n }\n }\n

\n