Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dialog with stroked round background in Flutter

I want to create a dialog having round cornered background and this background has a 3 pixel stroke, like attached image. I used code below for rounded corners, but how can I add stroke to background?

showDialog(
        context: context,
        builder: (BuildContext context) {
          return Dialog(
             backgroundColor: pinkBackground,
             shape: RoundedRectangleBorder(borderRadius: 
                BorderRadius.all(Radius.circular(10.0))),
  child: Text(
    "title",

    style: getBodyTextStyle(),
  )
);
        },
      );

enter image description here

like image 629
AVEbrahimi Avatar asked Dec 04 '25 17:12

AVEbrahimi


1 Answers

try to add Container as your Dialog child and declareBoxDecoration in it

 showDialog(
    context: context,
    builder: (BuildContext context) {
    return Dialog(
    backgroundColor: AppColors.colorGreen,
    shape: RoundedRectangleBorder(
    borderRadius:
    BorderRadius.all(Radius.circular(10.0))),
    child: Container(
    decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent,width: 2),
    borderRadius:
    BorderRadius.all(Radius.circular(10.0))),
    child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Text(
     "title",
        ),
     ),
    ));
  },
);

Output

enter image description here

like image 190
Ravinder Kumar Avatar answered Dec 07 '25 07:12

Ravinder Kumar