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

如何解决带有彩色线条的颤动圆形应用栏

我有一个带有彩色线条的圆形应用栏。 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),);
  }
}

解决方法

您可以通过实施 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),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(),

,

边框会覆盖整个应用栏，这是你想要的吗？

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