shape_of_view 1.0.2

Flutter Android iOS web

Give a custom shape to any flutter widget, Material Design 2 ready

flutter_shape_of_view #

Give a custom shape to any flutter widget, Material Design 2 ready

Download #

https://pub.dev/packages/shape_of_view

dependencies:
  shape_of_view: 

Give a custom shape to any android view Useful for Material Design 2

screen screen screen

ShapeOfView(
  shape: YOUR_SHAPE,
  elevation: 4,
  height: 300, //height & width are optional
  child: ...
),

Use implemented shapes #

ShapeOfView came with pre-created shapes :

Circle #

screen

ShapeOfView(
  shape: CircleShape(
    borderColor: Colors.white, //optional
    borderWidth: 2, //optional
  ),
  child: ...

RoundRect #

screen

ShapeOfView(
  shape: RoundRectShape(
     borderRadius: BorderRadius.circular(12),
     borderColor: Colors.white, //optional
     borderWidth: 2, //optional
  ),
  child: ...

ClipCorner #

screen

ShapeOfView(
  shape: CutCornerShape(
     borderRadius: BorderRadius.circular(12);
  ),
  child: ...

Arc #

screen

ShapeOfView(
  shape: ArcShape(
    direction: ArcDirection.Outside,
    height: 20,
    position: ArcPosition.Bottom
  ),
  child: ...
)

Diagonal #

screen

ShapeOfView(
  elevation: 4,
  height: 300,
  shape: DiagonalShape(
    position: DiagonalPosition.Bottom,
    direction: DiagonalDirection.Right,
    angle: DiagonalAngle.deg(angle: 10)
  ),
  child: ...
)

Triangle #

screen

ShapeOfView(
  shape: TriangleShape(
    percentBottom: 0.5,
    percentLeft: 0,
    percentRight: 0
  ),
  child: ...,
)

Bubble #

screen

ShapeOfView(
  shape: BubbleShape(
    position: BubblePosition.Bottom,
    arrowPositionPercent: 0.5,
    borderRadius: 20,
    arrowHeight: 10,
    arrowWidth: 10
  ),
  child: ...,
)

Star #

screen screen

ShapeOfView(
  shape: StarShape(
    noOfPoints: 5
  ),
  child: ...,
)

Polygon #

screen

ShapeOfView(
  shape: PolygonShape(
    numberOfSides: 9
  ),
  child: ...,
)

Use a custom Shape #

ShapeOfView(
  shape: CustomShape(
    builder: (rect) => Path()
        ..moveTo(0, 0)
        ..close()
  ),
  child: ...,
)

or extend Shape

class MyShape extends Shape {

  @override
  Path build({Rect rect, double scale}) {
    return Path()
       ..moveTo(0, 0)
       ..close();
  }

}

then

ShapeOfView(
  shape: MyShape(),
  child: ...,
)

Getting Started with Flutter #

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

License #

Copyright 2019 florent37, Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
48
likes
100
pub points
89%
popularity

Give a custom shape to any flutter widget, Material Design 2 ready

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

champigny.florent@gmail.com

License

Apache 2.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on shape_of_view