Listing local json data in flutter project

Question

I am trying to make a list of medicines in my mobile app. My data is in a local json file.

{
        "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"
    },

one of them is like that. I am trying to make all of these data to appear when I click on a button. My code is like below.

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

but I can not get all the fields, I am only able to get just 2 fields 'ILAC ADI' AND 'ETKIN MADDE'. How can I solve this?

Solution 1

The most efficient way to dealing with json data and rendering them is by creating models. If you are new to this QuickType can help you out with this.

Paste your json and you will get the code for the model. Next u can instantiate the model with your json data and use ListView.builder to iterate through your model and render the data.

Retroportal studio has a good video explaining this concept, take a look. I'm sure it will help you out.

Solution 2

Only 'ILAC ADI' and 'ETKIN MADDE' is showing on the screen because you are giving only those values in the ListTile.

Instead of a ListTile you can use a Column to show all the data.

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

If you have any doubt comment it.