White space around dialog box | Flutter-CodePudding

i am trying to make an otp verification dialog in flutter but it keeps adding padding/ white space around the actual widget and I don't know how to remove it. I've tried making the inset padding zero and content padding zero but it just changes the size of dialog box and does nothing with the difference in widget and dialog box. Here's my code:

      return AlertDialog(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),

    contentPadding: const EdgeInsets.all(0),
    content: Container(
      height: 244,
      width: 380,
      padding: EdgeInsets.symmetric(vertical: 12, horizontal: 30),
      child: Card(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Expanded(
              flex: 30,
              child : Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                mainAxisSize: MainAxisSize.max,
                children: [
                  Expanded(
                      flex: 66,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        // crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            "Verification",
                            // textAlign: TextAlign.left,
                            style: GoogleFonts.lato(
                                fontSize: 20,

                                fontWeight: FontWeight.w700,
                                color: Color(0xff4D4D4D)),
                          ),
                          SizedBox(
                            height: 6,
                          ),
                          Container(
                            padding: EdgeInsets.symmetric(horizontal: 15),
                            child: Text(
                              "We have just sent your phone an OTP, please enter below to verify",
                              textAlign: TextAlign.left,
                              style: GoogleFonts.lato(
                                  fontSize: 7,
                                  fontWeight: FontWeight.w500,
                                  color: Color(0xff4D4D4D)),
                            ),
                          ),
                        ],
                      )),
                  Expanded(
                      flex: 33,
                      child: Image.asset("assets/images/smartphone_verification.png",scale:5,))
                ],
              ),
            ),
            // SizedBox(height: 100,),
            // SizedBox(height: 50,),
            Container(
              width: 331,
              height: 41,
              child: ElevatedButton(
                  onPressed: (){},
                  style: ButtonStyle(
                      backgroundColor:
                      MaterialStateProperty.all(Color(0xFF0E3C6E)),
                      shape: MaterialStateProperty.all<
                          RoundedRectangleBorder>(
                          RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(25.0),
                            // side: BorderSide(color: Colors.red)
                          ))),

                  child: Text("Verify")),
            )
          ],
        ),
      ),
    ),
  );

It looks like this while it should look like this

CodePudding user response：

this padding you talk about come from this line:

padding: EdgeInsets.symmetric(vertical: 12, horizontal: 30),

in first container, and also put card elevation to 0.

CodePudding user response：

The card widget has got elevation and padding too. Please remove the card widget and add

mainAxisSize : MainAxisSize.min