a grey box was displayed in the screen. It was not on debug mode.
Only when I changed to release mode, a grey box appears.
What caused this problem? and how do I have to change?
itemInfoWidget() {
return Container(
height: MediaQuery.of(Get.context!).size.height * 0.55,
width: MediaQuery.of(Get.context!).size.width,
decoration: const BoxDecoration(
color: Colors.black38,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
boxShadow: [
BoxShadow(offset: Offset(0, 0), blurRadius: 0, color: Colors.green),
]),
padding: const EdgeInsets.symmetric(horizontal: 16),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 18,
),
Center(
child: Container(
height: 8,
width: 130,
decoration: BoxDecoration(
color: Colors.black38,
borderRadius: BorderRadius.circular(
(30),
)),
),
),
const SizedBox(
height: 18,
),
//name
Row(
children: [
Text(
widget.itemInfo!.name!,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 25
),
),
const Spacer(),
Obx(() => IconButton(
onPressed: () {
if (itemDetailsController.isFavorite == true) {
//delete item from favorites
deleteItemFromFavoriteList();
} else {
//save item to user favorites
addItemToFavoriteList();
}
},
icon: Icon(
itemDetailsController.isFavorite
? CupertinoIcons.bookmark_fill
: CupertinoIcons.bookmark,
color : const Color(0xffffd400),
size: 25,
),
)),
],
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.01,
),
//rating + rating num, tags, price
Row(
children: [
const SizedBox(height: 30),
//rating
RatingBar.builder(
initialRating: widget.itemInfo!.rating!,
minRating: 1,
direction: Axis.horizontal,
allowHalfRating: true,
itemCount: 5,
itemBuilder: (context, c) => const Icon(
Icons.star,
color: Colors.amber,
),
onRatingUpdate: (updateRating) {},
ignoreGestures: true,
unratedColor: Colors.black87,
itemSize: 20,
),
const SizedBox(
width: 8,
),
// rating num
Text(
"(${widget.itemInfo!.rating})",
style: const TextStyle(
color: Colors.black87,
fontSize: 18,
),
),
],
),
const SizedBox(height: 10),
//tags
Text(
"카테고리: ${widget.itemInfo!.tags!.toString().replaceAll("[", "").replaceAll("]", "")}",
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 18,
color: Colors.white,
),
),
const SizedBox(height: 10),
//price
Text(
"포인트: ${widget.itemInfo!.price!}",
style: const TextStyle(
fontSize: 18,
color: Colors.white,
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.03,
),
//모양, 색깔, 재질 박스
// 1줄 넘어가면 재질 박스가 밑으로 이동하도록지(2 rows)
// 1줄 안에 다 들어가면 1 row 유지하는 방법..?
Center(
child: Wrap(
// 20221229
alignment: WrapAlignment.center,
spacing: 7,
runSpacing: 8,
children: [
//색깔 박스
Row(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
"색깔",
style: TextStyle(
fontSize:
16,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
const SizedBox(width: 2),
...List.generate(widget.itemInfo!.colors!.length,
(index) {
return Container(
// height: 35,
padding: const EdgeInsets.symmetric(
vertical: 4, horizontal: 8),
margin: const EdgeInsets.symmetric(horizontal: 2),
// width: widget.itemInfo!.colors![index]
// .replaceAll("[", "")
// .replaceAll("]", "") ==
// '얼룩덜룩한'
// ? MediaQuery.of(context).size.width * 0.26
// : MediaQuery.of(context).size.width * 0.15,
decoration: const BoxDecoration(boxShadow: [
BoxShadow(
offset: Offset(1, 1),
blurRadius: 2,
color: Colors.black38),
], color: Color(0xff073215)),
alignment: Alignment.center,
child: Text(
widget.itemInfo!.colors![index]
.replaceAll("[", "")
.replaceAll("]", ""),
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 16,
color: Colors.white,
),
),
);
}),
const SizedBox(width: 3),
],
),
const Spacer(),
Row(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
"모양",
style: TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
const SizedBox(width: 2),
...List.generate(widget.itemInfo!.shapes!.length,
(index) {
return Container(
// height: 35,
padding: const EdgeInsets.symmetric(
vertical: 4, horizontal: 8),
margin: const EdgeInsets.symmetric(horizontal: 2),
// width: MediaQuery.of(context).size.width * 0.15,
decoration: const BoxDecoration(boxShadow: [
BoxShadow(
offset: Offset(1, 1),
blurRadius: 2,
color: Colors.black38),
], color: Color(0xff073215)),
alignment: Alignment.center,
child: Text(
widget.itemInfo!.shapes![index]
.replaceAll("[", "")
.replaceAll("]", ""),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 16,
color: Colors.white,
),
),
);
}),
const SizedBox(width: 2),
],
),
const Spacer(),
Wrap(children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
"재질",
style: TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
const SizedBox(width: 2),
...List.generate(widget.itemInfo!.materials!.length,
(index) {
return Container(
// height: 35,
padding: const EdgeInsets.symmetric(
vertical: 4, horizontal: 8),
margin: const EdgeInsets.symmetric(horizontal: 2),
// width: widget.itemInfo!.materials![index]
// .replaceAll("[", "")
// .replaceAll("]", "") ==
// '깍지벌레' ||
// widget.itemInfo!.materials![index]
// .replaceAll("[", "")
// .replaceAll("]", "") ==
// '거미줄'
// ? MediaQuery.of(context).size.width * 0.23
// : MediaQuery.of(context).size.width * 0.15,
decoration: const BoxDecoration(boxShadow: [
BoxShadow(
offset: Offset(1, 1),
blurRadius: 2,
color: Colors.black38),
], color: Color(0xff073215)),
alignment: Alignment.center,
child: Text(
widget.itemInfo!.materials![index]
.replaceAll("[", "")
.replaceAll("]", ""),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 16,
color: Colors.white,
),
),
);
}),
],
),
]),
],
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.025,
),
//description
const Text(
"특징: ",
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.005,
),
Text(
widget.itemInfo!.description!,
textAlign: TextAlign.justify,
style: const TextStyle(
fontSize: 18,
color: Colors.white70,
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.035,
),
//관찰 올리기 - 버튼
Material(
elevation: 4,
color: const Color(0xffBF5F27),
borderRadius: BorderRadius.circular(10),
child: InkWell(
onTap: () {
Get.to(() => UserUploadReviewsScreen(
itemInfo: widget.itemInfo,
));
},
borderRadius: BorderRadius.circular(20),
child: Container(
alignment: Alignment.center,
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(
CupertinoIcons.camera_fill,
color: Colors.white,
),
SizedBox(
width: 15,
),
Text("관찰 올리기",
style: TextStyle(
fontSize: 18,
color: Colors.white,
)),
],
),
),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.035,
),
],
),
),
);
}
I want to show the contents not a grey box.
>Solution :
As I have commented, if you see a grey box in release mode, this means that you have some kind of error.
You should be able to view the error when running in debug mode and view the error in your console to correctly debug it. The error would be in red.
This can be any type of error, but for me, it was when I used an Expanded widget in the wrong place, I thought that I can just ignore it, but then in release mode, I had a white screen.
See also
Explain that a grey screen on release is indicative of an error (and how to find the error).