Dialog with stroked round background in Flutter - user-interface

Question

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(),
)
);
},
);

Answer 1

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

Answer 2

Apply locally:
showDialog(
context: context,
builder: (context) {
return Dialog(
backgroundColor: Colors.grey,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
side: BorderSide(width: 3.0, color: Colors.black),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"title",
style: getBodyTextStyle(),
),
),
);
},
);
Apply globally:
class Application extends StatelessWidget {
#override
Widget build(BuildContext context) {
final baseThemeData = ThemeData.light();
final themeData = baseThemeData.copyWith(
dialogTheme: baseThemeData.dialogTheme.copyWith(
backgroundColor: Colors.grey,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
side: BorderSide(width: 3.0, color: Colors.black),
),
),
);
return MaterialApp(
themeMode: ThemeMode.light,
theme: themeData,
...
);
}
void _openDialog(BuildContext context) {
showDialog(
context: context,
builder: (context) {
return Dialog(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"title",
style: getBodyTextStyle(),
),
),
);
},
);
}
}
The result for both variants:

Answer 3

you can add a container as child of another container, and put margin for inner container:
child: Container(
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(20.0),
topRight: const Radius.circular(20.0),
bottomLeft: const Radius.circular(20.0),
bottomRight: const Radius.circular(20.0)
)
),
child: Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0)
)
),
margin: EdgeInsets.all(1.0),
child:Padding(
padding: EdgeInsets.all(16),
child:Container(height:50,width:100))