Flutter Image Asset在真机非Row父组件页面加载失败问题

问题根源 #

异常日志已经明确指出：Expanded组件只能直接放在Flex（Row、Column均为Flex子类）组件内部，而你第一个HomePageBanner被包裹在AspectRatio中——AspectRatio不属于Flex组件，导致Expanded无法正确应用布局约束。真机的布局校验比模拟器严格，所以触发了断言错误，模拟器因宽松校验未暴露问题。

修复方案 #

步骤1：修改HomePageBanner组件，移除外层的Expanded

原组件的Expanded是适配Row场景的，但在AspectRatio场景下完全多余，直接移除即可：

PageView.builder(
  onPageChanged: (value) {
    _currentPageBanner = value;
  },
  itemCount: participants.length, 
  controller: pageController,
  itemBuilder: ((context, index) {
    return GestureDetector(
      onTap: () {
        _launchURL(url: participants[index].url);
      },
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 5),
        margin: const MarginConstant.all(),
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
                color:
                    ColorConstants.instance.kPrimaryColor.withOpacity(.3),
                blurRadius: 5,
                spreadRadius: 1),
          ],
          borderRadius: const RadiusConstant.all(),
          color: Colors.white,
        ),
        child: ClipRRect(
          borderRadius: const RadiusConstant.all(),
          child: Image.asset(
            participants[index].imageAsset,
            fit: BoxFit.contain,
          ),
        ),
      ),
    );
  }),
);

步骤2：在Row场景下手动添加Expanded

因为Row需要子组件平分宽度，所以在Row里使用Banner时，在外层包裹Expanded：

AspectRatio(
  aspectRatio: 16 / 6,
  child: Row(
    children: [
      Expanded(child: HomePageBanner()),
      Expanded(child: HomePageBanner()),
    ],
  ),
),

效果说明 #

• 当Banner在AspectRatio内时，PageView会自动占满AspectRatio约束的空间，无需Expanded；
• 当Banner在Row内时，Expanded会让两个Banner平分Row的宽度，保持原有布局效果。

内容的提问来源于stack exchange，提问作者B. Mercan