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

Answer 1

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

Answer 2

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