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

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

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

Result of my work

我把我使用的代码粘贴在下面,但也给你这个 链接在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;
}

解决方案:

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

解决方法

enter image description here

给TA打赏
共{{data.count}}人
人已打赏
未分类

WPF中的单选按钮导航问题?

2022-9-9 8:04:16

未分类

无法访问Post应用的models.py中的用户对象。Django

2022-9-9 8:04:18

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索