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
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(