如何在Flutter中制作具有浮雕效果的按钮

Question

我想实现一个按钮的浮雕效果，我有png文件，我想把它画成flutter。

我试过用CustomPainter类，但就差一点了，我需要的是绘制一个只有3条边的RRect（左、下、右）。我需要的是画一个RRect，只有3个边（左，底，右），我想黑色的模糊和顶部的白色模糊和alpha。

我把我使用的代码粘贴在下面，但也给你这个 链接在dart.dev 与代码。

先谢谢你了。

    import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Obtained"),
            SizedBox(height: 30),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 40),
              width: MediaQuery.of(context).size.width,
              height: 200,
              child: CustomPaint(
                painter: BorderPainter(),
                child: Container(),
              ),
            ),
            SizedBox(height: 30),
            Text("Wanted"),            
            Image(
                image: NetworkImage("http://www.monacosimone.com/newGame.png")
            ),
          ],
        ),
      ),
    );
  }
}

const double _kRadius = 25;
const double _kBorderWidth = 10;

class BorderPainter extends CustomPainter {
  BorderPainter();

  @override
  void paint(Canvas canvas, Size size) {
    final rrectBorder =
        RRect.fromRectAndRadius(Offset.zero & size, Radius.circular(_kRadius));
    final rrectShadow2 = RRect.fromRectAndCorners(Offset.zero & size,
        topLeft: Radius.circular(_kRadius),
        topRight: Radius.circular(_kRadius),
        bottomLeft: Radius.circular(_kRadius),
        bottomRight: Radius.circular(_kRadius));
    final rrectShadow3 = RRect.fromRectAndCorners(Offset.zero & size,
        topLeft: Radius.circular(_kRadius),
        topRight: Radius.circular(_kRadius),
        bottomLeft: Radius.circular(_kRadius),
        bottomRight: Radius.circular(_kRadius));

    final backgroundPaint = Paint()
      ..strokeWidth = _kBorderWidth
      ..color = Color(0xFFE6E6E6)
      ..style = PaintingStyle.fill;

    final shadowPaint2 = Paint()
      ..strokeWidth = _kBorderWidth
      ..color = Color(0x55ffffff)
      ..strokeWidth = 50
      ..style = PaintingStyle.stroke
      ..maskFilter = MaskFilter.blur(BlurStyle.normal, 10);

    final shadowPaint3 = Paint()
      ..strokeWidth = _kBorderWidth
      ..color = Color(0x55000000)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 50
      ..maskFilter = MaskFilter.blur(BlurStyle.solid, 8);

    final borderPaint = Paint()
      ..strokeWidth = _kBorderWidth
      ..color = Colors.black
      ..style = PaintingStyle.stroke;

    canvas.drawRRect(rrectBorder, backgroundPaint);
    canvas.drawRRect(rrectBorder, borderPaint);
    canvas.drawRRect(rrectShadow2, shadowPaint2);
    canvas.drawRRect(rrectShadow3, shadowPaint3);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

Answer 1

毕竟，我已经能够做到这一点我自己，下面我的解决方案，如果它可以帮助别人。

解决方法