flutterscreenflutter-getx

Gray Screen Issue In Flutter IOS Release Version


I'm building a flutter application using getx framework, where it will show a list of meeting rooms with image, title, amenities and credits when i run in my iphone under debug version, i'm able to see all the widgets but when i generate release version and installed in my iphone once again, the entire screen showing gray color.

I have attached the respective code files for reference, kindly guide me to resolve this gray color screen issue.

View File

class MeetingRoomView extends GetView<MeetingRoomController> {
  MeetingRoomView({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: AppColors.kSelgao,
      child: Column(
        children: [
          Padding(
            padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
            child: searchInputTextWidget(
              controller: controller.mrNameController,
              hintText: 'Search for meeting room',
              labelText: 'Search for meeting room',
              keyboardType: TextInputType.text,
              onChanged: (value) {
                controller.filterMeetingRooms(value);
              },
            ),
          ),
          Expanded(
            child: Obx(() {
              if (controller.isLoading.value) {
                return Center(child: AppUtils().progressIndicator());
              }

              if (controller.tempMeetingRooms.isEmpty) {
                return Center(child: Text('No meeting rooms found.'));
              }

              return ListView.builder(
                itemCount: controller.tempMeetingRooms.length,
                itemBuilder: (context, index) {
                  return MeetingRoomWidget(
                    meetingRoom: controller.tempMeetingRooms[index],
                  );
                },
              );
            }),
          ),
        ],
      ),
    );
  }
}

Controller File

class MeetingRoomWidget extends StatelessWidget {
  final MeetingRoom meetingRoom;

  MeetingRoomWidget({super.key, required MeetingRoom this.meetingRoom});

  @override
  Widget build(BuildContext context) {
    String slot;
    var availableSlots = 0;
    for (var o in meetingRoom.meetingRoomSlots!) {
      slot = o.slotTime!.substring(0, 5);
      if (AppUtils().compareTime(slot)) {
        if (!o.bookingStatus!) {
          availableSlots = ++availableSlots;
        }
      }
    }

    return GestureDetector(
      onTap: () => Get.toNamed(Routes.MR_BOOKING, arguments: [
        {
          kMeetingRoomId: meetingRoom.meetingRoomId,
          kLocationId: meetingRoom.meetingRoomLocationId,
        },
      ]),
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Container(
          decoration: BoxDecoration(
            color: AppColors.kWhiteColor,
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(20),
              bottomRight: Radius.circular(20),
            ),
          ),
          child: Flexible(
            child: Column(
              children: [
                Stack(
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(24),
                      child: Image.network(
                        meetingRoom.meetingRoomImage!,
                        height: 200,
                        width: double.infinity,
                        fit: BoxFit.cover,
                      ),
                    ),
                    Positioned(
                      child: Container(
                        decoration: BoxDecoration(
                          color: AppColors.kTidal,
                          borderRadius: BorderRadius.all(
                            Radius.circular(8),
                          ),
                        ),
                        padding: EdgeInsets.all(8),
                        child: Text(
                          availableSlots > 0 ? 'Available' : 'Unavailable',
                          style: TextStyle(
                            color: AppColors.kBlackColor,
                            fontWeight: FontWeight.w500,
                            fontSize: 12,
                          ),
                        ),
                      ),
                      top: 20,
                      right: 20,
                    ),
                  ],
                ),
                Padding(
                  padding: EdgeInsets.symmetric(
                    horizontal: 16,
                    vertical: 8,
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        meetingRoom.meetingRoomName!,
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                          color: AppColors.kBlackColor,
                        ),
                      ),
                      Text(
                        ' ${meetingRoom.seatingCapacity} Seater',
                        style: TextStyle(
                          fontSize: 14,
                          color: AppColors.kGreyColor,
                        ),
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Flexible(
                        flex: 1,
                        child: SizedBox(
                          height: 40,
                          child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            itemCount: meetingRoom.meetingRoomAmenities!.length,
                            itemBuilder: (context, index) {
                              final amenity =
                                  meetingRoom.meetingRoomAmenities![index];
                              return amenity.status!
                                  ? Padding(
                                      padding:
                                          EdgeInsets.symmetric(horizontal: 4),
                                      child: Image.network(
                                        amenity.icon!,
                                        color: AppColors.kMobsterColor,
                                        width: 25,
                                        height: 25,
                                        fit: BoxFit.contain,
                                      ),
                                    )
                                  : SizedBox.shrink();
                            },
                          ),
                        ),
                      ),
                      Flexible(
                        flex: 1,
                        child: Align(
                          alignment: Alignment.centerRight,
                          child: Text(
                            '${meetingRoom.meetingRoomCredits} cr/${meetingRoom.slotTime}min',
                            style: TextStyle(
                              color: AppColors.kDodgerBlueColor,
                              fontWeight: FontWeight.w700,
                              fontSize: 16, // Slightly reduced for better fit
                            ),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  height: 16,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

I have attached debug version image and release version image for references Debug Version Image Release Version Image


Solution

  • Expanded or Flexible cannot be used inside a Container.

    You should use Expanded or Flexible only within a Column, Row or Flex

      child: Padding(
            padding: EdgeInsets.all(16),
            child: Container(
              decoration: BoxDecoration(
                color: AppColors.kWhiteColor,
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(20),
                  bottomRight: Radius.circular(20),
                ),
              ),
    //Error here------------------->
              child: Flexible(
                child: Column(