CustomPainter的“取消绘制”部分透明

时间:2020-05-09 19:58:57

标签: flutter dart

CustomPainter“取消绘制”的部分透明化(波纹状的白色部分)?

我想要这种效果,因为当键盘弹出窗口CustomPainter覆盖了MyButton

如果还有另一种方法可以起到这种效果,则也将有所帮助。

enter image description here

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,
                ),
              ),
            ],
          ),
        ));
  }
}

0 个答案:

没有答案