lib/widgets/sponsored_banner.dartDart
import 'package:flutter/material.dart';
import '../core/localization/app_localizations.dart';
import '../core/theme/app_colors.dart';
import '../features/campaigns/campaign_landing_page.dart';
import '../models/ad_campaign.dart';
import '../services/analytics_service.dart';
import '../services/campaign_action_service.dart';
import 'campaign_creative_view.dart';
import 'remote_image.dart';
class SponsoredBanner extends StatefulWidget {
const SponsoredBanner({
super.key,
required this.campaign,
this.compact = false,
required this.placement,
this.onTapOverride,
});
final AdCampaign campaign;
final bool compact;
final String placement;
final VoidCallback? onTapOverride;
@override
State<SponsoredBanner> createState() => _SponsoredBannerState();
}
class _SponsoredBannerState extends State<SponsoredBanner> {
bool _tracked = false;
late AdCampaign _campaign;
@override
void initState() {
super.initState();
_campaign = widget.campaign;
Future.delayed(const Duration(seconds: 1), () {
if (mounted) {
AnalyticsService.instance.track('ad_view', properties: {
'campaign_id': _campaign.id,
'placement': widget.placement,
'duration_ms': 1000
});
}
});
}
@override
void didUpdateWidget(covariant SponsoredBanner oldWidget) {
super.didUpdateWidget(oldWidget);
_campaign = widget.campaign;
}
Future<void> _openCampaign() async {
await AnalyticsService.instance.adClick(
campaignId: _campaign.id,
placement: widget.placement,
);
if (!mounted) return;
if (widget.onTapOverride != null) {
widget.onTapOverride!();
return;
}
final opened = await CampaignActionService.open(context, _campaign);
if (!mounted || opened) return;
await Navigator.of(context).push(
MaterialPageRoute(
builder: (_) => CampaignLandingPage(campaign: _campaign),
),
);
}
@override
Widget build(BuildContext context) {
final campaign = _campaign;
if (!_tracked) {
_tracked = true;
WidgetsBinding.instance.addPostFrameCallback((_) {
AnalyticsService.instance.adImpression(
campaignId: campaign.id,
placement: widget.placement,
);
});
}
if (campaign.creativeType != CampaignCreativeType.legacy) {
return _ResponsiveCreativeBanner(
campaign: campaign,
compact: widget.compact,
onTap: _openCampaign,
);
}
if (widget.placement == 'nearby') {
return _NearbyNativeAdTile(
campaign: campaign,
onTap: _openCampaign,
);
}
return _LegacyCampaignTile(
campaign: campaign,
compact: widget.compact,
onTap: _openCampaign,
);
}
}
class _ResponsiveCreativeBanner extends StatelessWidget {
const _ResponsiveCreativeBanner({
required this.campaign,
required this.compact,
required this.onTap,
});
final AdCampaign campaign;
final bool compact;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final lang = Localizations.localeOf(context).languageCode;
final radius = BorderRadius.circular(compact ? 18 : 24);
return Semantics(
button: true,
label: campaign.headline.get(lang),
child: Material(
color: campaign.backgroundColor,
borderRadius: radius,
clipBehavior: Clip.antiAlias,
child: InkWell(
onTap: onTap,
child: LayoutBuilder(
builder: (context, constraints) {
final width = constraints.maxWidth.isFinite
? constraints.maxWidth
: MediaQuery.sizeOf(context).width;
final height = compact
? (width * 0.34).clamp(105.0, 190.0)
: (width * 0.48).clamp(170.0, 360.0);
return SizedBox(
width: double.infinity,
height: height,
child: Stack(
fit: StackFit.expand,
children: [
CampaignCreativeView(
campaign: campaign,
height: height,
semanticLabel: campaign.headline.get(lang),
),
Positioned(
left: 10,
top: 10,
child: _AdPill(label: l10n.t('advertisement')),
),
if (campaign.target.hasTarget ||
campaign.landingPageUrl?.trim().isNotEmpty == true)
Positioned(
right: 10,
bottom: 10,
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.black.withValues(alpha: 0.72),
borderRadius: BorderRadius.circular(999),
),
child: const Padding(
padding: EdgeInsets.all(8),
child: Icon(
Icons.arrow_outward_rounded,
color: Colors.white,
size: 18,
),
),
),
),
],
),
);
},
),
),
),
);
}
}
class _NearbyNativeAdTile extends StatelessWidget {
const _NearbyNativeAdTile({
required this.campaign,
required this.onTap,
});
final AdCampaign campaign;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final lang = Localizations.localeOf(context).languageCode;
final headline = campaign.headline.get(lang).trim();
final body = campaign.body.get(lang).trim();
final cta = campaign.buttonLabel.get(lang).trim();
return Material(
color: AppColors.surface,
borderRadius: BorderRadius.circular(20),
clipBehavior: Clip.antiAlias,
child: InkWell(
onTap: onTap,
child: Container(
width: double.infinity,
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
border: Border.all(color: AppColors.line),
borderRadius: BorderRadius.circular(20),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RemoteImage(
url: campaign.imageUrl ?? campaign.fallbackImageUrl,
width: 78,
height: 78,
fit: BoxFit.cover,
borderRadius: BorderRadius.circular(16),
fallbackIcon: Icons.campaign_rounded,
fallbackIconSize: 30,
semanticLabel: headline,
),
const SizedBox(width: 13),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
l10n.t('advertisement').toUpperCase(),
style: const TextStyle(
fontSize: 9,
color: AppColors.heartRed,
fontWeight: FontWeight.w900,
letterSpacing: 1.15,
),
),
if (headline.isNotEmpty) ...[
const SizedBox(height: 3),
Text(
headline,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 16,
height: 1.18,
fontWeight: FontWeight.w900,
),
),
],
if (body.isNotEmpty) ...[
const SizedBox(height: 5),
Text(
body,
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.mutedInk,
fontSize: 13,
height: 1.28,
),
),
],
if (cta.isNotEmpty) ...[
const SizedBox(height: 9),
Align(
alignment: Alignment.centerLeft,
child: DecoratedBox(
decoration: BoxDecoration(
color: AppColors.softPink,
borderRadius: BorderRadius.circular(999),
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 7,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Text(
cta,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.heartRed,
fontWeight: FontWeight.w800,
fontSize: 12,
),
),
),
const SizedBox(width: 5),
const Icon(
Icons.arrow_forward_rounded,
size: 15,
color: AppColors.heartRed,
),
],
),
),
),
),
],
],
),
),
],
),
),
),
);
}
}
class _LegacyCampaignTile extends StatelessWidget {
const _LegacyCampaignTile({
required this.campaign,
required this.compact,
required this.onTap,
});
final AdCampaign campaign;
final bool compact;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final lang = Localizations.localeOf(context).languageCode;
return Material(
color: AppColors.surface,
borderRadius: BorderRadius.circular(20),
child: InkWell(
borderRadius: BorderRadius.circular(20),
onTap: onTap,
child: Container(
padding: EdgeInsets.all(compact ? 13 : 16),
decoration: BoxDecoration(
border: Border.all(color: AppColors.line),
borderRadius: BorderRadius.circular(20),
),
child: Row(
children: [
RemoteImage(
url: campaign.imageUrl,
width: compact ? 58 : 72,
height: compact ? 58 : 72,
fit: BoxFit.cover,
borderRadius: BorderRadius.circular(15),
fallbackIcon: Icons.campaign_rounded,
fallbackIconSize: compact ? 26 : 30,
semanticLabel: campaign.headline.get(lang),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
l10n.t('advertisement'),
style: const TextStyle(
fontSize: 10,
color: AppColors.heartRed,
fontWeight: FontWeight.w900,
letterSpacing: 1.2,
),
),
const SizedBox(height: 2),
Text(
campaign.headline.get(lang),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(fontWeight: FontWeight.w800),
),
if (!compact) ...[
const SizedBox(height: 3),
Text(
campaign.body.get(lang),
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.mutedInk,
fontSize: 13,
),
),
],
],
),
),
const SizedBox(width: 8),
const Icon(Icons.arrow_forward_rounded),
],
),
),
),
);
}
}
class _AdPill extends StatelessWidget {
const _AdPill({required this.label});
final String label;
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
color: Colors.black.withValues(alpha: 0.68),
borderRadius: BorderRadius.circular(999),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 5),
child: Text(
label.toUpperCase(),
style: const TextStyle(
color: Colors.white,
fontSize: 9,
fontWeight: FontWeight.w900,
letterSpacing: 1.1,
),
),
),
);
}
}