flutterdartflutter-dependenciesflutter-packagespub.dev

I am trying to make this app bar this is my final goal


enter image description here

I tried to follow some tutorials to make curved app bars but i couldn't get to the same result as i want

enter image description here

My Code :

 appBar: PreferredSize(
          preferredSize: Size.fromHeight(200),
          child: Container(
              decoration: BoxDecoration(
                  borderRadius:
                      BorderRadius.only(bottomRight: Radius.circular(60)),
                  image: DecorationImage(
                      image: AssetImage("assets/images/Group 26249.png"),
                      fit: BoxFit.cover)))),

Solution

  • You can find the working example in the codes below.

    enter image description here

    import 'package:flutter/material.dart';
    
    class OzelAlan extends StatefulWidget {
      const OzelAlan({Key? key}) : super(key: key);
    
      @override
      State<OzelAlan> createState() => _OzelAlanState();
    }
    
    class customClip extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        double w = size.width;
        double h = size.height;
    
        Path path = Path()
          ..moveTo(0, 0)
          ..lineTo(0, w)
          ..cubicTo(0, h * 0.90, 4, h * 0.85, w * 0.12, h * 0.85)
          ..lineTo(w * 0.85, h * 0.85)
          ..cubicTo(w * 0.94, h * 0.85, w, h * 0.85, w, h * 0.75)
          ..lineTo(w, 0)
          ..close();
    
        return path;
      }
    
      @override
      bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
        // TODO: implement shouldReclip
        return true;
      }
    }
    
    class _OzelAlanState extends State<OzelAlan> {
      @override
      Widget build(BuildContext context) {
        return SafeArea(
          child: Scaffold(
            body: ClipPath(
              clipper: customClip(),
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: 350,
                padding: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: Image.network("https://img001.prntscr.com/file/img001/TE3h3lj9SdSA78nHHz2CBw.png").image,
                    fit: BoxFit.fill,
                  ),
                ),
              ),
            ),
          ),
        );
      }
    }