Flutter：强制AdMob横幅广告填满父Container宽度

要强制让横幅广告填满红色Container，你可以通过Flutter的布局组件忽略广告的原生固定尺寸，直接拉伸适配容器。具体实现如下：

• 使用FittedBox包裹广告组件，指定fit: BoxFit.fill，让广告完全填充父容器的空间
• 外层的红色Container需要有明确的尺寸约束（比如固定宽高，或者通过Expanded占满父布局的可用空间）

完整代码示例 #

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

class StretchedBannerAd extends StatefulWidget {
  const StretchedBannerAd({super.key});

  @override
  State<StretchedBannerAd> createState() => _StretchedBannerAdState();
}

class _StretchedBannerAdState extends State<StretchedBannerAd> {
  BannerAd? _bannerAd;
  bool _adLoaded = false;

  // 测试用广告ID，正式环境替换为你的AdUnitId
  final String _testAdUnitId = 'ca-app-pub-3940256099942544/6300978111';

  @override
  void initState() {
    super.initState();
    _loadBanner();
  }

  void _loadBanner() {
    _bannerAd = BannerAd(
      adUnitId: _testAdUnitId,
      size: AdSize.banner, // 保留标准横幅尺寸，后续通过布局拉伸
      request: const AdRequest(),
      listener: BannerAdListener(
        onAdLoaded: (ad) => setState(() => _adLoaded = true),
        onAdFailedToLoad: (ad, error) {
          ad.dispose();
          debugPrint('广告加载失败: $error');
        },
      ),
    )..load();
  }

  @override
  void dispose() {
    _bannerAd?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // 红色背景的Container，这里设置占满屏幕宽度+固定高度作为示例
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: 120,
          color: Colors.red,
          child: _adLoaded
              ? FittedBox(
                  fit: BoxFit.fill,
                  child: SizedBox(
                    width: _bannerAd!.size.width.toDouble(),
                    height: _bannerAd!.size.height.toDouble(),
                    child: AdWidget(ad: _bannerAd!),
                  ),
                )
              : const Center(child: Text('加载广告中...')),
        ),
      ),
    );
  }
}

关键说明 #

1. 拉伸原理：FittedBox会将子组件（这里是广告）缩放到完全匹配父容器的尺寸，BoxFit.fill会强制广告填满整个容器，不管原有的宽高比，所以可能会导致广告内容变形
2. 可选调整：如果不想完全变形，可将BoxFit.fill改为BoxFit.cover，这样广告会保持比例并尽可能覆盖容器，但超出部分会被裁剪
3. 尺寸约束：父容器必须有明确的尺寸（比如固定宽高、通过MediaQuery获取屏幕尺寸、或者用Expanded/Flex占满父布局），否则FittedBox无法确定拉伸目标

内容的提问来源于stack exchange，提问作者Pedro Rabbi