{"id":17679418,"url":"https://github.com/florent37/flutter-shapeofview","last_synced_at":"2025-04-13T06:41:51.142Z","repository":{"id":56838910,"uuid":"199646400","full_name":"florent37/Flutter-ShapeOfView","owner":"florent37","description":"Give a custom shape to any flutter widget, Material Design 2 ready","archived":false,"fork":false,"pushed_at":"2019-12-31T14:24:46.000Z","size":362,"stargazers_count":215,"open_issues_count":2,"forks_count":27,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-24T11:45:17.707Z","etag":null,"topics":["arc","behavior","circle","clip","dart","diagonal","elevation","flutter","material","shape","star"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/shape_of_view","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/florent37.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-30T12:22:05.000Z","updated_at":"2025-03-05T00:37:37.000Z","dependencies_parsed_at":"2022-08-28T23:22:01.232Z","dependency_job_id":null,"html_url":"https://github.com/florent37/Flutter-ShapeOfView","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florent37%2FFlutter-ShapeOfView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florent37%2FFlutter-ShapeOfView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florent37%2FFlutter-ShapeOfView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florent37%2FFlutter-ShapeOfView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/florent37","download_url":"https://codeload.github.com/florent37/Flutter-ShapeOfView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248675434,"owners_count":21143763,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["arc","behavior","circle","clip","dart","diagonal","elevation","flutter","material","shape","star"],"created_at":"2024-10-24T08:41:53.518Z","updated_at":"2025-04-13T06:41:51.123Z","avatar_url":"https://github.com/florent37.png","language":"Dart","readme":"# flutter_shape_of_view\n\nGive a custom shape to any flutter widget, Material Design 2 ready\n\n# Download\n\nhttps://pub.dev/packages/shape_of_view\n\n```\ndependencies:\n  shape_of_view: \n```\n\nGive a custom shape to any android view\nUseful for Material Design 2\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/shrine.gif)](https://www.github.com/florent37/ShapeOfView)\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/sample_diagonal.gif)](https://www.github.com/florent37/ShapeOfView)\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/sample_arc.gif)](https://www.github.com/florent37/ShapeOfView)\n\n```dart\nShapeOfView(\n  shape: YOUR_SHAPE,\n  elevation: 4,\n  height: 300, //height \u0026 width are optional\n  child: ...\n),\n```\n\n# Use implemented shapes\n\nShapeOfView came with pre-created shapes :\n\n## Circle\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/circle.png)](https://www.github.com/florent37/ShapeOfView)\n\n```dart\nShapeOfView(\n  shape: CircleShape(\n    borderColor: Colors.white, //optional\n    borderWidth: 2, //optional\n  ),\n  child: ...\n```\n\n## RoundRect\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/roundrect.png)](https://www.github.com/florent37/ShapeOfView)\n\n```dart\nShapeOfView(\n  shape: RoundRectShape(\n     borderRadius: BorderRadius.circular(12),\n     borderColor: Colors.white, //optional\n     borderWidth: 2, //optional\n  ),\n  child: ...\n```\n\n## ClipCorner\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/cut_corner.png)](https://www.github.com/florent37/ShapeOfView)\n\n```dart\nShapeOfView(\n  shape: CutCornerShape(\n     borderRadius: BorderRadius.circular(12);\n  ),\n  child: ...\n```\n\n## Arc\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/arc.png)](https://www.github.com/florent37/ShapeOfView)\n\n```dart\nShapeOfView(\n  shape: ArcShape(\n    direction: ArcDirection.Outside,\n    height: 20,\n    position: ArcPosition.Bottom\n  ),\n  child: ...\n)\n```\n\n## Diagonal\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/diagonal.png)](https://www.github.com/florent37/ShapeOfView)\n\n\n```dart\nShapeOfView(\n  elevation: 4,\n  height: 300,\n  shape: DiagonalShape(\n    position: DiagonalPosition.Bottom,\n    direction: DiagonalDirection.Right,\n    angle: DiagonalAngle.deg(angle: 10)\n  ),\n  child: ...\n)\n```\n\n## Triangle\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/triangle.png)](https://www.github.com/florent37/ShapeOfView)\n\n```dart\nShapeOfView(\n  shape: TriangleShape(\n    percentBottom: 0.5,\n    percentLeft: 0,\n    percentRight: 0\n  ),\n  child: ...,\n)\n```\n\n## Bubble\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/bubble.png)](https://www.github.com/florent37/ShapeOfView)\n\n```dart\nShapeOfView(\n  shape: BubbleShape(\n    position: BubblePosition.Bottom,\n    arrowPositionPercent: 0.5,\n    borderRadius: 20,\n    arrowHeight: 10,\n    arrowWidth: 10\n  ),\n  child: ...,\n)\n```\n\n## Star\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/star_5_pointed.png)](https://www.github.com/florent37/ShapeOfView)\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/star_11_pointed.png)](https://www.github.com/florent37/ShapeOfView)\n\n```dart\nShapeOfView(\n  shape: StarShape(\n    noOfPoints: 5\n  ),\n  child: ...,\n)\n```\n\n## Polygon\n\n[![screen](https://raw.githubusercontent.com/florent37/ShapeOfView/master/medias/polygon.png)](https://www.github.com/florent37/ShapeOfView)\n\n```dart\nShapeOfView(\n  shape: PolygonShape(\n    numberOfSides: 9\n  ),\n  child: ...,\n)\n```\n\n# Use a custom Shape\n\n```dart\nShapeOfView(\n  shape: CustomShape(\n    builder: (rect) =\u003e Path()\n        ..moveTo(0, 0)\n        ..close()\n  ),\n  child: ...,\n)\n```\n\nor extend Shape\n\n```dart\nclass MyShape extends Shape {\n\n  @override\n  Path build({Rect rect, double scale}) {\n    return Path()\n       ..moveTo(0, 0)\n       ..close();\n  }\n\n}\n```\n\nthen \n\n```dart\nShapeOfView(\n  shape: MyShape(),\n  child: ...,\n)\n```\n\n## Getting Started with Flutter\n\nFor help getting started with Flutter, view our \n[online documentation](https://flutter.dev/docs), which offers tutorials, \nsamples, guidance on mobile development, and a full API reference.\n\n# License\n\n    Copyright 2019 florent37, Inc.\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflorent37%2Fflutter-shapeofview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflorent37%2Fflutter-shapeofview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflorent37%2Fflutter-shapeofview/lists"}