Outlined transparent button with gradient border in flutter. Use the below example to Outlined transparent button with gradient border in flutter.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | import 'package:flutter/material.dart'; void main() => runApp(App()); class App extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ UnicornOutlineButton( strokeWidth: 2, radius: 24, gradient: LinearGradient(colors: [Colors.black, Colors.redAccent]), child: Text('OMG', style: TextStyle(fontSize: 16)), onPressed: () {}, ), SizedBox(width: 0, height: 24), UnicornOutlineButton( strokeWidth: 4, radius: 16, gradient: LinearGradient( colors: [Colors.blue, Colors.yellow], begin: Alignment.topCenter, end: Alignment.bottomCenter, ), child: Text('Wow', style: TextStyle(fontSize: 16)), onPressed: () {}, ), ], ), ), ), ), ); } } |
class itself:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 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; } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
