Неоморфный дизайн исчезает при изменении размера окна во Flutter ⇐ CSS

[Anonymous]

У меня есть игра, в которой я реализовал нейморфный дизайн, используя вставленные тени. Поскольку 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(
builder: ((context, candidateData, rejectedData) {
return (_colors[index] != green)
? ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Draggable(
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.

Подробнее здесь: https://stackoverflow.com/questions/787 ... in-flutter