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
相关产品推荐
相关产品推荐

