feat: Add support for gradient in outline border.

examples/mirai_gallery/assets/json/text_field_example.json

@@ -226,6 +226,42 @@
                         "readOnly": false,
                         "enabled": true,
                         "autovalidateMode": "onUserInteraction"
+                    },
+                    {
+                        "type": "sizedBox",
+                        "height": 24
+                    },
+                    {
+                        "type": "textField",
+                        "maxLines": 1,
+                        "keyboardType": "text",
+                        "textInputAction": "done",
+                        "textAlign": "start",
+                        "textCapitalization": "none",
+                        "textDirection": "ltr",
+                        "textAlignVertical": "top",
+                        "obscureText": true,
+                        "decoration": {
+                            "filled": true,
+                            "labelText": "Gradient TextField",
+                            "border": {
+                                "type": "outlineInputBorder",
+                                "borderRadius": {
+                                    "topLeft": 8,
+                                    "topRight": 8,
+                                    "bottomLeft": 8,
+                                    "bottomRight": 8
+                                },
+                                "gradient": {
+                                    "colors": [
+                                        "#FF0000", "#0000FF"
+                                    ]
+                                }
+                            }
+                        },
+                        "readOnly": false,
+                        "enabled": true,
+                        "autovalidateMode": "onUserInteraction"
                     }
                 ]
             }

examples/mirai_gallery/ios/Runner.xcodeproj/project.pbxproj

@@ -127,7 +127,7 @@
 		97C146E61CF9000F007C117D /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 1300;
+				LastUpgradeCheck = 1430;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					97C146ED1CF9000F007C117D = {

examples/mirai_gallery/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1300"
+   LastUpgradeVersion = "1430"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"

examples/mirai_gallery/pubspec.lock

@@ -1,4 +1,4 @@
-# Generated by pub
+  # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
   _fe_analyzer_shared:
@@ -149,10 +149,10 @@ packages:
     dependency: transitive
     description:
       name: collection
-      sha256: "4a07be6cb69c84d677a6c3096fcf960cc3285a8330b4603e0d463d15d9bd934c"
+      sha256: f092b211a4319e98e5ff58223576de6c2803db36221657b46c82574721240687
       url: "https://pub.dev"
     source: hosted
-    version: "1.17.1"
+    version: "1.17.2"
   convert:
     dependency: transitive
     description:
@@ -359,18 +359,18 @@ packages:
     dependency: transitive
     description:
       name: matcher
-      sha256: "6501fbd55da300384b768785b83e5ce66991266cec21af89ab9ae7f5ce1c4cbb"
+      sha256: "1803e76e6653768d64ed8ff2e1e67bea3ad4b923eb5c56a295c3e634bad5960e"
       url: "https://pub.dev"
     source: hosted
-    version: "0.12.15"
+    version: "0.12.16"
   material_color_utilities:
     dependency: transitive
     description:
       name: material_color_utilities
-      sha256: d92141dc6fe1dad30722f9aa826c7fbc896d021d792f80678280601aff8cf724
+      sha256: "9528f2f296073ff54cb9fee677df673ace1218163c3bc7628093e7eed5203d41"
       url: "https://pub.dev"
     source: hosted
-    version: "0.2.0"
+    version: "0.5.0"
   meta:
     dependency: transitive
     description:
@@ -491,10 +491,10 @@ packages:
     dependency: transitive
     description:
       name: source_span
-      sha256: dd904f795d4b4f3b870833847c461801f6750a9fa8e61ea5ac53f9422b31f250
+      sha256: "53e943d4206a5e30df338fd4c6e7a077e02254531b138a15aec3bd143c1a8b3c"
       url: "https://pub.dev"
     source: hosted
-    version: "1.9.1"
+    version: "1.10.0"
   stack_trace:
     dependency: transitive
     description:
@@ -539,10 +539,10 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: eb6ac1540b26de412b3403a163d919ba86f6a973fe6cc50ae3541b80092fdcfb
+      sha256: "75760ffd7786fffdfb9597c35c5b27eaeec82be8edfb6d71d32651128ed7aab8"
       url: "https://pub.dev"
     source: hosted
-    version: "0.5.1"
+    version: "0.6.0"
   timing:
     dependency: transitive
     description:
@@ -575,6 +575,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.2"
+  web:
+    dependency: transitive
+    description:
+      name: web
+      sha256: dc8ccd225a2005c1be616fe02951e2e342092edf968cf0844220383757ef8f10
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.4-beta"
   web_socket_channel:
     dependency: transitive
     description:
@@ -592,5 +600,5 @@ packages:
     source: hosted
     version: "3.1.1"
 sdks:
-  dart: ">=3.0.0 <4.0.0"
+  dart: ">=3.1.0-185.0.dev <4.0.0"
   flutter: ">=1.17.0"

packages/mirai/lib/src/framework/ui/mirai_outline_input_border.dart

@@ -0,0 +1,186 @@
+import 'dart:math' as math;
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+class MiraiOutlineInputBorder extends InputBorder {
+  const MiraiOutlineInputBorder({
+    this.width = 1.0,
+    this.borderRadius = const BorderRadius.all(Radius.circular(4.0)),
+    this.gapPadding = 4.0,
+    this.color = Colors.black,
+    this.gradient,
+  });
+
+  final double width;
+  final BorderRadius borderRadius;
+  final double gapPadding;
+  final Color color;
+  final Gradient? gradient;
+
+  @override
+  InputBorder copyWith({BorderSide? borderSide}) => this;
+
+  @override
+  EdgeInsetsGeometry get dimensions => EdgeInsets.all(width);
+
+  @override
+  Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
+    return Path()
+      ..addRRect(
+          borderRadius.resolve(textDirection).toRRect(rect).deflate(width));
+  }
+
+  @override
+  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
+    return Path()..addRRect(borderRadius.resolve(textDirection).toRRect(rect));
+  }
+
+  @override
+  bool get isOutline => true;
+
+  @override
+  void paint(
+    Canvas canvas,
+    Rect rect, {
+    double? gapStart,
+    double gapExtent = 0.0,
+    double gapPercentage = 0.0,
+    TextDirection? textDirection,
+  }) {
+    assert(gapPercentage >= 0.0 && gapPercentage <= 1.0);
+
+    final paint = _getPaint(rect);
+
+    final RRect outer = borderRadius.toRRect(rect);
+    final RRect center = outer.deflate(width / 2.0);
+    if (gapStart == null || gapExtent <= 0.0 || gapPercentage == 0.0) {
+      canvas.drawRRect(center, paint);
+    } else {
+      final double extent =
+          lerpDouble(0.0, gapExtent + gapPadding * 2.0, gapPercentage)!;
+      switch (textDirection!) {
+        case TextDirection.rtl:
+          final Path path = _gapBorderPath(canvas, center,
+              math.max(0.0, gapStart + gapPadding - extent), extent);
+          canvas.drawPath(path, paint);
+
+        case TextDirection.ltr:
+          final Path path = _gapBorderPath(
+              canvas, center, math.max(0.0, gapStart - gapPadding), extent);
+          canvas.drawPath(path, paint);
+      }
+    }
+  }
+
+  Paint _getPaint(Rect rect) {
+    return Paint()
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = width
+      ..shader = gradient?.createShader(rect)
+      ..color = color;
+  }
+
+  Path _gapBorderPath(
+    Canvas canvas,
+    RRect center,
+    double start,
+    double extent,
+  ) {
+    // When the corner radii on any side add up to be greater than the
+    // given height, each radius has to be scaled to not exceed the
+    // size of the width/height of the RRect.
+    final RRect scaledRRect = center.scaleRadii();
+
+    final Rect tlCorner = Rect.fromLTWH(
+      scaledRRect.left,
+      scaledRRect.top,
+      scaledRRect.tlRadiusX * 2.0,
+      scaledRRect.tlRadiusY * 2.0,
+    );
+    final Rect trCorner = Rect.fromLTWH(
+      scaledRRect.right - scaledRRect.trRadiusX * 2.0,
+      scaledRRect.top,
+      scaledRRect.trRadiusX * 2.0,
+      scaledRRect.trRadiusY * 2.0,
+    );
+    final Rect brCorner = Rect.fromLTWH(
+      scaledRRect.right - scaledRRect.brRadiusX * 2.0,
+      scaledRRect.bottom - scaledRRect.brRadiusY * 2.0,
+      scaledRRect.brRadiusX * 2.0,
+      scaledRRect.brRadiusY * 2.0,
+    );
+    final Rect blCorner = Rect.fromLTWH(
+      scaledRRect.left,
+      scaledRRect.bottom - scaledRRect.blRadiusY * 2.0,
+      scaledRRect.blRadiusX * 2.0,
+      scaledRRect.blRadiusY * 2.0,
+    );
+
+    // This assumes that the radius is circular (x and y radius are equal).
+    // Currently, BorderRadius only supports circular radii.
+    const double cornerArcSweep = math.pi / 2.0;
+    final Path path = Path();
+
+    // Top left corner
+    if (scaledRRect.tlRadius != Radius.zero) {
+      final double tlCornerArcSweep =
+          math.acos(clampDouble(1 - start / scaledRRect.tlRadiusX, 0.0, 1.0));
+      path.addArc(tlCorner, math.pi, tlCornerArcSweep);
+    } else {
+      // Because the path is painted with Paint.strokeCap = StrokeCap.butt, horizontal coordinate is moved
+      // to the left using borderSide.width / 2.
+      path.moveTo(scaledRRect.left - width / 2, scaledRRect.top);
+    }
+
+    // Draw top border from top left corner to gap start.
+    if (start > scaledRRect.tlRadiusX) {
+      path.lineTo(scaledRRect.left + start, scaledRRect.top);
+    }
+
+    // Draw top border from gap end to top right corner and draw top right corner.
+    const double trCornerArcStart = (3 * math.pi) / 2.0;
+    const double trCornerArcSweep = cornerArcSweep;
+    if (start + extent < scaledRRect.width - scaledRRect.trRadiusX) {
+      path.moveTo(scaledRRect.left + start + extent, scaledRRect.top);
+      path.lineTo(scaledRRect.right - scaledRRect.trRadiusX, scaledRRect.top);
+      if (scaledRRect.trRadius != Radius.zero) {
+        path.addArc(trCorner, trCornerArcStart, trCornerArcSweep);
+      }
+    } else if (start + extent < scaledRRect.width) {
+      final double dx = scaledRRect.width - (start + extent);
+      final double sweep =
+          math.asin(clampDouble(1 - dx / scaledRRect.trRadiusX, 0.0, 1.0));
+      path.addArc(trCorner, trCornerArcStart + sweep, trCornerArcSweep - sweep);
+    }
+
+    // Draw right border and bottom right corner.
+    if (scaledRRect.brRadius != Radius.zero) {
+      path.moveTo(scaledRRect.right, scaledRRect.top + scaledRRect.trRadiusY);
+    }
+    path.lineTo(scaledRRect.right, scaledRRect.bottom - scaledRRect.brRadiusY);
+    if (scaledRRect.brRadius != Radius.zero) {
+      path.addArc(brCorner, 0.0, cornerArcSweep);
+    }
+
+    // Draw bottom border and bottom left corner.
+    path.lineTo(scaledRRect.left + scaledRRect.blRadiusX, scaledRRect.bottom);
+    if (scaledRRect.blRadius != Radius.zero) {
+      path.addArc(blCorner, math.pi / 2.0, cornerArcSweep);
+    }
+
+    // Draw left border
+    path.lineTo(scaledRRect.left, scaledRRect.top + scaledRRect.tlRadiusY);
+
+    return path;
+  }
+
+  @override
+  ShapeBorder scale(double t) {
+    return MiraiOutlineInputBorder(
+      width: width * t,
+      borderRadius: borderRadius * t,
+      gapPadding: gapPadding * t,
+    );
+  }
+}

packages/mirai/lib/src/parsers/mirai_input_border/mirai_input_border.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 import 'package:mirai/mirai.dart';
+import 'package:mirai/src/framework/ui/mirai_outline_input_border.dart';
+import 'package:mirai/src/utils/color_utils.dart';
 
 part 'mirai_input_border.freezed.dart';
 part 'mirai_input_border.g.dart';
@@ -12,9 +14,11 @@ class MiraiInputBorder with _$MiraiInputBorder {
   const factory MiraiInputBorder({
     @Default(MiraiInputBorderType.underlineInputBorder)
     MiraiInputBorderType type,
-    MiraiBorderSide? borderSide,
     MiraiBorderRadius? borderRadius,
     @Default(4.0) double gapPadding,
+    @Default(0.0) double width,
+    String? color,
+    MiraiGradient? gradient,
   }) = _MiraiInputBorder;
 
   factory MiraiInputBorder.fromJson(Map<String, dynamic> json) =>
@@ -28,14 +32,19 @@ extension MiraiInputBorderParser on MiraiInputBorder {
         return InputBorder.none;
       case MiraiInputBorderType.underlineInputBorder:
         return UnderlineInputBorder(
-          borderSide: borderSide.parse,
+          borderSide: BorderSide(
+            color: color?.toColor ?? Colors.black,
+            width: width,
+          ),
           borderRadius: borderRadius.parse,
         );
       case MiraiInputBorderType.outlineInputBorder:
-        return OutlineInputBorder(
-          borderSide: borderSide.parse,
+        return MiraiOutlineInputBorder(
+          width: width,
           borderRadius: borderRadius.parse,
           gapPadding: gapPadding,
+          color: color?.toColor ?? Colors.black,
+          gradient: gradient?.parse,
         );
     }
   }