how can we center the loader widget flutter_spinkit? - flutter

Question

I want use this loading widget : https://pub.dev/packages/flutter_spinkit
But i would like to know how i can center horizontally and vertically this widget whatever the content displayed (simple container it is simple but when there is futurebuilder and a lot of widget displayed in column it is more complicated).
EDIT : My code is Under :
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'menu_member.dart';
import 'globals.dart' as globals;
import 'appbar_draw.dart';
import 'package:awesome_dialog/awesome_dialog.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:firebase_admob/firebase_admob.dart';
import 'package:intl/intl.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
const testDevices = "Your_DEVICE_ID";
// Create a Form widget.
class Affiche_Liste_Tombola extends StatefulWidget {
#override
_Affiche_Liste_Tombola_State createState() {
return _Affiche_Liste_Tombola_State();
}
}
// Create a corresponding State class.
// This class holds data related to the form.
class _Affiche_Liste_Tombola_State extends State<Affiche_Liste_Tombola> {
#override
static const MobileAdTargetingInfo targetingInfo = MobileAdTargetingInfo(testDevices: testDevices!=null ? <String> ['tessDevices'] : null,keywords: <String> ['game','bet'],nonPersonalizedAds: true);
RewardedVideoAd VideoAd = RewardedVideoAd.instance;
bool load=false;
bool visible=false;
String tombola_select="";
Future<List<Tombola>> ListTombola;
Future <List<Tombola>> Tombola_display() async {
// SERVER LOGIN API URL
var url = 'https://www.easytrafic.fr/game_app/display_list_tombola.php';
var data = {
'id_membre': globals.id_membre,
};
var data_encode = jsonEncode(data);
// Starting Web API Call.
var response = await http.post(url,body: data_encode,headers: {'content-type': 'application/json','accept': 'application/json','authorization': globals.token});
// Getting Server response into variable.
var jsondata = json.decode(response.body);
List<Tombola> Tombolas = [];
for (var u in jsondata) {
Tombola tombola = Tombola(u["id"],u["libelle"],u["date_debut_validation"],u["gain"],u["nb_tickets_achat"],u["nb_tickets_total"],u["nb"]);
Tombolas.add(tombola);
}
return Tombolas;
}
void initState() {
super.initState();
//FirebaseAdMob.instance.initialize(appId: "ca-app-pub-8677431175756102~8892789953");
FirebaseAdMob.instance.initialize(appId: FirebaseAdMob.testAppId);
VideoAd.listener=(RewardedVideoAdEvent event,{String rewardType, int rewardAmount}) {
print('REWARDED VIDEO ADS $event');
if (event == RewardedVideoAdEvent.rewarded) {
setState(() {
load=false;
});
Valide_tombola(tombola_select);
}
if (event == RewardedVideoAdEvent.loaded) {
print('VIDEO LOADED !!!');
load=true;
visible=false;
VideoAd.show();
}
};
ListTombola = Tombola_display();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: drawappbar(true),
drawer: new DrawerOnly(className: Affiche_Liste_Tombola()),
body:
Center(
child:
Column(
children: <Widget>[
Visibility(
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: visible,
child: Container(
child: SpinKitChasingDots(color: Colors.blueAccent,size:200)
)
),
Container(
height: MediaQuery.of(context).size.height*0.8,
width: MediaQuery.of(context).size.width*0.8,
child:
FutureBuilder(
future: ListTombola,
builder: (BuildContext context, AsyncSnapshot snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.waiting:
setState(() {
visible=true;
});
break;
default:
if (snapshot.hasError) {
return new Center(
child: new Text('Error: ${snapshot.error}'),);
}
else {
List<Tombola> values = snapshot.data;
if (values.isEmpty) {
return Container(
child: Center(
child: Text("Aucune tombola disponible !!!")
)
);
}
else {
return ListView.builder(itemCount: values.length,
itemBuilder: (_, index) {
var mt_jackpot=double.parse(values[index].gain);
var f = new NumberFormat.currency(locale: "fr-FR",symbol: "");
var mt_jackpot_f=f.format(mt_jackpot);
return Column(
children: [
Container(
height: 30,
width: MediaQuery.of(context).size.width*90/100,
margin : EdgeInsets.only(top:20),
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue[700],
width: 2,
),
borderRadius: BorderRadius.only(topLeft : Radius.circular(25),topRight: Radius.circular(25)),
color: Colors.blue[700]
),
child : new Text(values[index].libelle,textAlign: TextAlign.center,style: TextStyle(fontSize: 18.0,fontWeight: FontWeight.w500,color: Colors.white),),
),
Center(
child : Container(
height:MediaQuery.of(context).size.height/4,
width: MediaQuery.of(context).size.width*90/100,
margin: EdgeInsets.only(bottom:20),
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey[500],
width: 2,
),
borderRadius: BorderRadius.only(bottomLeft : Radius.circular(25),bottomRight: Radius.circular(25)),
color:Colors.white,
),
child :
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
margin : EdgeInsets.only(bottom:10),
child : RichText(
text: TextSpan(
children: [
TextSpan(
text: mt_jackpot_f,
style: TextStyle(fontSize: 20,fontWeight: FontWeight.w800,color: Colors.black)
),
WidgetSpan(
child: Icon(FontAwesomeIcons.euroSign,color: Colors.amber[900],size:20)
),
],
),
),
),
Container(
margin : EdgeInsets.only(bottom:10),
child :
Text("Vos tickets : "+values[index].nb_tickets_membre)
),
Container(
child : RaisedButton(
color: Colors.green,
textColor: Colors.white,
padding: EdgeInsets.fromLTRB(
9, 9, 9, 9),
child: Text(
'PARTICIPEZ'),
onPressed: () {
tombola_select=values[index].id;
setState(() {
visible=true;
});
VideoAd.load(
adUnitId: RewardedVideoAd.testAdUnitId,
targetingInfo: targetingInfo);
},
),
)
]
),
),
)
]
);
}
);
}
}
}
}
)
)
]
)
)
);
}
Future Valide_tombola(String id_tombola) async{
// For CircularProgressIndicator.
bool visible = false ;
// Showing CircularProgressIndicator.
setState(() {
visible = true ;
});
// SERVER LOGIN API URL
var url = 'https://www.easytrafic.fr/game_app/valide_tombola.php';
// Store all data with Param Name.
var data = {'id_membre':globals.id_membre, 'id_tombola':id_tombola};
var tombola_encode=jsonEncode(data);
// Starting Web API Call.
var response = await http.post(url, body: tombola_encode,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 the Response Message is Matched.
if(map2["status"] == 1)
{
setState(() {
ListTombola=Tombola_display();
});
AwesomeDialog(context: context,
useRootNavigator: true,
dialogType: DialogType.SUCCES,
animType: AnimType.BOTTOMSLIDE,
tittle: 'VALIDATION',
desc: map2["message"],
btnOkOnPress: () {
}).show();
}else{
// Showing Alert Dialog with Response JSON Message.
AwesomeDialog(context: context,
useRootNavigator: true,
dialogType: DialogType.ERROR,
animType: AnimType.BOTTOMSLIDE,
tittle: 'ERREUR',
desc: map2["message"],
btnOkOnPress: () {
}).show();
}
}
}
class Tombola {
final String id;
final String libelle;
final String datedebut;
final String gain;
final String nb_tickets_achat;
final String nb_tickets_total;
final String nb_tickets_membre;
const Tombola(this.id, this.libelle, this.datedebut,this.gain,this.nb_tickets_achat,this.nb_tickets_total,this.nb_tickets_membre);
}
As you can see the loader is here :
Visibility(
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: visible,
child: Container(
child: SpinKitChasingDots(color: Colors.blueAccent,size:200)
)
),
problem : it doesn't work because this code make it is overflowed by 123 pixel and because it is not centered horizontally and vertically