{"id":27236612,"url":"https://github.com/ajilo297/flutter-dotted-border","last_synced_at":"2025-04-10T17:45:32.685Z","repository":{"id":44763495,"uuid":"187677222","full_name":"ajilo297/Flutter-Dotted-Border","owner":"ajilo297","description":"A Flutter package to easily add dashed borders around widgets","archived":false,"fork":false,"pushed_at":"2024-06-19T18:05:29.000Z","size":467,"stargazers_count":280,"open_issues_count":15,"forks_count":60,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-06-21T06:36:45.994Z","etag":null,"topics":["dart","flutter","widget"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/dotted_border","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ajilo297.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"ajiloommen","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null}},"created_at":"2019-05-20T16:31:14.000Z","updated_at":"2024-06-19T17:54:56.000Z","dependencies_parsed_at":"2022-08-31T15:01:07.014Z","dependency_job_id":"a13f839e-13ae-423f-9eed-9fd57217fb0a","html_url":"https://github.com/ajilo297/Flutter-Dotted-Border","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajilo297%2FFlutter-Dotted-Border","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajilo297%2FFlutter-Dotted-Border/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajilo297%2FFlutter-Dotted-Border/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajilo297%2FFlutter-Dotted-Border/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ajilo297","download_url":"https://codeload.github.com/ajilo297/Flutter-Dotted-Border/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248262339,"owners_count":21074291,"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":["dart","flutter","widget"],"created_at":"2025-04-10T17:45:31.963Z","updated_at":"2025-04-10T17:45:32.672Z","avatar_url":"https://github.com/ajilo297.png","language":"Dart","funding_links":["https://ko-fi.com/ajiloommen"],"categories":[],"sub_categories":[],"readme":"# Dotted Border\n\n[![pub package](https://img.shields.io/badge/pub-2.1.0-blue.svg)](https://pub.dev/packages/dotted_border)\n\nA flutter package to easily add dotted borders around widgets.\n\n### Installing\n\nTo use this package, add `dotted_border` as a dependency in your `pubspec.yaml` file.\n\n### Usage\n\nWrap `DottedBorder` widget around the child widget\n\n```dart\nDottedBorder(\n    color: Colors.black,\n    strokeWidth: 1,\n    child: FlutterLogo(size: 148),\n)\n```\n\n### BorderTypes\n\nThis package supports the following border types at the moment\n * RectBorder\n * RRectBorder\n * CircleBorder\n * OvalBorder\n\n#### Example\n\n```dart\nreturn DottedBorder(\n  borderType: BorderType.RRect,\n  radius: Radius.circular(12),\n  padding: EdgeInsets.all(6),\n  child: ClipRRect(\n    borderRadius: BorderRadius.all(Radius.circular(12)),\n    child: Container(\n      height: 200,\n      width: 120,\n      color: Colors.amber,\n    ),\n  ),\n);\n```\n\n### Dash Pattern\n\nNow you can also specify the Dash Sequence by passing in an Array of Doubles\n\n#### Example\n```dart\nDottedBorder(\n    dashPattern: [6, 3, 2, 3], \n    child: ...\n);\n```\n\nThe above code block will render a dashed border with the following pattern:\n\n* 6 pixel wide dash\n* 3 pixel wide space\n* 2 pixel wide dash\n* 3 pixel wide space\n\n### Custom Path Border\n\nYou can also specify any path as the `customPath` property when initializing the DottedBorderWidget, and it will draw it for you using the provided dash pattern.\n\n#### Example\n\n```dart\nPath customPath = Path()\n  ..moveTo(20, 20)\n  ..lineTo(50, 100)\n  ..lineTo(20, 200)\n  ..lineTo(100, 100)\n  ..lineTo(20, 20);\n\nreturn DottedBorder(\n  customPath: (size) =\u003e customPath, // PathBuilder\n  color: Colors.indigo,\n  dashPattern: [8, 4],\n  strokeWidth: 2,\n  child: Container(\n    height: 220,\n    width: 120,\n    color: Colors.green.withAlpha(20),\n  ),\n);\n```\n\n### Stroke Cap\n\n\u003e PR submitted by [Tarekk Mohamed Abdalla](https://github.com/TarekkMA)\n\nYou can set a [`StrokeCap`](https://api.flutter.dev/flutter/dart-ui/StrokeCap-class.html) to the border line endings. It can take three values\n\n* StrokeCap.Round\n* StrokeCap.Square\n* StrokeCap.Butt\n\n#### Output\n\n![Flutter dotted border image](assets/image.png?raw=true \"Flutter Dotted Border Image\" )\n\n### Credits\n\n* [Flutter Path Drawing](https://github.com/dnfield/flutter_path_drawing) - [Dan Field](https://github.com/dnfield)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajilo297%2Fflutter-dotted-border","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fajilo297%2Fflutter-dotted-border","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajilo297%2Fflutter-dotted-border/lists"}