Flutter 圓角appbar帶彩線

Question

我有一個帶有彩色線條的圓形 Appbar。 這是一個屏幕截圖。 我希望顏色線跟隨舍入。 這可能嗎，因為我還沒有找到任何關於它的信息？

到目前為止，這是我的代碼：

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Test",
          style: TextStyle(fontStyle: FontStyle.italic),
        ),
        centerTitle: true,
        elevation: 10,
        backgroundColor: Colors.cyan[900],
        bottom: PreferredSize(
            preferredSize: Size.fromHeight(4.0),
            child: SizedBox(
              height: 5,
              child: Container(
                color: Colors.orange,
              ),
            )),
        shadowColor: Colors.cyan[900],
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
            bottom: Radius.circular(30),
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以通過實現PreferredSizeWidget創建自己的自定義 Appbar

彎曲的邊框可以通過嵌套兩個容器來實現，它們之間的空間（本例中的填充表示筆划寬度），父容器的顏色表示邊框的顏色。

這是完整的例子

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  const CustomAppBar({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 80.0,
      padding: EdgeInsets.only(bottom: 6.0),
      decoration: BoxDecoration(
        color: Colors.amber,
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(16.0),
          bottomRight: Radius.circular(16.0),
        ),
      ),
      child: Container(
        height: double.infinity,
        padding: EdgeInsets.symmetric(horizontal: 8.0),
        decoration: BoxDecoration(
            color: AppTheme.primaryColor,
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(16.0),
              bottomRight: Radius.circular(16.0),
            ),
            boxShadow: [BoxShadow(color: AppTheme.primaryColor.withOpacity(.4), spreadRadius: 2.0, blurRadius: 12.0)]),
        child: Center(
          child: Text("Hello Custom Appbar"),
        ),
      ),
    );
  }

  @override
  Size get preferredSize => Size(double.infinity, 150.0);
}

然后像使用它

Scaffold(
      appBar: CustomAppBar() ,

Answer 2

邊框將覆蓋整個應用欄，這是你想要的嗎？

Scaffold(
      extendBody: true,
      appBar: AppBar(
        title: Text(
          "Test",
          style: TextStyle(fontStyle: FontStyle.italic),
        ),
        centerTitle: true,
        elevation: 10,
        backgroundColor: Colors.cyan[900],
        shadowColor: Colors.cyan[900],
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
            bottom: Radius.circular(30),
          ),
          side: BorderSide(width: 3.0, color: Colors.orange),
        ),
      ),