如何在Flutter中创建带有底部彩色边框的AppBar？

Question

我想创建一个像这样的应用栏，它具有底部边框以及可以使用高程完成的阴影。有人可以提供示例代码片段来实现

Answer 1

也许是这样

AppBar(bottom: PreferredSize(child: Container(color: Colors.orange, height: 4.0,), preferredSize: Size.fromHeight(4.0)),)

Answer 2

理想情况下，如果您想要真正可定制的设计，则应制作自己的应用栏。示例：

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);
}

Answer 3

您可以使用 AppBar 的 shape 属性来实现此目的：

AppBar(
  shape: Border(bottom: BorderSide(color: Colors.orange, width: 4)),
  elevation: 4,
  /* ... */
)

Answer 4

如果您只想使用AppBar底部的小部件，这就是我的方法：

appBar: AppBar(
        title: Text('Soroush!'),
        bottom: PreferredSize(
            child: Container(
              color: Colors.white,
              child: TextFormField(),
            ),
            preferredSize: Size.fromHeight(kToolbarHeight)),

Answer 5

现在 AppBar 中提供了一个 shadowColor 属性，您可以像这样轻松使用它：

AppBar( shadowColor : Colors.blue )

Answer 6

AppBar(elevation: 1, backgroundColor:Colors.orange,)