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

Question

我想创建一个类似这样的应用栏，它有底部边框和阴影效果，可以使用elevation属性实现。请问有人可以提供一个示例代码片段来实现吗？

- Keshav Aditya R P

Answer 1

也许可以这样做

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

- Andrii Turkovskyi

---

这需要创建一个不必要的容器/小部件 请查看此响应-https://dev59.com/yVQJ5IYBdhLWcg3wqXl6#67933424这样更加清洁，也可以直接添加到您的应用程序主题中 - Nikhil Bansal

Answer 2

你可以使用 AppBar 的 shape 属性来实现这一点：

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

- shennan

Answer 3

如果您想要一个真正可定制的设计，最好自己创建应用栏。例如：

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

- Rémi Rousselet

Answer 4

现在在 AppBar 中有一个名为 shadowColor 的属性，您可以像这样轻松使用它： AppBar( shadowColor : Colors.blue )

- Kishan Somaiya

Answer 5

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

- DavichoDev

---

你能提供一些上下文来解释你的代码以及为什么你的答案有效吗？ - Pawara Siriwardhane

Answer 6

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

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

- Hossein Yousefpour