Default components / Links & media
Image
Renders Markdown images, with optional dimensions parsed from the alt label.
What it renders
Live Flutter preview
Starting the Flutter widget
Rendering this component with gpt_markdown…
This is the real GptMarkdown Flutter widget, rendered with the exact Markdown input shown here.
Markdown input
1Default behavior
Runtime behavior
A WxH alt label supplies requested dimensions. The default renderer applies ImageStyle borderRadius and padding; use imageBuilder for fit or size constraints.
Accessibility note
Use descriptive alt text when the image communicates information, and provide a useful error state if replacing the renderer.
Theming & styling
Theme layering guideImageStyle is the component's appearance surface. Set only the values you need; style-sheet values merge field-by-field with the active theme and package defaults.
| Style class | Available fields |
|---|---|
| ImageStyle | borderRadius · padding |
1GptMarkdown(
2 markdown,
3 styleSheet: const GptMarkdownStyleSheet(
4 image: ImageStyle(
5 borderRadius: Radius.circular(8),
6 padding: EdgeInsets.symmetric(vertical: 8),
7 ),
8 ),
9 imageBuilder: (context, url, width, height) => CachedNetworkImage(
10 imageUrl: url, width: width, height: height,
11 ),
12)App-wide or scoped theme
1GptMarkdownThemeData(
2 brightness: Brightness.light,
3 styleSheet: const GptMarkdownStyleSheet(
4 image: ImageStyle(
5 // Set only the values your app needs.
6 ),
7 ),
8)Builders & callbacks
imageBuilder
Widget Function(BuildContext context, String url, double? width, double? height)
Use this only when the default widget structure is no longer the right shape. The resolved style or configuration is passed where applicable.
onImageTap
void Function(String url)
Use it to open a lightbox or a source page.
Safely override the default
A custom component list replaces a default list entirely. Put your matching component first, then append the package defaults so every other Markdown feature continues to render.
1// Passing inlineComponents replaces its defaults. Prepend to override matching syntax,
2// then keep every built-in component after it.
3GptMarkdown(
4 markdown,
5 inlineComponents: [
6 MyImageMdOverride(),
7 ...MarkdownComponent.inlineComponents,
8 ],
9)