如何解决如何在Flutter中的图像中添加波浪效果
如何在Flutter中为图像添加波浪效果。The effect that I wish to add in an image is this in the first screen
编辑:自定义Clipper可以帮助我完成这项任务
解决方法
您可以使用自定义裁剪器关注此博客https://www.developerlibs.com/2019/08/flutter-draw-custom-shaps-clip-path.html
,检查一下!
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',debugShowCheckedModeBanner: false,theme: ThemeData(
primaryColor: const Color.fromARGB(255,255),primaryColorDark: const Color(0xFF167F67),accentColor: const Color(0xFF02BB9F),),home: MyHomePage(title: 'Flutter Clip Path',);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key,this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,appBar: AppBar(
title: Text(widget.title,style: TextStyle(color:Colors.white),body: Padding(
padding: const EdgeInsets.all(0.0),child: ClipPath(
child: Container(
width: MediaQuery.of(context).size.width,height: 400,color: Colors.orange,clipper: CustomClipPath(),);
}
}
class CustomClipPath extends CustomClipper<Path> {
var radius=10.0;
@override
Path getClip(Size size) {
Path path = Path();
path.lineTo(0,size.height);
path.quadraticBezierTo(size.width/4,size.height
- 40,size.width/2,size.height-20);
path.quadraticBezierTo(3/4*size.width,size.height,size.width,size.height-30);
path.lineTo(size.width,0);
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
输出看起来像您的第一个屏幕,
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。