Custom dialog widget that scales height dynamically to child content

Viewed 55

I want to build a custom dialog whose child is a widget displaying the HTML content. I'm struggling with making the dialog's height size to its child. Currently, I'm giving the container a fixed height as otherwise it would crash due to unbounded height for Column. The package i use to display HTML content: Easy Web View.

My code:

class CustomContentDialog extends StatelessWidget {
  CustomContentDialog({required this.content});

  final String content;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Material(
        child: Container(
          width: MediaQuery.of(context).size.width * 0.3,
          height: MediaQuery.of(context).size.height * 0.8,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Padding(
                    padding:
                        const EdgeInsets.only(left: 24, bottom: 16, top: 16),
                    child: Text(
                      'Title',              
                    ),
                  ),
                  IconButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    icon: const Icon(
                      Icons.close,
                      color: Colors.grey,
                      size: 20,
                    ),
                  )
                ],
              ),
              const Divider(
                indent: 10,
                endIndent: 10,
                color: Color(0xFFE9E9E9),
              ),
              Flexible(
                fit: FlexFit.loose,
                child: Padding(
                  padding: const EdgeInsets.only(left: 24.0),
                  child: EasyWebView(
                    src: src,
                    onLoaded: () {},
                    isHtml: true,
                    isMarkdown: false,
                    convertToWidgets: false,
                    key: const Key('HTML'),       
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

What I've achieved so far:

enter image description here

0 Answers
Related