Flutter 圆角appbar带彩线

Question

i have a rounded Appbar with a color line. Here is a Screenshot. I want the color line to follow the rounding. Is this possible, since I have not found anything about it?

This is my code so far:

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

you can create your own custom Appbar by implementing PreferredSizeWidget

and the curved border can be achieved through nesting two containers where the space between them (padding in this case represents the stroke width) and the color of the parent container represents the color of the border.

here is full example

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

then use it like

Scaffold(
      appBar: CustomAppBar() ,

Answer 2

border will cover whole appbar, is this what you want?

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