how to make curved app bar with custom clipper in flutter

Question

hi i am new to flutter,

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

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

after some googling i could've do this simple curve
here is the clipper code i used

class CurvedClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height - 30);
    path.quadraticBezierTo(
        size.width / 2, size.height, size.width, size.height - 30);
    path.lineTo(size.width, 0);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

here is my question is there anyway to convert svg curve to this curve clipper?

Tichonn

Answer 1

To build something similar - you'll need at least 2 quad beziers and one cubic.

I've made an example of how to achieve a result that looks mostly like the one on the image, but it might need some more fine-tuning to fit your needs.

The code has no comments provided, but you can get the idea by just changing the variables and refreshing the app (You need at least basic knowledge of how bezier lines work).

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          shape: CustomShapeBorder(),
          leading: Icon(Icons.menu),
          actions: <Widget>[
            IconButton(icon: Icon(Icons.notifications),onPressed: (){},)
          ],
        ),
        body: Container(),
      ),
    );
  }
}

class CustomShapeBorder extends ContinuousRectangleBorder {
  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {

    final double innerCircleRadius = 150.0;

    Path path = Path();
    path.lineTo(0, rect.height);
    path.quadraticBezierTo(rect.width / 2 - (innerCircleRadius / 2) - 30, rect.height + 15, rect.width / 2 - 75, rect.height + 50);
    path.cubicTo(
        rect.width / 2 - 40, rect.height + innerCircleRadius - 40,
        rect.width / 2 + 40, rect.height + innerCircleRadius - 40,
        rect.width / 2 + 75, rect.height + 50
    );
    path.quadraticBezierTo(rect.width / 2 + (innerCircleRadius / 2) + 30, rect.height + 15, rect.width, rect.height);
    path.lineTo(rect.width, 0.0);
    path.close();

    return path;
  }
}

Vonnievonny

not exactly as i wanted but i think i can take it from here thanks ^^ – Tichonn

i want to ask you something if i have the svg of this bar is there anyway to make this easier – Tichonn

You can use the flutter shape maker to make this. You just put your svg on the flutter shape maker and it gives you a CustomPainter dart class of your svg file. Then you just have to use the created customPainter on a CustomPaint widget. Like this: CustomPaint( size: width, painter: CustomPainter(), ) fluttershapemaker.com – Eduction