Flutter InkWell Widget is rendering on Emulator but not on Web Browser

Viewed 40

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);
                      })));
        }
      },
    );
  }),
);

}

Mobile Emulator Widget Inspector For Mobile Emulator

Mobile

Web Browser Web Widget Tree Web Browser

0 Answers
Related