如何在Flutter中使用自定义Clipper制作弯曲的应用栏 [英] how to make curved app bar with custom clipper in 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

经过一番谷歌搜索后，我可以画出一条简单的曲线
这是我使用的Clipper代码

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

这是我的问题反正有什么可以将svg曲线转换为该曲线剪切器?

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

推荐答案

要构建类似的东西-您至少需要2个四方贝塞尔曲线和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;
  }
}

这篇关于如何在Flutter中使用自定义Clipper制作弯曲的应用栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！