FutureBuilder is able to get data but data is taken multiple times with Flutter

Question

I am using a simple Json like this :

[
    {
        "question" : "Sky",
        "answer" : "Blue",
        
    },
    {
        "question" : "Sun",
        "answer" : "Yellow",
        
    },
]

and am able to get the data inside text widgets as i wanted, the problem is jsondecoder takes the data multiple times and creates multiple screen, i know it is because i put FutureBuilder inside the build method and when i put the future outside of build like this :

Future getDataArray() async {
    final dynamic resp =
        DefaultAssetBundle.of(context).loadString('load_json/words.json');
    return resp;
  }

  @override
  void initState() {
    myFuture = getDataArray();
    super.initState();
  }

the var mydata = JsonDecoder().convert(snapshot.data.toString()); is still inside build and FutureBuilder and that's causing the problem. I cannot get var mydata = JsonDecoder().convert(snapshot.data.toString()); outside of build please help me with this.

build method is:

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.purple[900],
      appBar: new AppBar(
        title: Text(widget.title),
      ),
      body: new Padding(
          padding: EdgeInsets.fromLTRB(2, 20, 2, 20),
          child: FutureBuilder(
            future: myFuture,
            builder: (context, snapshot) {
              //decode json
              var mydata = JsonDecoder().convert(snapshot.data.toString());
              return new ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  return Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                     
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          GestureDetector(
                            child: Card(
                              color: Colors.indigoAccent[400],
                              shape: RoundedRectangleBorder(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(24.0)),
                              ),
                              elevation: 10.0,
                              shadowColor: Colors.black,
                              child: Stack(
                                fit: StackFit.loose,
                                alignment: Alignment.center,
                                children: <Widget>[
                                  new Container(
                                    width: 100.0,
                                    height: 100.0,
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(24.0),
                                      color: Colors.white,
                                    ),
                                    child: Center(
                                      child: Text(
                                        mydata[index]['answer'],
                                        style: TextStyle(
                                          fontFamily: 'Arial',
                                          fontSize: 20,
                                          color: Colors.indigoAccent[400],
                                          height: 1,
                                          fontWeight: FontWeight.bold,
                                        ),
                                        textAlign: TextAlign.center,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            onTap: () {
                              print('button1');
                            },
                          ),
                          
                        ],
                      )
                    ],
                  );
                },
                itemCount: mydata == null ? 0 : mydata.length,
              );
            },
          )),
    );
  }

Answer 1

Community, I have used a ListView.builder, and itemCount was causing the problem not the json, i have removed the ListView.builder and now the problem is solved. In case there are others who mistake their errors' cause like I did, this question might stay, but If you think this problem is not that common to face, I might delete it. Please say so in the comments. Thank you.

Answer 2

Hello my dear on the level of your future builder you should first test if the data are available before having to convert the json to be done I recommend you to :

FutureBuilder(
    future: myFuture,
    builder: (context, snapshot) {
      if(snapshot.hasData){
        var mydata = JsonDecoder().convert(snapshot.data.toString());
      }else{
        // no data available
     }
 );