I am using the flutter InkWell widget inside GridView to layout a grid of 30 Cards to show different levels. While it is working perfectly fine on mobile devices while debugging, the InkWell widget does not get rendered on WebBrowswe.
I want to know how to make this work on the browser also. flutter doctor is all fine.
Here is the code of the widget responsive in my view:
return GridView.count(
crossAxisCount: _crossAxisCount,
shrinkWrap: true,
childAspectRatio: _aspectRatio,
mainAxisSpacing: (margin),
crossAxisSpacing: (margin),
// childAspectRatio: 0.64,
primary: false,
children: List.generate(progressList.length, (index) {
ProgressModel progressModel = progressList[index];
return InkWell(
child: Container(
child: Card(
color: ConstantData.cardBackground!,
elevation: 1,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(radius),
)),
child: Stack(
children: [
Padding(
padding: EdgeInsets.only(top: 5),
child: Align(
child: ConstantWidget.getTextWidget(
progressModel.highScore! > 0
? progressModel.highScore.toString()
: "",
ConstantData.textColors!,
ConstantData.getPercentSize(cellHeight, 12),
FontWeight.w500,
TextAlign.center),
alignment: Alignment.topCenter,
),
),
Center(
child: Container(
height: circleSize,
width: circleSize,
decoration: BoxDecoration(
shape: BoxShape.circle, color: ConstantData.defColor
// gradient: LinearGradient(
// begin: Alignment.topRight,
// end: Alignment.bottomLeft,
// colors: ConstantData.getGradientColors(),
// ),
),
child: Center(
child: ConstantWidget.getTextWidget(
(index + 1).toString(),
Colors.black,
ConstantData.getPercentSize(circleSize, 43),
FontWeight.w500,
TextAlign.center),
),
),
),
Padding(
padding: EdgeInsets.only(bottom: 5),
child: Align(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
(progressList[index].progress! > 0)
? Icons.star
: Icons.star_border,
size: iconSize,
color: ConstantData.iconColor,
),
Icon(
(progressList[index].progress! > 1)
? Icons.star
: Icons.star_border,
size: iconSize,
color: ConstantData.iconColor,
),
Icon(
(progressList[index].progress! > 2)
? Icons.star
: Icons.star_border,
size: iconSize,
color: ConstantData.iconColor,
),
],
),
alignment: Alignment.bottomCenter,
),
),
],
),
)),
onTap: () {
if (widget.subModel.typeCode == DataFile.findMissingQuiz) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FindMissingQuizPage(
widget.mainModel, widget.subModel, progressModel,
(dataModel) {
_handleTapBoxChanged(dataModel);
})));
} else if (widget.subModel.typeCode == DataFile.inputQuiz) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => InputQuizPage(
widget.mainModel, widget.subModel, progressModel,
(dataModel) {
_handleTapBoxChanged(dataModel);
})));
} else if (widget.subModel.typeCode == DataFile.trueFalseQuiz) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TrueFalseQuizPage(
widget.mainModel, widget.subModel, progressModel,
(dataModel) {
_handleTapBoxChanged(dataModel);
})));
} else {
print("sendquiz===simple");
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SimpleQuizPage(
widget.mainModel, widget.subModel, progressModel,
(dataModel) {
_handleTapBoxChanged(dataModel);
})));
}
},
);
}),
);
}



