XOOPS輕鬆架 - 線上書籍

:::

Dart 及 flutter 初體驗
==================

lib\\widgets\\unicorn\_out\_line\_button.dart

```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;
}

```

```dart
import 'package:kidney_disease_diet/widgets/unicorn_out_line_button.dart';
```

```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: () {},
),
```

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1899

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器