Flutter自定义形状绘制插件shaper的使用

Shapes for Flutter

一个非常灵活且可定制的Flutter形状包。

形状列表

你可以在你的Flutter应用中使用以下任何一种形状：

• 星形（任意类型，任意数量的点，圆角或尖角等）
• 圆形
• 矩形（圆角或尖角等）
• 多边形（任意数量的点）

其他项目？

检查我的其他项目：

• osrm: Open Source Routing Machine (OSRM) 客户端，适用于Dart。
• indexed: 带有索引的小部件，允许你在堆栈内对项目进行排序，类似于 z-index。
• kplayer: 支持所有平台的音频播放器。
• puncher: 一个帮助你创建打孔小部件的Flutter包。
• flutter_map_cached_tile_provider: 为 flutter_map 插件提供缓存功能。
• latlng_picker: 为 flutter_map 插件提供位置选择器。
• motif: Flutter图案。
• shaper: Flutter形状。

支持/工作机会？

联系我：mohamadlounnas@gmail.com

使用shaper插件绘制自定义形状

首先，确保在 pubspec.yaml 文件中添加了 shaper 包依赖：

dependencies:
  flutter:
    sdk: flutter
  shaper: ^1.0.0 # 请根据最新版本替换

接下来，导入 shaper 包：

import 'package:flutter/material.dart';
import 'package:shaper/shaper.dart'; // 导入shaper包

示例代码：绘制星形

class StarShapeWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Star Shape Example'),
      ),
      body: Center(
        child: CustomPaint(
          size: Size(200, 200), // 设置画布大小
          painter: StarPainter(), // 自定义画笔
        ),
      ),
    );
  }
}

// 创建自定义画笔
class StarPainter extends CustomPainter {
  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    final star = Star(
      points: 5, // 星形的点数
      innerRadius: 50, // 内半径
      outerRadius: 80, // 外半径
      rotation: 0, // 旋转角度
      borderColor: Colors.black, // 边框颜色
      fillColor: Colors.red, // 填充颜色
    );

    star.paint(canvas, Offset(size.width / 2, size.height / 2)); // 绘制中心位置
  }

  [@override](/user/override)
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

示例代码：绘制圆形

class CircleShapeWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Circle Shape Example'),
      ),
      body: Center(
        child: CustomPaint(
          size: Size(200, 200), // 设置画布大小
          painter: CirclePainter(), // 自定义画笔
        ),
      ),
    );
  }
}

// 创建自定义画笔
class CirclePainter extends CustomPainter {
  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    final circle = Circle(
      radius: 70, // 半径
      borderColor: Colors.blue, // 边框颜色
      fillColor: Colors.green, // 填充颜色
    );

    circle.paint(canvas, Offset(size.width / 2, size.height / 2)); // 绘制中心位置
  }

  [@override](/user/override)
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

示例代码：绘制矩形

class RectangleShapeWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rectangle Shape Example'),
      ),
      body: Center(
        child: CustomPaint(
          size: Size(200, 200), // 设置画布大小
          painter: RectanglePainter(), // 自定义画笔
        ),
      ),
    );
  }
}

// 创建自定义画笔
class RectanglePainter extends CustomPainter {
  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    final rectangle = Rectangle(
      width: 150, // 宽度
      height: 100, // 高度
      borderRadius: BorderRadius.circular(10), // 圆角半径
      borderColor: Colors.purple, // 边框颜色
      fillColor: Colors.orange, // 填充颜色
    );

    rectangle.paint(canvas, Offset(size.width / 2, size.height / 2)); // 绘制中心位置
  }

  [@override](/user/override)
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

示例代码：绘制多边形

class PolygonShapeWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Polygon Shape Example'),
      ),
      body: Center(
        child: CustomPaint(
          size: Size(200, 200), // 设置画布大小
          painter: PolygonPainter(), // 自定义画笔
        ),
      ),
    );
  }
}

// 创建自定义画笔
class PolygonPainter extends CustomPainter {
  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    final polygon = Polygon(
      sides: 6, // 边数
      radius: 80, // 外接圆半径
      rotation: pi / 2, // 旋转角度
      borderColor: Colors.brown, // 边框颜色
      fillColor: Colors.pink, // 填充颜色
    );

    polygon.paint(canvas, Offset(size.width / 2, size.height / 2)); // 绘制中心位置
  }

  [@override](/user/override)
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}