How to do I make custom app bar like this in flutter?

Question

Anyone knows how to make appbar that has the bottom third of a circle attached to the bottom?

This it what I am able to get:

This is my code. The image of the person is not the problem the padding at the left and right side and the rounded left bottom and right bottom are the problems . I am not able to achieve those.

 class CustomAppBar extends StatelessWidget with PreferredSizeWidget { @override Widget build(BuildContext context) { return AppBar( shape: CustomShapeBorder(), ); } @override // TODO: implement preferredSiz Size get preferredSize => Size.fromHeight(40); } class CustomShapeBorder extends ContinuousRectangleBorder { @override Path getOuterPath(Rect rect, {TextDirection textDirection}) { double x = 150, y = 45, r = 0.5; Path path = Path() ..addRRect(RRect.fromRectAndCorners(rect)) ..moveTo(rect.bottomRight.dx - 30, rect.bottomCenter.dy) ..relativeQuadraticBezierTo( ((-x / 2) + (x / 6)) * (1 - r), 0, -x / 2 * r, y * r) ..relativeQuadraticBezierTo( -x / 6 * r, y * (1 - r), -x / 2 * (1 - r), y * (1 - r)) ..relativeQuadraticBezierTo( ((-x / 2) + (x / 6)) * (1 - r), 0, -x / 2 * (1 - r), -y * (1 - r)) ..relativeQuadraticBezierTo(-x / 6 * r, -y * r, -x / 2 * r, -y * r); path.close(); return path; } }

Biruk Telelew · Accepted Answer · 2020-09-06 09:16:28Z

output

 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class page extends StatefulWidget { @override _pageState createState() => _pageState(); } class _pageState extends State<page> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(elevation:0,backgroundColor:Colors.purple,title: Row(mainAxisAlignment: MainAxisAlignment.end,children: <Widget>[ IconButton(onPressed:(){},icon: Icon(Icons.settings,),color: Colors.white,) ],),),body: SingleChildScrollView(child: Column(children: <Widget>[ Stack(children: <Widget>[ Container(color:Colors.purple,width:MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height/5, ), Row(mainAxisAlignment:MainAxisAlignment.spaceBetween,children: <Widget>[ Padding(padding:EdgeInsets.only( ),child: Container(width:130,decoration:BoxDecoration(border:Border.all(color: Colors.white),color:Colors.purple,shape:BoxShape.circle), child:CircleAvatar(backgroundColor:Colors.purple,child: [![enter image description here][1]][1]Image.asset("assets/yourimg.png",height: 100,),radius: 70,),) ),Column(children: <Widget>[ Text("Ahmed-AlKheerow",style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),), Text("ID:93956") ],) ]) ])])));}}

use Navigator.pushReplacement to disable the back button

Rasul Aliyev · Accepted Answer · 2021-03-11 14:21:10Z

Instead of using

..addRRect(RRect.fromRectAndCorners(rect))

use

..addRRect(RRect.fromLTRBAndCorners( 10, 24, rect.bottomRight.dx - 10, rect.bottomRight.dy, bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10))

Collectives™ on Stack Overflow

How to do I make custom app bar like this in flutter?

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related