在 Flutter 中调整窗口大小时，拟态设计消失了

Question

我有一个游戏，我在其中使用插图阴影实现了拟态设计。由于 Flutter 不支持开箱即用的插入阴影，因此我使用 flutter_inset_shadow: ^2.0.3 包来启用此功能（我也尝试了其他包，但这个包至少可以给我在桌面上寻找的效果。

我的问题是，当我从桌面移动到移动设备时，拟态效果消失了。这里有两张图片展示了它在桌面上的外观和在移动设备上的外观。

在桌面上：

在移动设备上：

如您所见，阴影和深度效果在移动设备上完全消失了。 这是我的网格代码：

Center(
              child: GridView.builder(
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: sArray.length,
                  shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4,
                    mainAxisSpacing: 35
                    crossAxisSpacing: 35
                  ),
                  addAutomaticKeepAlives: false,
                  addRepaintBoundaries: false,
                  semanticChildCount: sArray.length,
                  controller: _scrollController,
                  itemBuilder: (context, index) {
                    return Stack(
                      alignment: Alignment.center,
                      children: [
                        DragTarget<Map>(
                          builder: ((context, candidateData, rejectedData) {
                            return (_colors[index] != green)
                                ? ClipRRect(
                                    borderRadius: BorderRadius.circular(12),
                                    child: Draggable<Map>(
                                        maxSimultaneousDrags: 1,
                                        onDragStarted: () {
                                          lIndex = index;
                                        },
                                        feedback: ClipRRect(
                                          borderRadius:
                                              BorderRadius.circular(12.0),
                                          child: Container(
                                            color: (!hardMode)
                                                ? _colors[index]
                                                : const Color(0xff878787),
                                            height: 50,
                                            width: 50,
                                            child: Center(
                                              child: Text(
                                                sArray[index],
                                                style: const TextStyle(
                                                    fontFamily: 'Suez One',
                                                    fontSize: 24,
                                                    color: Colors.white),
                                              ),
                                            ),
                                          ),
                                        ),
                                        childWhenDragging: (_colors[
                                                    index] !=
                                                green)
                                            ? ClipRRect(
                                                borderRadius:
                                                    BorderRadius.circular(
                                                        12),
                                                child: Container(
                                                  decoration: BoxDecoration(
                                                      color: Colors.black,
                                                      border: Border.all(
                                                          color: Colors
                                                              .white54)),
                                                ),
                                              )
                                            : Text(
                                                sArray[index],
                                                style: GoogleFonts.nunito(
                                                  textStyle:
                                                      const TextStyle(
                                                          color:
                                                              Colors.white,
                                                          fontSize: 48,
                                                          fontWeight:
                                                              FontWeight
                                                                  .bold),
                                                ),
                                              ),
                                        child: SizedBox(
                                          height: (_completed) ? 60 : ht,
                                          width: (_completed) ? 60 : wd,

                                          child: ClipRRect(
                                            borderRadius:
                                                BorderRadius.circular(16.0),
                                            child: Container(
                                              alignment: Alignment.center,
                                              decoration: BoxDecoration(
                                                borderRadius:
                                                    BorderRadius.circular(
                                                        16.0),
                                                border: Border.all(
                                                    color: _colors[index]),
                                                boxShadow: [
                                                  BoxShadow(
                                                      color: (_colors[
                                                                  index] ==
                                                              grey)
                                                          ? const Color(
                                                              0Xff707070)
                                                          : const Color(0xff644900)
                                                              .withOpacity(
                                                                  0.5),
                                                      blurRadius:
                                                          (_colors[index] ==
                                                                  grey)
                                                              ? 8.0
                                                              : 6.0,
                                                      spreadRadius: 0,
                                                      offset: const Offset(
                                                          -4, -4),
                                                      inset: true),
                                                  BoxShadow(
                                                    color: (_colors[
                                                                index] ==
                                                            grey)
                                                        ? const Color(
                                                                0xffFDFDFD)
                                                            .withOpacity(
                                                                0.36)
                                                        : const Color(
                                                                0xffFFFF00)
                                                            .withOpacity(
                                                                0.4),
                                                    blurRadius: 8.0,
                                                    spreadRadius: 0,
                                                    offset:
                                                        (_colors[index] ==
                                                                grey)
                                                            ? const Offset(
                                                                8, 8)
                                                            : const Offset(
                                                                4, 4),
                                                    inset: true,
                                                  )
                                                ],
                                                color: _colors[index],
                                              ),
                                              child: FittedBox(
                                                child: Container(
                                                  margin:
                                                      const EdgeInsets.all(
                                                          10),
                                                  padding: const EdgeInsets
                                                          .symmetric(
                                                      horizontal: 10,
                                                      vertical: 6),
                                                  child: Text(
                                                    sArray[index],
                                                    style: const TextStyle(
                                                        color: Colors.white,
                                                        fontSize: 60,
                                                        fontFamily:
                                                            'Suez One'),
                                                    textAlign:
                                                        TextAlign.center,
                                                  ),
                                                ),
                                              ),
                                            ),
                                          ),
                                          // ),
                                        ),
                                        data: {
                                          "outIndex": index,
                                          "letter": sArray[index],
                                        }))
                   

知道会发生什么吗？我希望在移动设备上获得与桌面设备相同的效果。这是 flutter web，不是 android 或 iOS。

Answer 1

除了小的格式问题之外，该实现对我来说看起来是正确的。检查您的设备是否可以顺利处理设计。在其他设备上进行测试可以帮助查看问题是否是特定于设备的。