I am struggling with designing the below appbar design of the app in flutter i have checked various online resources,documentation,official flutter website but too much confused how to design the specifically this type of app bar in Flutter and dart.
This is image of the design that i am coding in flutter:
The problem i am facing is that i had try to build this design by using custompainter in the leading widget of the appbar but leading widget has fix space and we can not expand its space so i tried to design in the title of the app bar but i need these shapes in the start of the appbar and that i have researched this issue over google and find that we can design customappbaar by implementing the prefferedsize widget but in that as well i am unable to code i know this that it can be drawn by using the custom painter function canvas.draw but i am unable to know the parameters of that function and i am stuck on this problem from one week if anyone can guide how to do this i will be very helpful .Thanks
its my code i have obsoleted the wrong code so that if someone can see my approach and help me thanks
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
@override
Widget build(BuildContext Context) {
return AppBar(
title: Container(
color: Colors.blue,
child: CustomPaint(
painter: CustomPainter1(),
),
));
}
@override
Size get preferredSize => Size.fromHeight(80.0);
}
class CustomPainter1 extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
var paint1 = Paint()
..color = Color(0xff55847A).withOpacity(0.5)
..style = PaintingStyle.fill;
//a circle
canvas.drawCircle(Offset(10, 50), 100, paint1);
canvas.drawCircle(Offset(30, -10), 100, paint1);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
You can use the
preferredSize
forCustomPaint
size. Also shiftradius px
the top circle. I am use ClipRRect for on top to clip the top-left corner, we can also play with paint.