leonardocaldas / flutter-polygon-clipper Goto Github PK

View Code? Open in Web Editor NEW

95.0 1.0 32.0 2.21 MB

Flutter Custom Clipper using Polygon shapes

License: GNU General Public License v3.0

Dart 100.00%

flutter-polygon-clipper's Introduction

flutter_polygon

A Flutter plugin to create views using regular polygon shapes (e.g. Pentagons and Hexagons).

Based on the polygon_clipper package by leonardocaldas.

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_polygon: ^0.2.0

Usage

Clipping

Use the ClipPolygon widget to clip a child widget.

import 'package:flutter_polygon/flutter_polygon.dart';

ClipPolygon(  
 sides: 6, 
 borderRadius: 5.0,     // Defaults to 0.0 degrees
 rotate: 90.0,          // Defaults to 0.0 degrees
 boxShadows: [  
  PolygonBoxShadow(color: Colors.black, elevation: 1.0),
  PolygonBoxShadow(color: Colors.grey, elevation: 5.0)
 ],
 child: Container(color: Colors.black),
);

Borders

Use the PolygonBorder shape with your favorites widgets!

import 'package:flutter_polygon/flutter_polygon.dart';

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

Other widgets:

TextButton, ElevatedButton, ...
Container
Chip
...

Contributing

If you find an issue with this package, please open an issue on github.

If you wish to contribute to this project, I encourage you to open a pull request.

Credit

Based on the polygon_clipper package by leonardocaldas.

flutter-polygon-clipper's People

Contributors

Stargazers

Watchers

flutter-polygon-clipper's Issues

Border is flat for squares

For squares (maybe also for other quadrilaterals), the borders is flat rather than a curve/arc.

Border radius reduces the size of the polygon

When I add a borderRadius to a polygon, its size is reduced. I think it is a strange behavior since it should only smooth out the angles. As a quick fix, I have to add a Transform.scale widget.

Border in ClipPolygon

Can we have border in Clip Polygon widget??
just like we give regular container??

Transfer to Flutter Community GH Repo

Please follow instructions on this page:
https://github.com/fluttercommunity/transfer-guide

and the Flutter Community will help to look after unmaintained packages

This will help benefit You as the original developer and the many developers who rely on this package.

Thank you for your attention

Positioned ClipPolygon in Stack

Couldn't get ClipPolygon to work in stack as a FAB in CupertinoPageScaffold

How to control a width of polygon?

Hello developers?
I have a some crazy question. My widget structure is like that
Container -> ClipPolygon -> Container
I want to change width and height by using 2nd container. But I can't how to resize this polygon?

Extend OutlinedBorder for use in Chip with flutter 2.0

In flutter 2.0, a Chip requires a OutlinedBorder. For this plugin to keep working with the Chip (and potentially other) classes, the PolygonBorder class should extend OutlinedBorder.

I implemented and tested the change. I will create a pull-request later tomorrow.

The necessary changes are:

extend OutlinedBorder instead of ShapeBorder
use the OutlinedBorder side variable instead of the border variable that is used right now
implement copyWith:

  @override
  OutlinedBorder copyWith({BorderSide side}) {
    if (side == null) return this;
    return PolygonBorder(
      sides: sides,
      side: side,
      rotate: rotate,
      borderRadius: borderRadius,
    );
  }

Expose Paint param to control StrokeCap

I am using this library to draw a hexagonal button, and it's great!
One issue is that the stroke caps are breaking, and it looks a little janky (and my client has noticed...)
I've managed to mitigate it slightly by using the borderRadius but it's still visible:

See image:

I think that adding a controlled parameter to adjust the StrokeCap of the Paint object that the Border is drawn with would fix this?

But perhaps i'm just doing something wrong?
Here is the widget code:

import 'package:flutter/material.dart';
import 'package:polygon_clipper/polygon_border.dart';
import 'package:selfi/data/resources/colors.dart';

class PolygonButton extends StatelessWidget {
  PolygonButton({this.onPressedAction});

  final Function onPressedAction;

  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      onPressed: () {
        onPressedAction();
      },
      shape: PolygonBorder(
        sides: 6,
        rotate: 90.0,
        borderRadius: 8.0,
        border: BorderSide(
          color: BrandColors.colorAccent,
          width: 4.0,
        ),
      ),
      splashColor: BrandColors.colorAccent,
    );
  }
}

null-safety version

Can we have the null-safety version published on pub.dev?