flutterflutter-appbarflutter-custompainterflutter-ui

How Can I Create an AppBar That Looks Like This:


enter image description here

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.


Solution

  • enter image description here

    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.