Flutter应用Release模式页面显示异常，Debug模式正常求助

架构老林

2026-6-14

Flutter应用Release模式页面显示异常问题

问题现象

应用包含Home、Category和Video Player三个页面，Debug模式完全正常，但Release模式下所有页面显示异常：

Home页面：基于CustomScrollView实现，包含SliverAppBar和SliverBody。Debug模式下布局完整，SliverAppBar展开/收起正常，内容列表排列整齐；Release模式下SliverAppBar样式错乱，内容区域布局偏移、元素重叠。
Category页面：包含居中Logo的AppBar和网格布局。Debug模式下AppBar显示正常，网格卡片排列规整；Release模式下AppBar高度异常，网格布局间距错乱、卡片溢出。
Video Player页面：包含居中Logo的AppBar和基于better_player_plus包的播放器（需从Home/Category页跳转进入）。Debug模式下播放器正常加载播放；Release模式下AppBar样式异常，播放器区域空白无内容。

核心代码片段

Home Page

Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      slivers: [
        SliverAppBarWidget(),
        SliverBodyWidget(),
      ],
    )
  );
}

SliverAppBarWidget

Widget build(BuildContext context) {
  return SliverAppBar(
    leading: IconButton(
      onPressed: () {},
      icon: Icon(
        Icons.menu_sharp,
        color: AppColors.backgroundColor,
        size: AppConstants.kDeviceWidth * 0.1,
      ),
    ),
    toolbarHeight: AppConstants.kDeviceWidth * 0.15,
    backgroundColor: Colors.yellow.shade600,
    forceElevated: true,
    pinned: true,
    expandedHeight: AppConstants.kDeviceHeight * 0.1775,
    flexibleSpace: Stack(
      children: [
        FlexibleSpaceBar(
          background: Image(
            image: AssetImage(Assets.imagesAppBaar),
            fit: BoxFit.cover,
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: FractionalTranslation(
            translation: Offset(0, 0.5),
            child: SizedBox(
                width: AppConstants.kDeviceWidth * 0.3,
                height: AppConstants.kDeviceWidth * 0.3,
                child: Image.asset(
                  Assets.imagesSoofra,
                  fit: BoxFit.cover,
                )),
          ),
        ),
      ],
    ),
  );
}

SliverBodyWidget

Widget build(BuildContext context) {
  return SliverPadding(
    padding: EdgeInsets.symmetric(
      horizontal: AppConstants.kDeviceWidth * 0.01,
      vertical: AppConstants.kDeviceHeight * 0.075,
    ),
    sliver: BlocBuilder<HomeBloc, HomeState>(
      builder: (context, state) =>
        state.status == HomePageStatus.contentFetched?
         SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              return Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Padding(
                    padding: EdgeInsets.only(
                        right: AppConstants.kDeviceWidth * 0.05),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        TextButton.icon(
                          onPressed: () {
                            Navigator.of(context).push(
                              MaterialPageRoute(
                                builder: (context) => CategoryPage(
                                  categoryId: state.genres[index].id,
                                  categoryName: state.genres[index].name,
                                ),
                              ),
                            );
                          },
                          label: Text(
                            "See All",
                            style: TextStyle(
                              color: AppColors.genreLabelColor,
                              fontSize: 18,
                            ),
                          ),
                          icon: Icon(
                            Icons.arrow_back_ios_outlined,
                            color: AppColors.genreLabelColor,
                            size: 18,
                          ),
                        ),
                        Text(
                          state.genres[index].name,
                          style: TextStyle(
                            color: AppColors.genreLabelColor,
                            fontWeight: FontWeight.w900,
                            fontSize: 22,
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: AppConstants.kDeviceHeight * 0.325,
                    child: ListView.builder(
                      shrinkWrap: true,
                      scrollDirection: Axis.horizontal,
                      itemCount:
                          state.content[state.genres[index].id]!.length < 6
                              ? state
                                  .content[state.genres[index].id]!.length
                              : 6,
                      itemBuilder: (context, innerIndex) {
                        return MovieCard(
                          movieEntity: state
                              .content[state.genres[index].id]![innerIndex],
                        );
                      },
                    ),
                  ),
                  (AppConstants.kDeviceWidth * 0.05).h
                ],
              );
            },
            childCount: state.status == HomePageStatus.contentFetched
                ? state.genres.length - 1
                : 0,
          ),
        ):SliverFillRemaining(
          child: Lottie.asset(
            Assets.lottiesCooking,
            animate: true,
            repeat: true,
            alignment: Alignment.center,
            fit: BoxFit.contain,
          )
        ),
    ),
  );
}

MovieCard

Widget build(BuildContext context) {
  return GestureDetector(
    onTap: () {
      Navigator.of(context).push(
        MaterialPageRoute(
          builder: (context) =>
              BlocProvider(
                create: (context) => MoviePlayBloc(),
                child: MoviePlayPage(
                  movieId: movieEntity.id, movieName: movieEntity.title,
                ),
              ),
        ),
      );
    },
    child: Container(
      margin: EdgeInsets.symmetric(
        horizontal: AppConstants.kDeviceWidth * 0.02,
        vertical: AppConstants.kDeviceWidth * 0.02,
      ),
      width: AppConstants.kDeviceWidth * 0.45,
      height: AppConstants.kDeviceHeight * 0.25,
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
            color: Colors.black,
            blurRadius: AppConstants.kDeviceWidth * 0.015,
          ),
          BoxShadow(
            color: Colors.grey,
            blurRadius: AppConstants.kDeviceWidth * 0.015,
          ),
        ],
        borderRadius: BorderRadius.circular(
          AppConstants.kDeviceWidth * 0.05,
        ),
        color: Colors.white,
      ),
      child: Column(
        children: [
          CoverImage(
            imagePath: "${AppUrls.kMovieCoverUrl}${movieEntity.thumbnail}",
            width: AppConstants.kDeviceWidth * 0.45,
            height: AppConstants.kDeviceHeight * 0.225,
            borderRadius: AppConstants.kDeviceWidth * 0.05,
          ),
          (AppConstants.kDeviceHeight * 0.01).h,
          Center(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 5),
              child: Text(
                movieEntity.title,
                style: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                  fontSize: AppConstants.kDeviceWidth * 0.0375,
                ),
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                textAlign: TextAlign.center,
              ),
            ),
          )
        ],
      ),
    ),
  );
}

CategoryPage

class CategoryPage extends StatelessWidget {
  const CategoryPage(
      {super.key, required this.categoryId, required this.categoryName});
  final int categoryId;
  final String categoryName;
  @override
  Widget build(BuildContext context) {
    final content = context.read<HomeBloc>().state.content[categoryId]!;
    return SafeArea(
      child: Scaffold(
        appBar: AppAppBar(),
        body: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.symmetric(
              horizontal: AppConstants.kDeviceWidth * 0.02,
              vertical: AppConstants.kDeviceWidth * 0.025,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  categoryName,
                  style: TextStyle(
                    color: AppColors.genreLabelColor,
                    fontWeight: FontWeight.w900,
                    fontSize: 22,
                  ),
                ),
                (AppConstants.kDeviceWidth * 0.05).h,
                GridView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: content.length,
                  itemBuilder: (context, index) => MovieCard(
                    movieEntity: content[index],
                  ),
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    childAspectRatio: 1 / 1.5,
                    mainAxisSpacing: AppConstants.kDeviceHeight * 0.01,
                    crossAxisSpacing: AppConstants.kDeviceHeight * 0.01,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

AppAppBar

class AppAppBar extends StatelessWidget implements PreferredSizeWidget {
  const AppAppBar({
    super.key,
  });
  @override
  Widget build(BuildContext context) {
    return AppBar(
      leading: IconButton(
        onPressed: (){
          Navigator.of(context).pop();
        },
        icon: const Icon(
          Icons.arrow_back_ios_sharp,
          color: AppColors.primaryColor,
        ),
      ),
      toolbarHeight: AppConstants.kDeviceHeight * 0.1,
      centerTitle: true,
      title: Container(
        width: AppConstants.kDeviceHeight * 0.1,
        height: AppConstants.kDeviceHeight * 0.1,
        decoration: const BoxDecoration(
            color: Colors.transparent,
            image: DecorationImage(
              image: AssetImage(
                Assets.imagesSoofra,
              ),
            )),
      ),
      elevation: 0,
      backgroundColor:Colors.yellow.shade600,
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

已尝试的解决方法

移除代码中不必要元素（如MovieCard的Text组件的Expanded）
所有Manifest文件已添加INTERNET权限
执行flutter clean、flutter build APK --no-shrink、flutter run --profile命令
Release模式添加打印语句，能正常输出视频名称，确认数据已正确获取

寻求解决方案

需要解决Release模式下所有页面的显示异常问题，包括布局错乱、元素偏移、播放器空白等现象。

内容的提问来源于stack exchange，提问作者Mohamed Almuetaz Atif

Flutter应用Release模式页面显示异常，Debug模式正常求助

问题现象 #

核心代码片段 #

Home Page #

SliverAppBarWidget #

SliverBodyWidget #

MovieCard #

CategoryPage #

AppAppBar #

已尝试的解决方法 #

寻求解决方案 #