Home > Software design >  How to create a custom dialogue with image parameter in flutter
How to create a custom dialogue with image parameter in flutter

Time:10-27

I'm trying to create a custom dialogue box, where i'm passing title, text and image parameter, when i call the dialogue box, it is not display image, here is the code

this is the code of Dialogue box.

class LoginSucessDailog extends StatefulWidget {
  final String title, text;
  final Image img;
  
  
  
  
 const LoginSucessDailog({ required this.title, required this.text,required this.img });
  @override
  _LoginSucessDailogState createState() => _LoginSucessDailogState();
}

class _LoginSucessDailogState extends State<LoginSucessDailog> {

  @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(
         
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
             
              Image.asset(
                widget.img.toString(),
                width: 100,
              ),
              
              Text(
                widget.title,
                style:GoogleFonts.montserrat(fontSize: 22, fontWeight: FontWeight.w600),
              ),
             
              Padding(
                padding: const EdgeInsets.only(left: 20, right: 20),
                child: RichText(
                  textAlign: TextAlign.center,
                  text: TextSpan(
                    style: TextStyle(
                      color: Colors.black,
                    ),
                    children: <TextSpan>[
                      TextSpan(
                          text:widget.text,
                          style: GoogleFonts.montserrat(fontSize: 16, color: Colors.grey)),
                      
                    ],
                  ),
                ),
              ),
              SizedBox50(),
              okay()
            ],
          ),
        ),
      ],
    );
  }
}

and here i'm calling it as like this

 showDialog(
              context: context,
              builder: (BuildContext context) {
                return LoginSucessDailog( text: 'Phone number doesnt exists!',
               title: 'Error',
               img:Image.asset("assets/img/alert.png"));
              });

but it send me this error


Unable to load asset: Image(image: AssetImage(bundle: null, name: "assets/img/alert.png"), frameBuilder: null, loadingBuilder: null, alignment: Alignment.center, this.excludeFromSemantics: false, filterQuality: low)

widget.img.toString(), if i'm not converting it into string then it gives me this error

The argument type 'Image' can't be assigned to the parameter type 'String'.

please help how to solve it .

CodePudding user response:

I changed the passed value and adapt the constructor dialog.

 showDialog(
              context: context,
              builder: (BuildContext context) {
                return LoginSucessDailog( text: 'Phone number doesnt exists!',
               title: 'Error',
               img:'assets/img/alert.png');
              });
class LoginSucessDailog extends StatefulWidget {
  final String title, text, img;
  
 const LoginSucessDailog({ required this.title, required this.text,required this.img });
  @override
  _LoginSucessDailogState createState() => _LoginSucessDailogState();
}

class _LoginSucessDailogState extends State<LoginSucessDailog> {

  @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(
         
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
             
              Image.asset(
                widget.img,
                width: 100,
              ),
              
              Text(
                widget.title,
                style:GoogleFonts.montserrat(fontSize: 22, fontWeight: FontWeight.w600),
              ),
             
              Padding(
                padding: const EdgeInsets.only(left: 20, right: 20),
                child: RichText(
                  textAlign: TextAlign.center,
                  text: TextSpan(
                    style: TextStyle(
                      color: Colors.black,
                    ),
                    children: <TextSpan>[
                      TextSpan(
                          text:widget.text,
                          style: GoogleFonts.montserrat(fontSize: 16, color: Colors.grey)),
                      
                    ],
                  ),
                ),
              ),
              SizedBox50(),
              okay()
            ],
          ),
        ),
      ],
    );
  }
}
  • Related