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

enter image description here

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:

result

Share:
1,400
AVEbrahimi
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, 2022

Comments

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

    enter image description here