在 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，您將獲得 model 的代碼。 接下來，您可以使用 json 數據實例化 model 並使用 ListView.builder 遍歷您的 model 並呈現數據。

Retroportal 工作室有一個很好的視頻來解釋這個概念，看看。 我相信它會幫助你。

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),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

如果您有任何疑問，請發表評論。