How could i achieve such AppBar
,The AppBar
itself does not have to be an actual AppBar
widget.
if it can be done with a normal Container
,Painter
or ClipPath
I'd still appreciate it.
Does not have to a SliverAppBar either, no scrolling effects are mandatory.
Here's the widget:
Padding(
padding: EdgeInsets.symmetric(horizontal: 20 , vertical: MediaQuery.of(context).padding.top),
child: ClipPath(
clipper: SimCustomClipper(),
child: Container(
color: Colors.blue.shade600,
width: double.infinity,
height: MediaQuery.of(context).size.height/3,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 50),
child: Align(
alignment: Alignment.centerLeft,
child: Column(
children: [
Text(
'Manage',
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w500,
fontFamily: 'TimesNewRoman',
color: Colors.white,
),
),
Text(
'My SIM Plan',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
fontWeight: FontWeight.w300,
fontFamily: 'TimesNewRoman',
color: Colors.white,
),
),
],
),
),
)
),
),
);
Here's the clipper:
class SimCustomClipper extends CustomClipper<Path>{
@override
Path getClip(Size size) {
Path path = Path();
path.moveTo(0, 0.6*size.width);
path.lineTo(0.33*size.width - 20, size.height -15);
path.quadraticBezierTo(0.33*size.width+5, size.height, 0.33*size.width +30, size.height - 20);
path.lineTo(size.width, size.height /3);
path.lineTo(size.width,0);
path.lineTo(0, 0);
path.close();
return path;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) =>false;
}
btw, according to that clipper, you should make these fixed values eg : 15 ,30 ,...etc flexible to be responsive.