[英]Flutter: How to custom clip an image from bottom to up?
I am developing a flutter project and trying to clip an image.我正在开发一个颤振项目并尝试剪辑图像。 Below is my code
下面是我的代码
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final appTitle = 'Drawer Demo';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: appTitle,
home: MyHomePage(title: appTitle),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
var scaffoldKey = GlobalKey<ScaffoldState>();
MyHomePage({Key key, this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("THIS IS APP BAR"),),
body: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 2.0),
child:ClipPath(
clipper: ClippingClass(),
child: Container(
width: MediaQuery
.of(context)
.size
.width,
height: 320.0,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"https://picsum.photos/250?image=9"))
),
),
),
),
],
),
);
}
}
class ClippingClass extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
path.lineTo(0.0, size.height-40);
path.quadraticBezierTo(size.width / 4, size.height,
size.width / 2, size.height);
path.quadraticBezierTo(size.width - (size.width / 4), size.height,
size.width, size.height - 40);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
Below is the result.下面是结果。
However my intention is not to have the curve from bottom to up.然而,我的目的不是让曲线从下到上。 Instead here I have it from bottom to down.
相反,我从下到下都有它。
What i need is as below (ignore the lines, they are guide lines from Adobe XD)我需要的是如下(忽略线条,它们是来自 Adobe XD 的指导线)
How can I get this done?我怎样才能做到这一点?
You just need to invert where you are applying your -40
in the height of the paths being drawn:您只需要在正在绘制的路径的高度中反转应用
-40
的位置:
path.lineTo(0.0, size.height);
path.quadraticBezierTo(size.width / 4, size.height - 40,
size.width / 2, size.height - 40);
path.quadraticBezierTo(size.width - (size.width / 4), size.height - 40,
size.width, size.height);
path.lineTo(size.width, 0.0);
path.close();
Change is变化是
path.lineTo(0.0, size.height);
path.quadraticBezierTo(size.width / 4, size.height-40, size.width / 2, size.height-40);
path.quadraticBezierTo(size.width - (size.width / 4), size.height-40, size.width, size.height - 0);
path.lineTo(size.width, 0.0);
Full solution完整解决方案
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final appTitle = 'Drawer Demo';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: appTitle,
home: MyHomePage(title: appTitle),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
var scaffoldKey = GlobalKey<ScaffoldState>();
MyHomePage({Key key, this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("THIS IS APP BAR"),),
body: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 2.0),
child:ClipPath(
clipper: ClippingClass(),
child: Container(
width: MediaQuery
.of(context)
.size
.width,
height: 320.0,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"https://picsum.photos/250?image=9"))
),
),
),
),
],
),
);
}
}
class ClippingClass extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
path.lineTo(0.0, size.height);
path.quadraticBezierTo(size.width / 4, size.height-40, size.width / 2, size.height-40);
path.quadraticBezierTo(size.width - (size.width / 4), size.height-40, size.width, size.height - 0);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.