Как сделать кнопку с рельефным эффектом во флаттере

Question

Я пытаюсь добиться облегчения эффекта кнопки, у меня есть файл png, и я хочу нарисовать его во флаттере.

Я пробовал использовать класс CustomPainter, и я так близко. Мне нужно нарисовать RRect только с 3-х сторон (слева, снизу, справа), которые я хочу, чтобы черный был размытым, а верхняя сторона - размытым и альфа.

Я вставляю код, который использовал ниже, но также даю вам ссылку на 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

В конце концов, я смог сделать это сам, ниже моего решения, если это может быть полезно для кого-то еще.

Решение