Flutter：向文本添加自定义对话框

问题描述

我正在尝试在单击文本时创建自定义对话框。但对话框没有创建。 下面添加对话框实现代码

         child: new Center(
                child: new RichText(
                  text: new TextSpan(
                    children: [
                      new TextSpan(
                        text: 'Accept the ',style: new TextStyle(color: Colors.black),),new TextSpan(
                        text: 'Terms & Conditions',style: new TextStyle(
                            color: Colors.blue,fontWeight: FontWeight.bold),recognizer: new TapGestureRecognizer()
                          ..onTap = () {
                               CustomDialogBox(
                                title: "Custom Dialog Demo",descriptions: "Hii all this is a custom dialog in Flutter and  you will be use in your Flutter applications",text: "Yes",);
                          },],

添加自定义对话框代码。在新的 dart 页面中创建为新小部件并导入应用程序。 我们需要它作为一个小部件，我们可以在应用程序中多次使用它。 所以在一个新的飞镖页面中创建。

class CustomDialogBox extends StatefulWidget {
  final String title,descriptions,text;
  final Image img;

  const CustomDialogBox({Key key,this.title,this.descriptions,this.text,this.img}) : super(key: key);

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

class _CustomDialogBoxState extends State<CustomDialogBox> {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(Constants.padding),elevation: 0,backgroundColor: Colors.transparent,child: contentBox(context),);
  }
  contentBox(context){
    return Stack(
      children: <Widget>[
        Container(
          padding: EdgeInsets.only(left: Constants.padding,top: Constants.avatarRadius
              + Constants.padding,right: Constants.padding,bottom: Constants.padding
          ),margin: EdgeInsets.only(top: Constants.avatarRadius),decoration: Boxdecoration(
              shape: BoxShape.rectangle,color: Colors.white,borderRadius: BorderRadius.circular(Constants.padding),BoxShadow: [
                BoxShadow(color: Colors.black,offset: Offset(0,10),blurRadius: 10
                ),]
          ),child: Column(
            mainAxisSize: MainAxisSize.min,children: <Widget>[
              Text(widget.title,style: TextStyle(fontSize: 22,fontWeight: FontWeight.w600),SizedBox(height: 15,Text(widget.descriptions,style: TextStyle(fontSize: 14),textAlign: TextAlign.center,SizedBox(height: 22,Align(
                alignment: Alignment.bottomright,child: FlatButton(
                    onpressed: (){
                      Navigator.of(context).pop();
                    },child: Text(widget.text,style: TextStyle(fontSize: 18),)),);
  }
}

解决方法

您需要用“showDialog()”小部件包装“CustomDialogBox”。

  child: new Center(
                child: new RichText(
                  text: new TextSpan(
                    children: [
                      new TextSpan(
                        text: 'Accept the ',style: new TextStyle(color: Colors.black),),new TextSpan(
                        text: 'Terms & Conditions',style: new TextStyle(
                            color: Colors.blue,fontWeight: FontWeight.bold),recognizer: new TapGestureRecognizer()
                          ..onTap = () {
                               showDialog(
                                   context: context,builder: (BuildContext context) {
                                       return CustomDialogBox(
                                           title: "Custom Dialog Demo",descriptions: "Hii all this is a custom dialog in flutter and  you will be use in your flutter applications",text: "Yes",);
                                   }
                               );
                          },],

,

CustomDialogBox 没有问题……您在发布的问题中的 onTap 方法不正确。

你应该这样做

showDialog(
           context: context,builder: (BuildContext context) => CustomDialogBox(),)