Home > OS >  LOAD LOCAL JSON FILE USING FUTURE BUILDER
LOAD LOCAL JSON FILE USING FUTURE BUILDER

Time:11-01

why is still not showing the data. tried many format .but it still showing the error page. I follow all the procedure that I watch and read here in youtube and in this group. but still i cant load the json file

class _PlantPageState extends State<PlantPage> {
  
    List<Plants> planty = [];
  Future getPlantsLocally() async {
    final assetBundle = DefaultAssetBundle.of(context);
    final data = await assetBundle.loadString('assets/plants.json');
    final body =  await json.decode(data);

    var list = body["plant"] as List<dynamic>;
    setState(() {
      planty = list.map((e) => Plants.fromJson(e)).toList(); 
    });
  }


  @override
  Widget build(BuildContext context) => Scaffold(
    body: FutureBuilder(
      future: getPlantsLocally(),
      builder:(context, snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return Center(child: CircularProgressIndicator());
          default:
          if (planty.length > 0) {
            return Container(
              height: 200,
              child: ListView.builder(
                itemCount: planty.length,
                itemBuilder: (BuildContext context, index) {
                  return Card(
                    margin: EdgeInsets.all(15.0),
                    color: Colors.green[600],
                    child: ListTile(
                      title: Text(planty[index].name?? 'name',),
                    ),
                  );
                }
                ),
            );
          }
          else {
            return Center(child: Text('Error Error'),);
          }
        }

this is the sample of my database . i already parse it using data class generator. is my database is not right ? or my fetching file ?

{
  "plant":
 [
        {
            "id": "1",
            "name": "ALOCASIA-ELEPHANT EARS",
            "image": "assets/images/ALOCASIA.jpeg",
            "descript": "Alocasia plant (Alocasia mortfontanensis) is a hybrid species between Alocasia longiloba and Alocasia sanderiana. The Alocasia is known for its large leaves and wide variety of cultivars within the species. Alocasia plant is native to tropical Asia and Australia.",
            "charac": [{
              "planttype": "Herb",
              "lifespan": "Perennial",
              "bloomtime": "Spring, summer",
              "plantheight": "1-2 feet",
              "spread": "7 feet",
              "leafColor": "PurpleGreenGreySilver"
            }
            ],
            "scienclass": [
                {
                "genus": "Alocasia - Elephant's-ears, Taro, Kris plant",
                "family": " Araceae - Arum, Aroids ",
                "order": "Alismatales - Water plantains and allies",
                "classes": "Liliopsida - Monocotyledons, Monocots ",
                "phylum":"Tracheophyta - Vascular plants, Seed plants, Ferns, Tracheophytes"
            }
            ],
            "pestdesease": " Stem rot, crown rot, root rot, leaf spot, mealy bugs, aphids",
            "requirements":[{
                "difficultyrating": "Alocasia plant is super easy to take care of, with resistance to almost all pests and diseases. It is a perfect option for gardeners with brown thumbs.",
                "sunlight": "Full shade to partial sun",
                "hardenesszone": " 9-11 ",
                "soil": "Loose, fertile and well-drained humus soil"
            }
         ],
            "careguide":[
                {
                "water": "Moisture-loving, keep the soil moist but do not let water accumulate.",
                "fertilizaton": "Fertilization once in spring. ", 
                "pruning": "Fertilization once in spring. ", 
                "plantingtime": "Spring, summer, autumn ",
                "propagation": "Division ",
                "pottingsuggestion": " Needs excellent drainage in pots."
            }
            ],
            "toxictohuman": "Is the alosdadadsadadsa",
        },

what do you think guys is the error of this flow ?

CodePudding user response:

You need change your getPlantsLocally() to return a list and futurBuilder should use the getPlantsLocally() returned list not the local variable planty. hope this works.

class _PlantPageState extends State<PlantPage> {
  
  Future<List> getPlantsLocally() async {
    final assetBundle = DefaultAssetBundle.of(context);
    final data = await assetBundle.loadString('assets/plants.json');
    final body =  await json.decode(data);

    var list = body["plant"] as List<dynamic>;
    var planty = list.map((e) => Plants.fromJson(e)).toList(); 
    return planty;
  }


  @override
  Widget build(BuildContext context) => Scaffold(
    body: FutureBuilder(
      future: getPlantsLocally(),
      builder:(context, snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return Center(child: CircularProgressIndicator());
          default:
          if (snapshot.hasData && snapshot.data!.length > 0) {
            return Container(
              height: 200,
              child: ListView.builder(
                itemCount: snapshot.data!.length,
                itemBuilder: (BuildContext context, index) {
                  return Card(
                    margin: EdgeInsets.all(15.0),
                    color: Colors.green[600],
                    child: ListTile(
                      title: Text(snapshot.data[index].name?? 'name',),
                    ),
                  );
                }
                ),
            );
          }
          else {
            return Center(child: Text('Error Error'),);
          }
        }

CodePudding user response:

class PlantsApi {
  static Future<List<Plant>> getPlantsLocally(BuildContext context) async {
     final assetBundle = DefaultAssetBundle.of(context);
    final data = await assetBundle.loadString('assets/plants.json');
    final body =  await json.decode(data);
    var list = body["plant"] as List<dynamic>;
    var planty = list.map((e) => Plant.fromMap(e)).toList();
    return planty;
  }
}

the fetch data is the problem. thank you. i remove the List Plant = []

  • Related