polygon_clipper 1.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 89

Polygon Clipper #

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

pub package

Example1 Example2 Example3

Installation #

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

dependencies:
  polygon_clipper: ^1.0.2

Usage #

Using ClipPolygon widget

import 'package:polygon_clipper/polygon_clipper.dart';  // Import package for ClipPolygon

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

Using PolygonBorder shape

import 'package:polygon_clipper/polygon_border.dart'; // Import package for PolygonBorder

FloatingActionButton(
  shape: PolygonBorder(
    sides: 5,
    borderRadius: 5.0, // Default 0.0 degrees
    rotate: 90.0, // Default 0.0 degrees
    border: BorderSide.none, // Default BorderSide.none
  ),
  onPressed: runAction,
  child: Icon(Icons.star),
),

Parameters #

ClipPolygon

| Param | Type | Description | |---|---|---|
| sides | int | The number of sides to draw the polygon | borderRadius | double | The length of the border radius in degrees. | rotate | double | The initial polygon rotation in degrees. | child | Widget | The widget that will be rendered inside the polygon. | boxShadows | PolygonBoxShadow[] |A list of box shadows.

PolygonBoxShadow

| Param | Type | Description | |---|---|---|
| color | Color | The color of the box shadow. | elevation | double | The distance of the shadow.

PolygonBorder

| Param | Type | Description | |---|---|---|
| sides | int | The number of sides to draw the polygon | borderRadius | double | The length of the border radius in degrees. | rotate | double | The initial polygon rotation in degrees. | border | BorderSide | The style of the border (when PolygonBorder is used as a decoration in Container, etc.)

Contributing #

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

CHANGELOG #

v1.0.0 #

First release with:

  • Ability to create polygon views
  • Ability to round the corners
  • Ability to add a list of shadows

v1.0.1 #

  • Upgrading to Dart 2

v1.0.2 #

  • Added PolygonBorder shape for use in FABs, decorations, etc.

example/lib/main.dart

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
  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(
                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,
                        textDirection: TextDirection.ltr,
                      ),
                    )
                ),
                boxShadows: [
                  PolygonBoxShadow(color: Colors.black, elevation: 5.0),
                ],
                sides: 6,
                borderRadius: 5.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.')
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  polygon_clipper: ^1.0.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:polygon_clipper/polygon_clipper.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
90
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
72
Overall:
Weighted score of the above. [more]
89
Learn more about scoring.

We analyzed this package on Jul 7, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

because of import path [polygon_clipper] that is in a package requiring null.

Health suggestions

Format lib/polygon_border.dart.

Run flutter format to format lib/polygon_border.dart.

Maintenance suggestions

Package is getting outdated. (-28.22 points)

The package was last published 66 weeks ago.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8