flutterflutter-layoutflutter-dialog

How to create a responsive dialog


I'm trying to style a Dialog() widget; but it doesn't realy let me deal with height and widht as I'd usually do it.

In a nutshell: I placed all content in a Container and I want that container to only be as high as it needs to be. But the Dialog() widget seems to only let me set it's size by manipulating the insetPadding. Code first, screenshot below.

Code:

    class _CustomDialogueState extends State<CustomDialogue> {
  @override
  Widget build(BuildContext context) {
    return Dialog(
        backgroundColor: Colors.transparent,
        insetPadding: EdgeInsets.fromLTRB(25.w, 108.h, 25.w, 185.h),
        alignment: Alignment.topCenter,
        //
        child: Stack(
          //clipBehavior: Clip.antiAlias,
          alignment: Alignment.center,
          children: [
            Container(//THIS IS THE CONTAINER HOLDING ALL THE CONTENT
              width: double.infinity,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10.r),
                  color: Provider.of<CustomColors>(context, listen: false)
                      .customColorScheme['White']),
              margin: EdgeInsets.fromLTRB(10.w, 50.h, 10.w, 10.h),
              child: Column(
                children: [
                  //
                  SizedBox(height: 45.h),
                  //
                  Text(
                    'Welcome to THREE THINGS',
                    style: Provider.of<CustomTextStyle>(context, listen: false)
                        .customTextStyle('Main 1'),
                  ),
                  //
                  SizedBox(
                    height: 12.h,
                  ),// MORE CONTENT FROM HERE; BUT NOT RELEVANT FOR THE ISSUE; SEE SEESREENSHOT

Screenshot of three emulated devices:

enter image description here


Solution

  • I had this problem before. Just add a SingleChildScrollView in the child of Dialog.