0

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)))),
Munsif Ali
  • 1,839
  • 1
  • 8
  • 22

1 Answers1

0

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,
              ),
            ),
          ),
        ),
      ),
    );
  }
}
Aksoyhlc
  • 285
  • 1
  • 3
  • 11