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

webelight_shapes 是一个 Flutter 插件，用于在 Flutter 应用中绘制自定义形状。通过这个插件，你可以轻松地创建和绘制各种复杂的形状，而无需手动编写复杂的绘图代码。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 webelight_shapes 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  webelight_shapes: ^latest_version

然后运行 flutter pub get 来安装插件。

基本用法

webelight_shapes 提供了多种预定义的形状，例如矩形、圆形、三角形等。你也可以通过组合这些形状来创建更复杂的图形。

1. 绘制矩形

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

class RectangleExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rectangle Example'),
      ),
      body: Center(
        child: WebelightShape(
          shape: RectangleShape(
            width: 200,
            height: 100,
            color: Colors.blue,
            borderColor: Colors.black,
            borderWidth: 2,
          ),
        ),
      ),
    );
  }
}

2. 绘制圆形

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

class CircleExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Circle Example'),
      ),
      body: Center(
        child: WebelightShape(
          shape: CircleShape(
            radius: 50,
            color: Colors.red,
            borderColor: Colors.black,
            borderWidth: 2,
          ),
        ),
      ),
    );
  }
}

3. 绘制三角形

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

class TriangleExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Triangle Example'),
      ),
      body: Center(
        child: WebelightShape(
          shape: TriangleShape(
            size: 100,
            color: Colors.green,
            borderColor: Colors.black,
            borderWidth: 2,
          ),
        ),
      ),
    );
  }
}

4. 自定义形状

你还可以通过组合多个形状来创建自定义形状。例如，创建一个由矩形和圆形组成的自定义形状：

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

class CustomShapeExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Shape Example'),
      ),
      body: Center(
        child: WebelightShape(
          shape: CombinedShape(
            shapes: [
              RectangleShape(
                width: 200,
                height: 100,
                color: Colors.blue,
              ),
              CircleShape(
                radius: 50,
                color: Colors.red,
                offset: Offset(100, 50),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

高级用法

webelight_shapes 还支持更多的自定义选项，例如渐变填充、阴影、旋转等。你可以通过设置这些属性来进一步定制你的形状。

渐变填充

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

class GradientFillExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gradient Fill Example'),
      ),
      body: Center(
        child: WebelightShape(
          shape: RectangleShape(
            width: 200,
            height: 100,
            gradient: LinearGradient(
              colors: [Colors.blue, Colors.green],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            borderColor: Colors.black,
            borderWidth: 2,
          ),
        ),
      ),
    );
  }
}

阴影

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

class ShadowExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shadow Example'),
      ),
      body: Center(
        child: WebelightShape(
          shape: CircleShape(
            radius: 50,
            color: Colors.red,
            shadow: BoxShadow(
              color: Colors.black.withOpacity(0.5),
              blurRadius: 10,
              offset: Offset(5, 5),
            ),
          ),
        ),
      ),
    );
  }
}

旋转

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

class RotationExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rotation Example'),
      ),
      body: Center(
        child: WebelightShape(
          shape: RectangleShape(
            width: 200,
            height: 100,
            color: Colors.blue,
            rotation: 45, // 旋转45度
          ),
        ),
      ),
    );
  }
}