[英]adding a shadow to the top of an appbar in flutter
我正在努力在 AppBar 的頂部添加陰影,我在底部添加了一個,但沒有在頂部添加。 這是我要匹配的設計:
我已將 AppBarTheme 中的系統狀態欄詳細信息明確定義為白色:
systemOverlayStyle: SystemUiOverlayStyle(
statusBarIconBrightness: Brightness.dark,
statusBarBrightness: Brightness.dark,
statusBarColor: Colors.white.withOpacity(0.0)),
我已將整個腳手架推入 SafeArea:
Widget build(BuildContext context) => GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: SafeArea(
child: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(256),
child: Container( // extra container for custom bottom shadows
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.5),
spreadRadius: 6,
blurRadius: 6,
offset: Offset(0, -4),
),
],
),
child: AppBar(...),
),
),
...
),
),
);
}
另外,順便說一下,我在頂部添加了一個圓邊,這樣我就可以看到發生了什么:
請注意,陰影存在,但位於狀態欄下方。 所以我想我正在努力實現的是將狀態欄放在應用欄后面......或者至少讓它看起來像那樣(在狀態欄頂部有一個鏡像陰影或其他東西?)
你會如何解決這個問題? 是否有類似 StatusBarTheme 或用於此目的的東西?
Please Refer below code.
Add elevation and Check.
Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 5.0,
backgroundColor: Colors.white,
actions: [
],)
),
我不得不使用堆棧:
SafeArea(
child: Stack(children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(8.0),
bottomLeft: Radius.circular(8.0)),
color: const Color(0xffffffff),
boxShadow: [
BoxShadow(
color: const Color(0x33000000),
offset: Offset(0, 2),
blurRadius: 4),
])),
AppBar(...
...
主題中沒有任何 systemOverlayStyle 規范。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.