Flutter中GridView嵌入AdMob矩形广告宽度适配及报错问题

1. 修复"Incorrect use of ParentDataWidget."错误 #

错误根源是Expanded组件被错误放置在Center（非Flex容器）的子节点中，直接移除Expanded即可：

Widget _buildAdContainer({required double width, required double height}) {
  return Padding(
    padding: const EdgeInsets.all(8.0),
    child: SizedBox(
      width: width,
      height: height,
      child: Center(
        child: AdmobAdUnits.getRectangleBannerAd() == null
            ? Container()
            : Container(
                margin: const EdgeInsets.only(bottom: 12),
                child: AdWidget(ad: AdmobAdUnits.getRectangleBannerAd()!),
              ),
      ),
    ),
  );
}

2. 实现广告跨列并适配尺寸 #

普通GridView无法单独指定某个item跨列，需要使用flutter_staggered_grid_view包实现瀑布流布局，让广告项占据整行（两列）：

步骤1：添加依赖 #

在pubspec.yaml中添加：

dependencies:
  flutter_staggered_grid_view: ^0.7.0 # 请使用最新版本

步骤2：替换为StaggeredGridView #

修改原GridView代码为：

Padding(
  padding: const EdgeInsets.only(top: 10.0),
  child: StaggeredGridView.builder(
    controller: _scrollController,
    physics: const BouncingScrollPhysics(),
    itemCount: utilityController.amazonShopModel!.length + 
        (utilityController.amazonShopModel!.length / 6).ceil(),
    gridDelegate: const SliverStaggeredGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      mainAxisSpacing: 8,
      crossAxisSpacing: 8,
    ),
    itemBuilder: (context, position) {
      // 判断是否为广告位置：每6个商品后插入一个广告
      bool isAd = position > 0 && (position + 1) % 7 == 0;
      if (isAd) {
        // 广告宽度适配屏幕（减去左右padding）
        double adWidth = MediaQuery.of(context).size.width - 16;
        return _buildAdContainer(width: adWidth, height: 250.0);
      } else {
        // 计算实际数据索引：跳过广告位置
        final dataIndex = position - (position ~/ 7);
        return AmazonShopItems(
          amazonShopModel: utilityController.amazonShopModel![dataIndex],
        );
      }
    },
    staggeredTileBuilder: (int index) {
      // 广告项跨2列，普通商品项占1列
      bool isAd = index > 0 && (index + 1) % 7 == 0;
      return isAd ? const StaggeredTile.fit(2) : const StaggeredTile.fit(1);
    },
  ),
);

关键说明 #

• StaggeredTile.fit(2)让广告项占据整个行的宽度（对应原GridView的两列），解决了广告仅作为单网格项显示的问题
• 广告宽度设置为MediaQuery.of(context).size.width - 16，适配左右各8的padding，保证广告填满可用宽度
• 移除了原GridView的childAspectRatio，商品项的比例可在AmazonShopItems内部维护

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