也许是这样的
AppBar(
bottom: PreferredSize(
preferredSize: const Size.fromHeight(4.0),
child: Container(
color: Colors.orange,
height: 4.0,
),
)
您可以使用 AppBar 的
shape
属性来实现此目的:
AppBar(
shape: Border(
bottom: BorderSide(
color: Colors.orange,
width: 4
)
),
elevation: 4,
/* ... */
)
理想情况下,如果您想要真正可定制的设计,您应该制作自己的应用栏。示例:
class MyAppbar extends StatelessWidget implements PreferredSizeWidget {
final Widget title;
const MyAppbar({Key key, this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Material(
elevation: 26.0,
color: Colors.white,
child: Container(
padding: const EdgeInsets.all(10.0),
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.deepOrange,
width: 3.0,
style: BorderStyle.solid,
),
),
),
child: title,
),
);
}
final Size preferredSize = const Size.fromHeight(kToolbarHeight);
}
现在 AppBar 中提供了
shadowColor
属性,您可以像这样轻松使用:
AppBar( shadowColor : Colors.blue )
如果您只想使用 AppBar 底部的小部件,我就是这样做的:
appBar: AppBar(
title: Text('Soroush!'),
bottom: PreferredSize(
child: Container(
color: Colors.white,
child: TextFormField(),
),
preferredSize: Size.fromHeight(kToolbarHeight)),