带有彩色线条的 Flutter 圆形应用栏

Question

我有一个带有彩色线条的圆形 Appbar。 Here is a Screenshot. 我希望颜色线跟随四舍五入。这可能吗，因为我还没有找到任何相关信息？

到目前为止，这是我的代码：

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

弯曲的边框可以通过嵌套两个容器来实现，其中space在它们之间（在这种情况下填充代表笔划宽度）和颜色父容器表示边框的颜色。

这里是完整示例

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

border会覆盖整个appbar，这是你想要的吗？

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),
        ),
      ),

带有彩色线条的 Flutter 圆形应用栏

Flutter rounded appbar with color line

flutter

flutter-appbar