Flutter多边形裁剪插件polygon_clipper的使用

Polygon Clipper介绍

一个用于创建多边形形状视图（例如五边形和六边形）的Flutter插件。

安装polygon_clipper

在项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  polygon_clipper: ^1.0.2

然后运行以下命令以获取依赖项：

flutter pub get

使用

使用ClipPolygon小部件

import 'package:polygon_clipper/polygon_clipper.dart'; // 导入插件

ClipPolygon(
  sides: 6, // 设置多边形的边数
  borderRadius: 5.0, // 设置圆角半径，默认为0.0度
  rotate: 90.0, // 设置旋转角度，默认为0.0度
  boxShadows: [ // 添加阴影效果
    PolygonBoxShadow(color: Colors.black, elevation: 1.0),
    PolygonBoxShadow(color: Colors.grey, elevation: 5.0)
  ],
  child: Container(color: Colors.black), // 设置内部填充颜色
);

使用PolygonBorder形状

import 'package:polygon_clipper/polygon_border.dart'; // 导入插件

FloatingActionButton(
  shape: PolygonBorder( // 设置按钮形状为多边形
    sides: 5,
    borderRadius: 5.0, // 设置圆角半径，默认为0.0度
    rotate: 90.0, // 设置旋转角度，默认为0.0度
    border: BorderSide.none, // 设置边框样式，默认无边框
  ),
  onPressed: runAction, // 点击事件
  child: Icon(Icons.star), // 图标
),

参数说明

ClipPolygon 参数

PolygonBoxShadow 参数

PolygonBorder 参数

示例代码

以下是完整的示例代码，展示了如何在Flutter中使用polygon_clipper插件。

import 'package:flutter/material.dart';
import 'package:polygon_clipper/polygon_border.dart';
import 'package:polygon_clipper/polygon_clipper.dart';

void main() => runApp(ExampleApp());

class ExampleApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () => {},
          shape: PolygonBorder(sides: 5), // 设置按钮为五边形
          child: Icon(Icons.star),
        ),

        bottomNavigationBar: BottomAppBar(
          shape: AutomaticNotchedShape(
            RoundedRectangleBorder(),
            PolygonBorder(sides: 5), // 设置底部导航栏为五边形
          ),
          color: Colors.blue.shade100,
          notchMargin: 6.0,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              FlatButton(child: Text("Action 1"), onPressed: () => {},),
              FlatButton(child: Text("Action 2"), onPressed: () => {},),
            ],
          ),
        ),

        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

        body: Container(
          color: Colors.white,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              ClipPolygon(
                sides: 6, // 设置多边形为六边形
                borderRadius: 5.0, // 设置圆角半径
                rotate: 90.0, // 设置旋转角度
                boxShadows: [
                  PolygonBoxShadow(color: Colors.black, elevation: 5.0), // 添加阴影效果
                ],
                child: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [
                        Colors.blue[200],
                        Colors.blue[800],
                      ],
                    ),
                  ),
                  child: Center(
                    child: Icon(
                      Icons.add_a_photo,
                      color: Colors.white,
                      size: 150.0,
                    ),
                  ),
                ),
              ),

              SizedBox(height: 32.0,),

              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Row(
                  children: <Widget>[
                    Container(
                      padding: EdgeInsets.all(18.0),
                      margin: EdgeInsets.only(right: 16.0),
                      decoration: ShapeDecoration(
                        shape: PolygonBorder(
                          sides: 7, // 设置七边形
                          borderRadius: 8.0, // 设置圆角半径
                          border: BorderSide(color: Colors.blue.shade800, width: 3), // 设置边框样式
                        ),
                      ),
                      child: Text('7'),
                    ),
                    Text('This decoration has seven sides.') // 显示文字
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}