Flutter多边形处理插件flutter_polygon的使用

flutter_polygon 是一个Flutter插件，用于创建正多边形形状（如五边形和六边形）视图。它基于 polygon_clipper 包开发。

安装

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

dependencies:
  flutter_polygon: ^0.2.0

然后运行 flutter pub get 来安装依赖。

使用

Clipping

使用 ClipPolygon 小部件裁剪子小部件。

import 'package:flutter_polygon/flutter_polygon.dart';

ClipPolygon(
  sides: 6, // 边的数量，默认为3
  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),
);

Borders

使用 PolygonBorder 形状与你最喜欢的小部件一起使用！

import 'package:flutter_polygon/flutter_polygon.dart';

FloatingActionButton(
  shape: PolygonBorder(
    sides: 6,
    borderRadius: 5.0, // 默认为0.0度
    rotate: 30.0, // 默认为0.0度
    border: BorderSide(color: Colors.red, width: 2.0), // 默认为BorderSide.none
  ),
  onPressed: () {},
  child: Icon(Icons.star),
),

其他可以使用的部件包括：

• TextButton, ElevatedButton, …
• Container
• Chip
• …

示例Demo

下面是一个完整的示例代码，展示了如何使用 flutter_polygon 插件来创建不同类型的多边形部件。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_polygon/flutter_polygon.dart';

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

const nbs = <int>[3, 4, 5, 6, 7, 8, 9, 10];
const rotates = <double>[0, 30, 60, 90, 120, 150, 180];
const colors = <Color>[
  Colors.black,
  Colors.red,
  Colors.orange,
  Colors.yellow,
  Colors.green,
  Colors.blue,
  Colors.indigo,
  Colors.purple,
];

class ExampleApp extends StatefulWidget {
  @override
  _ExampleAppState createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  int nb = 6;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        extendBody: true,
        appBar: AppBar(
          title: Text('Flutter Polygon'),
          backgroundColor: Colors.blue[900],
          systemOverlayStyle: SystemUiOverlayStyle.light,
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          shape: PolygonBorder(sides: nb),
          child: Icon(Icons.star),
        ),
        bottomNavigationBar: BottomAppBar(
          shape: AutomaticNotchedShape(
            RoundedRectangleBorder(),
            PolygonBorder(sides: nb),
          ),
          color: Colors.orange,
          notchMargin: 6.0,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.code),
                onPressed: () {},
              ),
              IconButton(
                  icon: Icon(Icons.save),
                  onPressed: () {}
              ),
            ],
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        body: Container(
          child: SingleChildScrollView(
            padding: const EdgeInsets.only(bottom: 96.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                const SizedBox(height: 8.0,),
                Text(
                  'Chips',
                  style: Theme.of(context).textTheme.headline6
                ),
                _showCase(nbs.map(_chip)),
                const SizedBox(height: 8.0,),
                Text(
                    'Buttons',
                    style: Theme.of(context).textTheme.headline6
                ),
                _showCase(nbs.map(_button)),
                const SizedBox(height: 8.0,),
                Text(
                    'Containers',
                    style: Theme.of(context).textTheme.headline6
                ),
                _showCase(nbs.map(_container)),
                _showCase(nbs.map((nb) => _container(nb, width: 2, rotate: 15.0))),
                _showCase(nbs.map((nb) => _container(nb, width: 3, rotate: 30.0))),
                const SizedBox(height: 8.0,),
                Text(
                    'Clipped Image',
                    style: Theme.of(context).textTheme.headline6
                ),
                const SizedBox(height: 8.0,),
                _image(nb),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _showCase(Iterable<Widget> widgets) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
      child: Row(
        children: widgets.toList(),
      ),
    );
  }

  Widget _image(int sides) {
    return ClipPolygon(
      child: Image.network("https://cdn.pixabay.com/photo/2018/01/05/00/20/test-image-3061864_960_720.png"),
      boxShadows: [
        PolygonBoxShadow(color: Colors.black, elevation: 2.0),
        PolygonBoxShadow(color: Colors.yellow, elevation: 4.0),
        PolygonBoxShadow(color: Colors.red, elevation: 6.0),
      ],
      sides: sides,
      borderRadius: 10,
    );
  }

  Widget _button(int sides, {BorderSide side = BorderSide.none}) {
    return TextButton(
      style: ButtonStyle(
        shape: MaterialStateProperty.all<PolygonBorder>(
            PolygonBorder(sides: sides, side: BorderSide())
        ),
      ),
      onPressed: () { },
      child: Text('$sides'),
    );
  }

  Widget _chip(int sides, {BorderSide side = BorderSide.none}) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 4.0),
      child: ChoiceChip(
        shape: PolygonBorder(
          sides: sides,
          side: side,
        ),
        label: Text('$sides'),
        selected: nb == sides,
        onSelected: (s) {
          setState(() {
            this.nb = sides;
          });
        },
      ),
    );
  }

  Widget _container(int sides, {double width = 1.0, double rotate = 0.0}) {
    var index = (sides-3);
    return Container(
      padding: EdgeInsets.all(18.0),
      margin: EdgeInsets.only(right: 16.0),
      decoration: ShapeDecoration(
        shape: PolygonBorder(
          sides: sides,
          rotate: rotate,
          side: BorderSide(
            color: colors[index % colors.length],
            width: width,
          ),
        ),
      ),
      child: Text('$sides'),
    );
  }
}

这个示例代码创建了一个包含多种多边形部件的应用程序，包括按钮、容器、标签和裁剪图像等，展示了 flutter_polygon 的强大功能。

贡献

如果你发现此包存在问题，请在 GitHub 上提交问题。

如果你想为此项目做贡献，欢迎提交拉取请求。

致谢

此包基于 polygon_clipper 包开发，感谢 leonardocaldas 的贡献。