lib/widgets/tour_featured_header.dartDart
import 'package:flutter/material.dart';
import '../core/theme/app_colors.dart';
import 'remote_image.dart';
/// Text overlay for the text-free WordPress tour featured image.
///
/// The artwork itself stays language-neutral. The localized tour title is
/// rendered by Flutter so a language switch updates the header immediately.
class TourFeaturedHeader extends StatelessWidget {
const TourFeaturedHeader({
super.key,
required this.imageUrl,
required this.title,
required this.height,
this.borderRadius = BorderRadius.zero,
this.compact = false,
this.thumbnail = false,
});
final String? imageUrl;
final String title;
final double height;
final BorderRadius borderRadius;
final bool compact;
/// Extra-small treatment for 92x82-ish list/search thumbnails.
/// Keeps the same CI hierarchy without making long localized titles unreadable.
final bool thumbnail;
@override
Widget build(BuildContext context) {
final hasImage = imageUrl?.trim().isNotEmpty == true;
final horizontalPadding = thumbnail
? 5.0
: compact
? 20.0
: 48.0;
final verticalPadding = thumbnail
? 4.0
: compact
? 10.0
: 22.0;
final titleSize = thumbnail
? 8.2
: compact
? 20.0
: 34.0;
final labelSize = thumbnail
? 6.4
: compact
? 11.0
: 17.0;
final titleLines = thumbnail
? 3
: compact
? 3
: 4;
final gap = thumbnail
? 3.0
: compact
? 8.0
: 16.0;
return ClipRRect(
borderRadius: borderRadius,
child: SizedBox(
width: double.infinity,
height: height,
child: Stack(
fit: StackFit.expand,
children: [
if (hasImage)
RemoteImage(
url: imageUrl,
width: double.infinity,
height: height,
fit: BoxFit.cover,
semanticLabel: title,
)
else
const DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xFFFFFBF8), Color(0xFFFFF3F5)],
),
),
),
Positioned.fill(
child: Center(
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: horizontalPadding,
vertical: verticalPadding,
),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
title,
maxLines: titleLines,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle(
color: const Color(0xFF1F2328),
fontSize: titleSize,
height: thumbnail ? 1.0 : 1.08,
fontWeight: FontWeight.w800,
letterSpacing: thumbnail
? -0.05
: compact
? -0.15
: -0.35,
shadows: const [
Shadow(
color: Color(0x33FFFFFF),
blurRadius: 8,
),
],
),
),
SizedBox(height: gap),
Text(
'— TOUR —',
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.heartRed,
fontSize: labelSize,
height: 1,
fontWeight: FontWeight.w800,
letterSpacing: thumbnail
? 0.65
: compact
? 2.2
: 3.8,
),
),
],
),
),
),
),
],
),
),
);
}
}