設(shè)計三件寶褪储，模糊陰影和圓角寝蹈。這些在原生開發(fā)中被設(shè)計摧殘N年的東西，在Flutter中侄非，居然是輕而易舉的實現(xiàn)蕉汪。
添加Shadow
在Flutter中，Container可以使用BoxDecoration來添加Shadow逞怨，如果是單獨的Widget者疤，可以通過DecoratedBox來添加陰影。
下面我們以Container為例叠赦，演示Flutter的Shadow實現(xiàn)驹马。原始效果如圖所示。
child: Container(
height: 100,
width: 100,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
shape: BoxShape.rectangle,
boxShadow: const [
BoxShadow(),
],
),
)
在Flutter中除秀，陰影本身并不模糊糯累，其大小也足以使其可見。BoxShadow有幾個屬性可以讓我們對它進行配置鳞仙，我們將使用這三個屬性寇蚊。
- Offset
- Blur radius
- Spread radius
由此可見，F(xiàn)lutter不愧是Chrome團隊的產(chǎn)物棍好，這些參數(shù)和CSS中的Shadow參數(shù)是一致的仗岸，當然這也方便了開發(fā)者和設(shè)計師的溝通允耿。
首先，我們來看一下Offset扒怖。它代表陰影相對于當前Widget的偏移量较锡，它的效果就好比我們將光源放置在物體的左上角，那么陰影將偏移至右下角這樣的效果盗痒。
我們設(shè)置Offset(4, 4)蚂蕴，效果如上所示。
你可以發(fā)現(xiàn)俯邓，陰影不會被Blur骡楼，所以，我們使用blurRadius這個參數(shù)稽鞭，來控制陰影被Blur的程度鸟整，通過spreadRadius來控制陰影向外擴散的程度，當你不設(shè)置它時朦蕴，陰影與原始Widget是同樣的大小篮条。
了解了這些參數(shù)之后，我們找到設(shè)計稿吩抓，找到相應(yīng)的參數(shù)配置涉茧，就得到了下面這個陰影。
child: Container(
height: 100,
width: 100,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
shape: BoxShape.rectangle,
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(25),
offset: const Offset(0, 14),
blurRadius: 24,
spreadRadius: 0,
),
],
),
)
這可能就是國內(nèi)設(shè)計師夢寐以求的陰影吧疹娶。
PhysicalModel & PhysicalShape
Flutter的組件茫茫多伴栓，PhysicalModel和PhysicalShape這兩個組件，也同樣能模擬陰影的實現(xiàn)蚓胸，但它的實現(xiàn)實際上是Material Design中的elevation的實現(xiàn)效果挣饥，代碼如下所示除师。
return Center(
child: PhysicalModel(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
elevation: 16,
shadowColor: Colors.black.withAlpha(25),
child: const SizedBox(
height: 100,
width: 100,
),
),
);
Text Shadow
在TextStyle中沛膳，同樣支持Shadows參數(shù)。
child: Text(
"中華人民共和國",
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w700,
shadows: [
Shadow(
color: Colors.red.shade300,
blurRadius: 8,
offset: const Offset(2, 2),
)
],
),
)
除此之外汛聚，文字陰影還有一種實現(xiàn)锹安，那就是通過BackdropFilter來進行模擬，BackdropFilter的作用也是創(chuàng)建Blur效果倚舀，所以叹哭，它也可以用來替代陰影，但是效果沒有Shadow靈活（類似的還有ImageFiltered）痕貌。
var style = const TextStyle(
fontSize: 32,
fontWeight: FontWeight.w700,
);
var text = "中華人民共和國";
return Center(
child: Stack(
children: [
Text(
text,
style: style,
),
BackdropFilter(
filter: ui.ImageFilter.blur(
sigmaX: 2,
sigmaY: 2,
),
child: Text(
text,
style: style,
),
)
],
),
);
Neumorphism
Neumorphism是一種全新的設(shè)計風格风罩，通常被稱為新的擬物風格，它其實就是通過陰影來實現(xiàn)的舵稠。
擬態(tài)陰影通常都由兩個Shadow組合而成超升，一個Shadow比Widget Color更淺入宦，另一個Shadow更深，我們通過下面這個例子來看下如何實現(xiàn)擬態(tài)陰影室琢。
return Center(
child: Text(
'中華人民共和國',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 40,
shadows: [
const Shadow(
offset: Offset(3, 3),
color: Colors.black38,
blurRadius: 10,
),
Shadow(
offset: const Offset(-3, -3),
color: Colors.white.withOpacity(0.85),
blurRadius: 10,
),
],
color: Colors.grey.shade300,
),
),
);
在shadows中配置兩個相對于中心互相偏離的Shadow乾闰，并使得它們的顏色是互補的，例如黑和白盈滴，而Widget Color通常和背景色相同涯肩。
例如下面這樣的配置：
light mode:
Background color: Color(0xFFEFEEEE)
Light shadow: Colors.white.withOpacity(0.8),
Dark shadow: Colors.black.withOpacity(0.1)
dark mode:
Background color: Color(0xFF292D32)
Light shadow: Colors.white.withOpacity(0.1),
Dark shadow: Colors.black.withOpacity(0.4)
如果是Container的話，類似上面的Shadow實現(xiàn)巢钓，代碼如下所示病苗。
return Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color: Colors.grey.shade300,
boxShadow: [
const BoxShadow(
offset: Offset(10, 10),
color: Colors.black38,
blurRadius: 20,
),
BoxShadow(
offset: const Offset(-10, -10),
color: Colors.white.withOpacity(0.85),
blurRadius: 20,
),
],
),
),
);
由此可見，擬物陰影的核心症汹，實際上就是兩組互補色的陰影疊加铅乡，當Widget Color和背景色相同時，在邊緣就會產(chǎn)生類似擬物的陰影風格烈菌。
通過下面這個工具阵幸，你可以方便的設(shè)計擬物陰影，找到不同的顏色下的最佳效果芽世。
