从 Playstore 安装时，Flutter 应用小部件被推到角落

Question

我创建了一个应用程序，它在我的设备模拟器中完美运行，chrome 在实际的 phone 中运行来自 android studio 但当我安装来自 Playstore 的应用程序，屏幕中的小部件被推到右侧并显示灰色 screen.This 仅发生在应用程序的一个屏幕（MyLearningScreen）中，其余屏幕工作正常

运行来自 android 工作室时的样子

从 Playstore 安装后的样子

下面是我学习屏幕的代码，

class MyLearningScreen extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return BlocProvider(
    create: (BuildContext context) => MyLearningScreenBloc(
      courseRepo: context.read<CourseRepository>(),
      learningBloc: context.read<LearningNavBloc>(),
      snackBarBloc: context.read<SnackBarBloc>(),
      authCubit: context.read<AuthCubit>()),
  child: Builder(
    builder: (BuildContext context) => BackPlainLayout(
      title: 'My Learning Screen',
      back: () {
        context.read<LearningNavBloc>().add(NavLearnBackEvent());
      },
      child: content(context),
    ),
  ),
);
  }

 Widget content(BuildContext context) {
   return BlocBuilder<MyLearningScreenBloc, MyLearningScreenState>(
     builder: (context, state) {
      return Column(
      children: <Widget>[
        searchBar(context),
        SizedBox(
          height: 8.0,
        ),
        Align(
          alignment: Alignment.topRight,
          child: BtnIconText(
            label: "Filter",
            onPressed: () {
              bottomSheet(context);
            },
            icon: Icons.filter_alt_sharp,
            level: 2,
            buttonSize: ButtonSize.SMALL,
          ),
        ),
        SizedBox(
          height: 16.0,
        ),
        actionbuttons(context),
        SizedBox(
          height: 8.0,
        ),
        Expanded(child: courses(context)),
        loadMoreCourses(context),
      ],
    );
  },
);
   }

 Widget actionbuttons(BuildContext context) {
   return Row(
     mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
      Flexible(
      child: BtnText(
        label: "Saved courses",
        onPressed: () {},
        level: 2,
        isFullWidth: true,
      ),
    ),
    SizedBox(
      width: 16.0,
    ),
    Flexible(
      child: BtnText(
        label: "Browse courses",
        onPressed: () => {
          context
              .read<MyLearningScreenBloc>()
              .add(GoToLearningDashBoardEvent())
        },
        isFullWidth: true,
      ),
    ),
  ],
  );
  }

 Widget courses(BuildContext context) {
    return BlocBuilder<MyLearningScreenBloc, MyLearningScreenState>(
       buildWhen: (prevState, currState) {
     if (prevState.courses != currState.courses) {
       return true;
      }
      if (prevState.initialCoursesStatus != currState.initialCoursesStatus) {
        return true;
      }
      return false;
     }, builder: (BuildContext context, state) {
      if (state.initialCoursesStatus == DataRetrievalStatus.LOADED) {
       if (state.courses.isNotEmpty) {
      return ListView.builder(
          controller: state.getScrollController(),
          itemCount: state.courses.length,
          prototypeItem: CaregiverCourseCard(
            title: state.courses[0].course.name,
            image: state.courses[0].course.image,
            tags: state.courses[0].course.tags
                .map((tag) => tag.name)
                .toList(),
            index: 0,
            onTap: () {},
            progress: state.courses[0].completed_percentage,
            startDate: state.courses[0].start_date,
            finishDate: state.courses[0].finished_date ?? "",
          ),
          itemBuilder: (context, index) {
            return CaregiverCourseCard(
              title: state.courses[index].course.name,
              image: state.courses[index].course.image,
              tags: state.courses[index].course.tags
                  .map((tag) => tag.name)
                  .toList(),
              index: index,
              onTap: () {
                context
                    .read<MyLearningScreenBloc>()
                    .add(CourseClickedEvent(course: state.courses[index]));
              },
              progress: state.courses[index].completed_percentage,
              startDate: state.courses[index].start_date,
              finishDate: state.courses[index].finished_date ?? "",
            );
          });
    } else {
      return Image.asset("assets/images/no_owned_courses.png");
    }
    }
  return Padding(
    padding: const EdgeInsets.only(top: 10, bottom: 40),
    child: Center(
      child: CircularProgressIndicator(),
    ),
  );
});
 }

  Widget loadMoreCourses(BuildContext context) {
    return BlocBuilder<MyLearningScreenBloc, MyLearningScreenState>(
     buildWhen: (prevState, currState) {
      if (prevState.moreCoursesStatus != currState.moreCoursesStatus) {
      return true;
      }
       return false;
     },
     builder: (BuildContext context, state) {
      if (state.moreCoursesStatus == DataRetrievalStatus.LOADING) {
      return Padding(
        padding: const EdgeInsets.only(top: 10, bottom: 40),
        child: Center(
          child: CircularProgressIndicator(),
        ),
      );
    }
    return SizedBox();
  },
);
    }

  Widget searchBar(BuildContext context) {
     return Container(
      decoration: BoxDecoration(
         borderRadius: BorderRadius.all(Radius.circular(5)), color: Cultured),
         child: TextField(
          onChanged: (value) => {
            context
          .read<MyLearningScreenBloc>()
          .add(SearchChangedEvent(search: value))
          },
         decoration:
           InputDecoration(labelText: 'Search', icon: Icon(Icons.search)),
         ),
        );
        }

下面是我的护理员课程卡代码，

class CaregiverCourseCard extends StatelessWidget {
 final String title;
 final String image;
 final String progress;
 final String startDate;
 final String finishDate;
 final List<String> tags;
 final int index;
 final void Function() onTap;

 const CaregiverCourseCard(
  {required this.title,
  required this.image,
  required this.tags,
  required this.index,
  required this.onTap,
  required this.progress,
  required this.startDate,
  required this.finishDate});

  @override
  Widget build(BuildContext context) {
   return Padding(
    padding: const EdgeInsets.symmetric(vertical: 5.0),
    child: InkWell(
      onTap: () {
        onTap();
       },
      child: Container(
        color: Cultured,
        padding: const EdgeInsets.all(16.0),
         child: Column(
          children: [
          top(context),
          bottom(context),
        ],
        ),
        ),
        ),
        );
        }

       Widget top(BuildContext context) {
        return Row(
          children: <Widget>[
           Image.network(
      image,
      height: 100,
      width: 100,
      errorBuilder: (buildContext, object, stackTrace) {
        return Image.asset(
          "assets/images/image_placeholder.png",
          height: 100,
          width: 100,
        );
      },
    ),
    SizedBox(
      width: 16,
    ),
    Flexible(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(title,
            style: Theme.of(context).textTheme.headline3),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.4,
              child: LinearProgressIndicator(
                value: int.parse(progress) * 0.01,
                valueColor: AlwaysStoppedAnimation<Color>(LightSeaGreen),
                backgroundColor: Colors.greenAccent,
              ),
            ),
            Text('$progress%')
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(startDate, style: Theme.of(context).textTheme.caption),
            // Text(finishDate, style: Theme.of(context).textTheme.caption)
          ],
        ),
      ],
    )),
  ],
);
 }

  Widget bottom(BuildContext context) {
    return TagList(this.tags);
  }
}

请帮忙!!!

Answer 1

我认为您可以将 heigth 属性添加到 CaregiverCourseCard 并将 shrinkWrap = true 属性添加到 ListView.builder

从 Playstore 安装时，Flutter 应用小部件被推到角落

Flutter app widgets pushed to a corner when installed from playstore

flutter

dart

google-play