Dialog with stroked round background in Flutter
1,400
Solution 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
Solution 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:
Author by
AVEbrahimi
Untying an impossibly tangled knot is actually possible. For every problem, there is a solution. And I am just one who is interested in untying and solving, that's it :)
Updated on December 15, 2022Comments
-
AVEbrahimi over 1 year
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(), ) ); }, );