在 flutter 项目中列出本地 json 数据

Question

我想在我的移动应用程序中列出一份药物清单。我的数据在本地 json 文件中。

{
        "BARKOD": 8699755640016,
        "ATC KODU": "A01AA",
        "ATC ADI": "Caries prophylactic agents",
        "REFERANS \nE�DE�ER": "E�DE�ER",
        "ESDEGERI": 2,
        "ILAC ADI": "SENSORAL 250 ML SOLUSYON",
        "ETKIN MADDE": "POTASYUM NITRAT + SODYUM KLORUR",
        "FIRMA ADI": "DENTORAL MEDIFARMA",
        "BIRIM MIKTAR": "",
        "BIRIM CINSI": "",
        "AMBALAJ MIKTARI": 250,
        "RE�ETE": "NORMAL RE�ETE",
        "KDV DAHIL PERAKENDE SATIS TL FIYATI \n1 ? =2,1166 TL": "5,69"
    },

其中一个就是这样。我试图让所有这些数据在我点击一个按钮时出现。我的代码如下。

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:medicine_reminder/src/ui/homepage/homepage.dart';

class JsonPage extends StatefulWidget {
  @override
  _JsonPageState createState() => _JsonPageState();
}

class _JsonPageState extends State<JsonPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Medicine List"),
        centerTitle: true,
      ),
      body: Center(
        child: FutureBuilder(
          builder: (context, snapshot) {
            var showData = json.decode(snapshot.data.toString());
            return ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                isThreeLine: true,
                title: Text(showData[index]['ILAC ADI']),
                subtitle: Text(showData[index]['ETKIN MADDE']),
                
                );
              },
              itemCount: showData.length,
            );
          },
          future:
              DefaultAssetBundle.of(context).loadString("assets/csvjson.json"),
        ),
      ),
      floatingActionButton: Stack(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(right: 1),
            child: Align(
              heightFactor: 12.9,
              alignment: Alignment.topLeft,
              child: FloatingActionButton(
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => HomePage(),
                      ));
                },
                child: Icon(Icons.arrow_back),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

但我无法获取所有字段，我只能获取 2 个字段 'ILAC ADI' 和 'ETKIN MADDE'。我该如何解决？

Answer 1

处理 json 数据和渲染数据的最有效方法是创建模型。如果您是新手，QuickType 可以帮助您解决这个问题。

粘贴您的 json，您将获得该模型的代码。接下来，您可以使用 json 数据实例化模型，并使用 ListView.builder 遍历模型并渲染数据。

Retroportal studio 有一个很好的视频解释了这个概念，看看吧。我相信它会帮助你。

Answer 2

只有 'ILAC ADI' 和 'ETKIN MADDE' 显示在屏幕上，因为您只在 ListTile.

中给出了这些值

您可以使用 Column 代替 ListTile 来显示所有数据。

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:medicine_reminder/src/ui/homepage/homepage.dart';

class JsonPage extends StatefulWidget {
  @override
  _JsonPageState createState() => _JsonPageState();
}

class _JsonPageState extends State<JsonPage> {
  // This List stores all the keys in the JSON
  final List<String> jsonKeyList = [
    'BARKOD',
    'ATC KODU',
    'ATC ADI',
    'REFERANS \nE�DE�ER',
    'ESDEGERI',
    'ILAC ADI',
    'ETKIN MADDE',
    'FIRMA ADI',
    'BIRIM MIKTAR',
    'BIRIM CINSI',
    'AMBALAJ MIKTARI',
    'RE�ETE',
    'KDV DAHIL PERAKENDE SATIS TL FIYATI \n1 ? =2,1166 TL',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Medicine List"),
        centerTitle: true,
      ),
      body: Center(
        child: FutureBuilder(
          builder: (context, snapshot) {
            var showData = json.decode(snapshot.data);
            print(showData.toString());
            return ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                // Used column to show all the values in the JSON
                return Column(
                  children: jsonKeyList.map((key) {
                    return Text(showData[index][key].toString());
                  }).toList(),
                );
              },
              itemCount: showData.length,
            );
          },
          future:
              DefaultAssetBundle.of(context).loadString("assets/csvjson.json"),
        ),
      ),
      floatingActionButton: Stack(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(right: 1),
            child: Align(
              heightFactor: 12.9,
              alignment: Alignment.topLeft,
              child: FloatingActionButton(
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => HomePage(),
                      ));
                },
                child: Icon(Icons.arrow_back),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

如有疑问，请留言。

在 flutter 项目中列出本地 json 数据

Listing local json data in flutter project

android

json

listview

dart

flutter