flutter - 我们如何使加载器小部件flutter_spinkit居中？

Question

我想使用这个加载小部件：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 像素并且因为它没有水平和垂直居中

标签： flutter