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:
