Flutter - AlertDialog 弹出而不显示其内容

如何解决Flutter - AlertDialog 弹出而不显示其内容

我正在 Flutter 中构建一个应用程序，为了改善其整体外观和流畅度，我决定创建一个自定义 AlertDialog，它在弹出时具有动画效果。不幸的是，它显示了一个我不知道如何解决的错误：有时，当我单击使 CustomAlertDialog 弹出的按钮时，它完美地做到了；但是，也有其他时候，小部件只是完全空白地弹出，而不显示其内容。我附上了两张演示这种行为的图片，以及 CustomAlertDialog 小部件的代码和我用来让它弹出的按钮。

我该如何解决？

没有错误的图像 [1]：

带有错误 [2] 的图像：https://i.stack.imgur.com/IP9mK.jpg

这是我用来创建 CustomAlertDialog 的代码：

import 'package:flutter/material.dart';

class CustomAlertDialog extends StatefulWidget {

  String titulo;
  String texto;
  String textoBotao1;
  String textoBotao2;
  final VoidCallback funcaoBotao1;
  final VoidCallback funcaoBotao2;

  CustomAlertDialog({Key key,@required this.texto,@required this.titulo,this.textoBotao1,this.textoBotao2,this.funcaoBotao1,this.funcaoBotao2}) : super(key: key);

  @override
  _CustomAlertDialogState createState() => _CustomAlertDialogState();
}

class _CustomAlertDialogState extends State<CustomAlertDialog> with SingleTickerProviderStateMixin {

  AnimationController controller;
  Animation<double> animacaoEscala;

  @override
  void initState() {

    controller = AnimationController(
        vsync: this,duration: Duration(milliseconds: 550));

    animacaoEscala = CurvedAnimation(parent: controller,curve: Curves.elasticInOut);
    super.initState();

    controller.addListener(() {
      setState(() {
      });
    });

    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Material(
        color: Colors.transparent,child: ScaleTransition(
          scale: animacaoEscala,child: AlertDialog(
            elevation: 2,title: Text(widget.titulo),content: Text(widget.texto,textAlign: TextAlign.start,),actions: <Widget>[
              widget.textoBotao1 != null ? FlatButton(
                child: Text('${widget.textoBotao1}',style: TextStyle(color: Colors.indigo),onPressed: widget.funcaoBotao1,) : SizedBox.shrink(),widget.textoBotao2 != null ? FlatButton(
                child: Text('${widget.textoBotao2}',onPressed: widget.funcaoBotao2,],);
  }
}

这是我用来弹出这个 CustomAlertDialog 的按钮的代码：

Container(
                  height: sizeConfig.blockSizeVertical*30,decoration: BoxDecoration(
                    color: Colors.redAccent,child: Material(
                    color: Colors.transparent,child: InkWell(
                      onTap: () {
                        showDialog(context: context,builder: (BuildContext context){
                              return CustomAlertDialog(
                                  texto: '\nTem certeza de que deseja sair?',titulo: 'Sair',textoBotao1: 'Não',textoBotao2: 'Sim',funcaoBotao1: ()
                              {Navigator.pop(context);},funcaoBotao2: () async {
                                await fazerLogout(context);
                              },);
                            });
                      },splashColor: Colors.white,child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,children: [
                          Icon(Icons.logout,color: Colors.white,size: sizeConfig.blockSizeVertical*14,Text('Sair',style: TextStyle(color: Colors.white,fontSize: sizeConfig.blockSizeVertical*12))
                        ],)

解决方法

当您使用正确的小部件来处理 AlertDialog 的动画（缩放）部分时，您缺少了在制作动画时处理相应重建的部分。目前你的对话树是：

child: Material(
  color: Colors.transparent,child: ScaleTransition(
    scale: animacaoEscala,child: AlertDialog(

您需要使用 ScaleTransition 小部件包装您的 AnimatedBuilder 小部件，该小部件获取实际的 AnimationController 并在控制器处于活动状态/动画时重建：

child: Material(
  color: Colors.transparent,child: AnimatedBuilder(
    animation: controller,child: ScaleTransition(
      scale: animacaoEscala,child: AlertDialog(