将CustomPainter
“取消绘制”的部分透明化(波纹状的白色部分)?
我想要这种效果,因为当键盘弹出窗口CustomPainter
覆盖了MyButton
如果还有另一种方法可以起到这种效果,则也将有所帮助。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class _MyPainter extends CustomPainter {
_MyPainter({@required this.colorTheme});
final Color colorTheme;
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = colorTheme;
final path = Path()
..moveTo(0, size.height * 0)
..quadraticBezierTo(size.width * 0.05, size.height * 0.875,
size.width * 0.5, size.height * 0.9167)
..quadraticBezierTo(size.width * 0.75, size.height * 0.9584,
size.width * 1.0, size.height * 0.5)
..lineTo(size.width, size.height)
..lineTo(0, size.height);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
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(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FlatButton(
child: Text('My button', style: TextStyle(color: Colors.white)),
onPressed: () {},
color: Colors.blue),
CustomPaint(
painter: _MyPainter(
colorTheme: Theme.of(context).primaryColor,
),
size: const Size(
double.infinity,
80,
),
),
],
),
));
}
}