i have problem with async function and updated information on screen - flutter

Question

When the user comes on this page, the function async get_ticket() need to be called, it returns a ticket id and the revenue user wins (it is scratch game). The first problem with this code is if i want display the value of "gain" and "id_ticket" because at the screen it says "null". When i have finish to scratch the ticket there is a setstate made and the value are updated from null to their real value.
Why this 2 values are not updated ??? The widget seems to be displayed before the function so widget can't display real values (which is updated by the async function). How i can resolve that ? For my game the better solution would be to called the async function and if player can have a ticket we display the ticket and if not we display a message for that "You can't scratch again today" for example.
import 'package:flutter/material.dart';
import 'package:flutter_app/menu_member.dart';
import 'package:scratcher/scratcher.dart';
import 'package:flutter_app/globals.dart' as globals;
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'package:flutter_app/liste_grattage.dart';
class Affiche_Ticket_Grattage extends StatefulWidget {
#override
_Affiche_Ticket_Grattage_State createState() {
return _Affiche_Ticket_Grattage_State();
}
}
// Create a corresponding State class.
// This class holds data related to the form.
class _Affiche_Ticket_Grattage_State extends State<Affiche_Ticket_Grattage> {
#override
void initState() {
Get_Ticket();
super.initState();
}
bool vis=false;
var gain;
var id_ticket;
Future Get_Ticket() async {
// SERVER LOGIN API URL
var url = 'https://www.easytrafic.fr/game_app/get_ticket.php';
// Store all data with Param Name.
var data = {'id_membre':globals.id_membre};
var ticket_encode=jsonEncode(data);
// Starting Web API Call.
var response = await http.post(url, body: ticket_encode,headers: {'content-type': 'application/json','accept': 'application/json','authorization': globals.token});
// Getting Server response into variable.
Map <String,dynamic> map = json.decode(response.body);
gain=map["gain"];
print(gain.toString());
id_ticket=map["id"];
print(id_ticket.toString());
}
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('GRATTAGE')),
drawer: new DrawerOnly(),
body:
Center(
child:
Column(
children: <Widget>[
Container(
width:400,
height:30,
margin: const EdgeInsets.only(top: 10.0),
child : new Text("Grattez votre ticket N °"+id_ticket.toString(),textAlign: TextAlign.center,style: TextStyle(fontSize: 30.0),),
),
Container(
padding: const EdgeInsets.all(30.0),
child:
Scratcher(
accuracy: ScratchAccuracy.medium,
brushSize: 35,
color: Colors.lightBlueAccent,
threshold: 80,
onThreshold: () {
setState(() {
vis = true;
});
print ("Ticket gratté !!!");
},
child:
Container(
width: 300,
height:300,
color: Colors.black,
alignment: Alignment.center,
child:
Text(gain.toString()+" €",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 50, color: Colors.red),
)
)
)
),
Visibility(
visible: vis,
child: Container(
width:300,
height:45,
margin: const EdgeInsets.only(top: 20.0),
child:
RaisedButton(
color: Colors.green,
textColor: Colors.white,
padding: EdgeInsets.fromLTRB(9, 9, 9, 9),
child: Text('VALIDER VOTRE TICKET'),
onPressed: () {
Valide_Ticket();
},
),
),
),
]
)
)
),
);
}
Future Valide_Ticket() async{
// SERVER LOGIN API URL
var url2 = 'https://www.easytrafic.fr/game_app/valide_ticket.php';
// Store all data with Param Name.
var data2 = {'id_membre':globals.id_membre,'id_ticket':id_ticket,'gain':gain};
var ticket_info=jsonEncode(data2);
// Starting Web API Call.
var response = await http.post(url2, body: ticket_info,headers: {'content-type': 'application/json','accept': 'application/json','authorization': globals.token});
// Getting Server response into variable.
Map <String,dynamic> map2 = json.decode(response.body);
if(map2["status"] == 1)
{
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: new Text(map2["message"]),
actions: <Widget>[
FlatButton(
child: new Text("OK"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Affiche_Liste_Grattage()),
);
},
),
],
);
},
);
}
}
}

Answer 1

You can use FutureBuilder for this issue. It wait for the future function to perform its task and then renders your page.
Another way would be to show an animation while the data is fetched. then use setState() to hide the animation and show the Widgets(based on the condition)