[英]How to transform a rectangle in flutter like in this example?
I am a beginner in Flutter and Dart, and I am working on designing a custom navigation bar. 我是Flutter和Dart的初学者,我正在设计自定义导航栏。 What I would like to know is how can I use flutter to transform a rectangle into this kind of shape? 我想知道的是如何使用颤振将矩形转换为这种形状?
Any help or tutorials on custom drawn widgets are much appreciated! 关于自定义绘制的小部件的任何帮助或教程都将不胜感激!
ClipPath
can be the solution for you and you can create custom clippers like this : ClipPath
可以为您提供解决方案,您可以像这样创建自定义的ClipPath
:
class MyClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path myPath = Path();
myPath.lineTo(0.0, size.height);
myPath.quadraticBezierTo(
size.width / 4,
size.height / 1.2,
size.width / 2,
size.height / 1.2
);
myPath.quadraticBezierTo(
size.width - (size.width / 4),
size.height / 1.2,
size.width,
size.height);
myPath.lineTo(size.width, 0.0);
return myPath;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}
I posted my whole code in the follow, you can play with it and convert to what you need : 我在下面发布了我的整个代码,您可以使用它并转换为所需的代码:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
child: Center(
child: ClipPath(
clipper: MyClipper(),
child: Container(
height: 200,
width: 300,
color: Colors.black26,
),
)),
),
),
);
}
}
class MyClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path myPath = Path();
myPath.lineTo(0.0, size.height);
myPath.quadraticBezierTo(
size.width / 4,
size.height / 1.2,
size.width / 2,
size.height / 1.2
);
myPath.quadraticBezierTo(
size.width - (size.width / 4),
size.height / 1.2,
size.width,
size.height);
myPath.lineTo(size.width, 0.0);
return myPath;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.