Dart 及 flutter 初體驗
lib\widgets\unicorn_out_line_button.dart
import 'package:flutter/material.dart'; 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( padding: EdgeInsets.all(6.0), constraints: BoxConstraints(minWidth: 48, 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; } import 'package:kidney_disease_diet/widgets/unicorn_out_line_button.dart'; UnicornOutlineButton( strokeWidth: 3, radius: 50, gradient: LinearGradient(colors: [Color(0xff5ae973), Color(0xFF418cf7)]), child: Container( width: 70.0, height: 70.0, alignment: Alignment.center, decoration: BoxDecoration( color: Colors.transparent, border: Border.all( color: Colors.grey[300], width: 1.0, ), shape: BoxShape.circle, image: new DecorationImage( fit: BoxFit.contain, image: AssetImage('assets/images/$img.png'), ), ), ), onPressed: () {}, ),