Flutter fetch data from json without async

Question

I have two pages, one shows a list of museum (home.dart) and the other show the museum info (museumPage.dart) . I didn't want to create different page for different museum so I just created one museumPage.dart . Home.dart can go to museumPage.dart passing the name of the museum. Museum.dart fetch data of the museum from a JSON file by knowing the title of the musem. All of the museum's info are saved inside museo class.

Problem? JSON is slower than the build of the Widget, so it builds first the Widget without nothing inside because fetching isn't complete and the object Museo doesn't have nothing.

If I go back to Home.dart from museumPage.dart then go to another museum (different from the previous one), museumPage.dart will show the info of the previous museum.

Is there a way to avoid that? Can I fetch without asyns?

assets/loadjson/infomusei.json

{
    "museumName1" : {
            "prezzo" : "...",
        "luogo" : "...",
        "orario" : "...",
        "numero" : "...",
        "sito" : "...",
        "storia" : "...",
        "immagine" : "...",
  },
    "museumName2" : {
            "prezzo" : "...",
            "luogo" :"...",
            "orario" :"...",
            "numero" : "...",
            "sito" : "...",
            "storia" : "...",
            "immagine" : "...",
  }
}

main.dart

'''somewhere inside the code'''
onTap: (){
    Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => museumPage(museumName))
    );
}

museumPage.dart

Future<String> loadMuseumAsset() async {
  return await rootBundle.loadString('assets/loadjson/infomusei.json');
}

Future loadMuseum(String nome) async {
  String jsonString = await loadMuseumAsset();
  final jsonResponse = json.decode(jsonString);
  Museo = new museo.fromJson(jsonResponse, nome);
}

class museo{
  String nome;
  String prezzo;
  String luogo;
  String orario;
  String numero;
  String sito;
  String storia;
  String immagine;

  museo({this.prezzo, this.luogo, this.orario, this.numero, this.sito, this.storia, this.immagine});

  factory museo.fromJson(Map<String, dynamic> parsedJson, String nome){
    return museo(
        prezzo: parsedJson[nome]['prezzo'],
        luogo: parsedJson[nome]['luogo'],
        orario: parsedJson[nome]['orario'],
        numero: parsedJson[nome]['numero'],
        sito: parsedJson[nome]['sito'],
        storia: parsedJson[nome]['storia'],
        immagine: parsedJson[nome]['immagine'],
    );
  }
}

museo Museo;

class museumPage extends StatelessWidget{
    museumPage(String title){
            loadMuseum(title);
    }

    Widget buid(...){
        ...
        print(Museo.prezzo)
        ...
    }
}

Answer 1

You can use the dispose function to "clean" the museumPage once you navigate out of it. This should be added before or after your Widget build().

  @override
  void dispose() {
    //You code to clean the page here
    ex:
   Museo=null;
  }

This should fix the issue.

Answer 2

You will nearly always have some sort of.network lag when you fetch things from the.net. You should look in to using FutureBuilder to easily provide a placeholder, like a Text('Fetching...'), until your data is received and de-JSON-ified. There's really no way to turn the async fetching into sync... you might be calling that build() method 120 times a second if you have an animation, for example, and it has to have something to show.