I have a game in which I have implemented a neumorphic design using inset shadows. Since Flutter doesnt support inset shadows out of the box, I have used flutter_inset_shadow: ^2.0.3 package to enable this (I tried other packages also but this one could give me the effect I was looking for on desktop at least.
My problem is that when I move from desktop to mobile, the neumorphic effect disappears. Here are two images that demonstrate how it looks on desktop and how it looks on mobile.
On Desktop:
On mobile:
As you can see the shadow and depth effect is completely gone on mobile.
Here is the code I have for the Grid:
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],
}))
Any idea what might be happening? I wish to get the same effect on mobile that I have on desktop. This is flutter web and not android or iOS.