Flutter rounded appbar with color line - flutter

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