You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter Web:切换到移动端视图时Neumorphic设计效果消失

Flutter Web移动端拟物化(Neumorphic)内阴影效果消失问题求助

我在Flutter Web游戏中,通过flutter_inset_shadow: ^2.0.3包实现了拟物化(Neumorphic)设计(Flutter原生不支持内阴影),桌面端可正常呈现拟物化深度效果,但切换到移动端视图时,该效果完全消失。希望找到解决方案实现跨端效果一致。

效果对比

  • 桌面端效果:
    桌面端拟物化内阴影效果
  • 移动端效果:
    移动端拟物化内阴影效果消失

GridView相关代码

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

内容的提问来源于stack exchange,提问作者WeSay Solutions

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.21 17:22:32