Flutter自定义形状插件morphable_shape的使用

morphable_shape 是一个Flutter插件，它允许创建响应式的、可变形的各种形状。该插件可以让你在不同形状之间进行平滑过渡，并支持多种类型的边框和阴影效果。

开始使用

首先，你需要创建一个 ShapeBorder 实例。这个实例可以根据不同的尺寸自动调整，而无需你手动计算所需的尺寸。例如，以下代码将创建一个带有圆角矩形边框的对象，其中左上角为60像素的圆形半径，右下角为椭圆形半径（60像素, 10%）。

import 'package:dimension/dimension.dart';
import 'package:morphable_shape/morphable_shape.dart';

ShapeBorder rectangle = RectangleShapeBorder(
  borderRadius: DynamicBorderRadius.only(
    topLeft: DynamicRadius.circular(10.toPXLength),
    bottomRight: DynamicRadius.elliptical(60.0.toPXLength, 10.0.toPercentLength)
  ),
);

你可以将 ShapeBorder 应用于 Material 或 ClipPath 等小部件中，以实现形状剪切效果：

Widget widget = Material(
  shape: rectangle,
  clipBehavior: Clip.antiAlias,
  child: Container(),
);

或者可以在 ShapeDecoration 中使用并提供给 Container 或 DecoratedBox 小部件：

Decoration decoration = ShapeDecoration(shape: rectangle);
Widget widget = Container(decoration: decoration);

此外，插件还提供了 DecoratedShadowedShape 小部件，可用于定义内阴影，这是Flutter当前不支持的功能：

Widget widget = DecoratedShadowedShape(
  shape: shape,
  shadows: shadows,
  insetShadows: insetShadows,
  decoration: decoration,
  child: child,
);

动态边框样式 (DynamicBorderSide)

DynamicBorderSide 是内置 BorderSide 类的扩展，支持渐变填充以及部分绘制（如只绘制边框的一半）。还可以更改 strokeJoin 和 strokeCap 参数。

DynamicBorderSide(
  style: BorderStyle.solid,
  width: 1,
  color: Colors.red,
  gradient: LinearGradient(colors:[Colors.red, Colors.blue]),
  begin: 0.toPercentLength,
  end: 100.toPercentLength,
  offset: 0.toPercentLength,
  strokeJoin: StrokeJoin.miter,
  strokeCap: StrokeCap.round,
);

支持的形状

RectangleShapeBorder: 可配置每个角落的样式。
CircleShapeBorder: 创建圆形。
RoundedRectangleShapeBorder: 四个边可以独立配置。
PolygonShapeBorder: 支持改变多边形的边数及圆角等。
StarShapeBorder: 星形，可调整角的数量、凹陷度等。
其他形状：如弧形、箭头、气泡、梯形和三角形等。

形状变形

所有形状都可以相互变形。要实现这一点，需要创建一个 MorphableShapeBorderTween 对象：

MorphableShapeBorderTween shapeBorderTween =
    MorphableShapeBorderTween(begin: beginShapeBorder, end: endShapeBorder);

ShapeBorder intermediate = shapeBorderTween.lerp(t); // t从0到1

形状序列化

每个形状都支持序列化功能。如果设计了满意的形状，可以通过 toJson() 方法将其转换为JSON格式保存，并通过解析JSON字符串重新加载。

Shape shape = RoundedRectangleShape();
String jsonStr = json.encode(shape.toJson());
MorphableShapeBorder shapeDecoded = parseMorphableShapeBorder(json.decode(jsonStr));

装饰带阴影的形状

使用 DecoratedShadowedShape 小部件可以为你的组件添加阴影和内阴影效果。

DecoratedShadowedShape(
  shape: shape,
  shadows: shadows,
  insetShadows: insetShadows,
  decoration: decoration,
  child: child,
);

示例应用

为了帮助用户更方便地设计和测试各种形状，插件自带了一个图形化的编辑工具，可以直接在线访问 https://fluttershape.com/ 或者克隆仓库后本地运行。

以上就是关于 morphable_shape 插件的基本介绍和使用方法，希望对你有所帮助！如果你有任何问题或建议，请随时提问。

更多关于Flutter自定义形状插件morphable_shape的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼•2 天前

更多关于Flutter自定义形状插件morphable_shape的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何使用 morphable_shape 插件来自定义形状的 Flutter 代码示例。morphable_shape 是一个强大的 Flutter 插件，它允许你创建和动画化复杂的形状。

首先，确保你已经在 pubspec.yaml 文件中添加了 morphable_shape 依赖：

dependencies:
  flutter:
    sdk: flutter
  morphable_shape: ^x.y.z  # 替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，下面是一个完整的 Flutter 应用示例，展示如何使用 morphable_shape 创建一个自定义形状：

import 'package:flutter/material.dart';
import 'package:morphable_shape/morphable_shape.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Morphable Shape Example'),
        ),
        body: Center(
          child: CustomShapeWidget(),
        ),
      ),
    );
  }
}

class CustomShapeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MorphableShape(
      shape: MorphableShapeBorder(
        // 使用 PolygonShape 创建一个多边形形状
        polygon: PolygonShape(
          sides: 6, // 六边形
          radius: 30.0, // 圆角半径
        ),
      ),
      duration: Duration(seconds: 2), // 动画持续时间
      child: Container(
        width: 200,
        height: 200,
        color: Colors.blue.withOpacity(0.6),
        child: Center(
          child: Text(
            'Hexagon',
            style: TextStyle(color: Colors.white, fontSize: 24),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，其中包含一个自定义形状部件 CustomShapeWidget。我们使用 MorphableShape 包裹了一个 Container，并通过 MorphableShapeBorder 和 PolygonShape 定义了一个六边形形状。

关键点解释：

MorphableShape：
- shape 参数接受一个 MorphableShapeBorder 对象，用于定义形状。
- duration 参数定义了形状动画的持续时间。
MorphableShapeBorder：
- 这里我们使用 PolygonShape 来定义一个多边形形状。
- sides 参数定义了多边形的边数（例如，6 表示六边形）。
- radius 参数定义了多边形的圆角半径。
Container：
- Container 用于定义形状的背景颜色、大小以及子部件。
- 在这个例子中，我们设置了一个半透明的蓝色背景，并在中心放置了一个文本标签。

这个示例展示了如何使用 morphable_shape 插件创建一个简单的六边形形状。你可以根据需要调整形状参数，或探索 morphable_shape 提供的更多高级功能，例如形状动画、渐变颜色等。