我要使用此加载小部件：https://pub.dev/packages/flutter_spinkit 但是我想知道无论显示的内容如何如何使该小部件在水平和垂直方向上居中（简单的容器很简单，但是当有futurebuilder且列中显示了很多小部件时，它就更复杂了。）
编辑：我的代码在：
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);
}
如您所见，装载机在这里：
Visibility(
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: visible,
child: Container(
child: SpinKitChasingDots(color: Colors.blueAccent,size:200)
)
),
问题：由于此代码使其溢出了123个像素，并且没有在水平和垂直方向居中，因此无法正常工作