I'm writing a Flutter up that, thanks to wp-json, extracts article from a wp website. If the article has a featured image it is well displayed, full width and not stretched. If the article also has an img in the body then this image will be completely cut off and shifted to the right. I'd like the img to behave as the featured image.
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
.....
if(article.featuredImageUrl.isNotEmpty && !_isOffline)
CachedNetworkImage(
imageUrl: article.featuredImageUrl,
fit: BoxFit.fitWidth,
width: double.infinity,
cacheManager: customCacheManager,
placeholder: (context, url) => Shimmer.fromColors(
baseColor:
isDarkMode ? Colors.grey[800] ! : Colors.grey[300] !,
highlightColor:
isDarkMode ? Colors.grey[700] ! : Colors.grey[100] !,
child: Container(
width: double.infinity,
height: 200, // Altezza di default per il placeholder
color: Colors.white,
),
),
errorWidget: (context, error, stackTrace) {
return Container(
width: double.infinity,
height: 200,
color: Colors.grey[300],
child: const Center(
child: Icon(Icons.error_outline),
),
);
},
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Html(
data: article.content,
style: {
"body": Style(
fontSize: FontSize(16 * textScale),
lineHeight: LineHeight(1.6),
margin: Margins.zero,
color: isDarkMode ?
const Color(0xFFFFFFFF): Colors.black87,
),
"p": Style(
margin: Margins.only(bottom: 16),
fontSize: FontSize(16 * textScale),
color: isDarkMode ?
const Color(0xFFFFFFFF): Colors.black87,
),
"h1, h2, h3, h4, h5, h6": Style(
fontSize: FontSize.larger,
margin: Margins.only(bottom: 16, top: 24),
color:
isDarkMode ?
const Color(0xFFFFFFFF): Colors.black,
),
"strong": Style(
fontWeight: FontWeight.bold,
),
"em": Style(
fontStyle: FontStyle.italic,
),
"img": Style(
alignment: Alignment.center,
margin: Margins.symmetric(vertical: 16),
display: Display.block,
),
"figure": Style(
alignment: Alignment.center,
margin: Margins.symmetric(vertical: 16),
padding: HtmlPaddings.zero,
),
"figure img": Style(
alignment: Alignment.center,
margin: Margins.zero,
),
"figcaption": Style(
textAlign: TextAlign.center,
fontSize: FontSize(14 * textScale),
color: isDarkMode ? Colors.grey[400] : Colors.grey[600],
margin: Margins.only(top: 8),
),
},
shrinkWrap: true,
onLinkTap: (url, attributes, element) {
if (url != null && !_isOffline) {
_launchUrl(url);
} else if (_isOffline) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content:
Text('I link non sono disponibili offline'),
duration: Duration(seconds: 2),
),
);
}
},
),
),