我怎样才能在Flutter中达到这样效果:
oaxa6hgo1#
只需将文本替换为Image.network使用以下代码
UnicornOutlineButton( strokeWidth: 2, radius: 24, gradient: LinearGradient( colors: [Colors.black, Colors.redAccent]), child: Text('OMG', style: TextStyle(fontSize: 16)), onPressed: () {}, ),
创建名为UnicornOutlineButton的新类
UnicornOutlineButton
class UnicornOutlineButton extends StatelessWidget { final _GradientPainter _painter; final Widget _child; final VoidCallback _callback; final double _radius; UnicornOutlineButton({ @required double strokeWidth, @required double radius, @required Gradient gradient, @required Widget child, @required VoidCallback onPressed, }) : this._painter = _GradientPainter(strokeWidth: strokeWidth, radius: radius, gradient: gradient), this._child = child, this._callback = onPressed, this._radius = radius; @override Widget build(BuildContext context) { return CustomPaint( painter: _painter, child: GestureDetector( behavior: HitTestBehavior.translucent, onTap: _callback, child: InkWell( borderRadius: BorderRadius.circular(_radius), onTap: _callback, child: Container( constraints: BoxConstraints(minWidth: 88, minHeight: 48), child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ _child, ], ), ), ), ), ); } } class _GradientPainter extends CustomPainter { final Paint _paint = Paint(); final double radius; final double strokeWidth; final Gradient gradient; _GradientPainter({@required double strokeWidth, @required double radius, @required Gradient gradient}) : this.strokeWidth = strokeWidth, this.radius = radius, this.gradient = gradient; @override void paint(Canvas canvas, Size size) { // create outer rectangle equals size Rect outerRect = Offset.zero & size; var outerRRect = RRect.fromRectAndRadius(outerRect, Radius.circular(radius)); // create inner rectangle smaller by strokeWidth Rect innerRect = Rect.fromLTWH(strokeWidth, strokeWidth, size.width - strokeWidth * 2, size.height - strokeWidth * 2); var innerRRect = RRect.fromRectAndRadius(innerRect, Radius.circular(radius - strokeWidth)); // apply gradient shader _paint.shader = gradient.createShader(outerRect); // create difference between outer and inner paths and draw it Path path1 = Path()..addRRect(outerRRect); Path path2 = Path()..addRRect(innerRRect); var path = Path.combine(PathOperation.difference, path1, path2); canvas.drawPath(path, _paint); } @override bool shouldRepaint(CustomPainter oldDelegate) => oldDelegate != this; }
1条答案
按热度按时间oaxa6hgo1#
只需将文本替换为Image.network
使用以下代码
创建名为
UnicornOutlineButton
的新类