{"id":13343909,"url":"https://github.com/robertodevs/zeplin-flutter-extended","last_synced_at":"2025-03-12T06:30:44.785Z","repository":{"id":41782150,"uuid":"194720762","full_name":"robertodevs/zeplin-flutter-extended","owner":"robertodevs","description":"This is about a Flutter Extension for Zeplin program, we can select layers, font Styles and color from our Zeplin Projects and convert them into DART code directly. Click on the layer and you will have all properties about Containers, Gradients, RichText, Shadows, etc.  ","archived":false,"fork":false,"pushed_at":"2023-01-05T18:44:10.000Z","size":1470,"stargazers_count":66,"open_issues_count":22,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-07-30T21:08:31.616Z","etag":null,"topics":["dart","fluuter","zeplin","zeplin-extension"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/robertodevs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":"https://www.buymeacoffee.com/SaNhE76x9"}},"created_at":"2019-07-01T18:06:07.000Z","updated_at":"2024-06-28T21:45:20.000Z","dependencies_parsed_at":"2023-02-04T10:46:13.245Z","dependency_job_id":null,"html_url":"https://github.com/robertodevs/zeplin-flutter-extended","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertodevs%2Fzeplin-flutter-extended","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertodevs%2Fzeplin-flutter-extended/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertodevs%2Fzeplin-flutter-extended/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertodevs%2Fzeplin-flutter-extended/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robertodevs","download_url":"https://codeload.github.com/robertodevs/zeplin-flutter-extended/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221274933,"owners_count":16789690,"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","fluuter","zeplin","zeplin-extension"],"created_at":"2024-07-29T19:32:05.280Z","updated_at":"2024-10-24T04:30:37.961Z","avatar_url":"https://github.com/robertodevs.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"img/flutterlogo.png\" alt=\"Flutter Logo\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.buymeacoffee.com/SaNhE76x9\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-blue.png\" alt=\"Buy Me A Coffee\" style=\"height: 30px !important;width: 150px !important;\" \u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Flutter Extended Zeplin Extension 💻\n\nThis is a new Flutter Extended version of the actual extension to help a lot of people who need more components than TextStyles and Colors and RichTexts. With this new one you have the opportunity to have more info about Widgets, for example, generate Container elements, BoxDecoration Widget with Shadows, Linear Gradients, Fills, Borders, Opacity and several components more. Coming soon RadialGradient and SweapGradient and also Components as buttons and others. \n\n## Getting started\n\nAdd the extension to your project from [extensions.zeplin.io](https://extensions.zeplin.io), then test the extension and give me your comments about possible improvements. I will try giving frequently support to this extension.\n\n## Output\n\n#### Sample colors output\n```\nconst Color black = const Color(0xff000000);\nconst Color white = const Color(0xffffffff);\nconst Color cloudyBlue = const Color(0xffbec4cd);\nconst Color black = const Color(0xff333333);\nconst Color blushPink = const Color(0xffff8993);\n\n```\n\n#### Sample text style output:\n```\nconst TextStyle title = const TextStyle(\n    fontFamily: 'Montserrat',\n    color: Color(0xff000000),\n    fontSize: 14,\n    fontWeight: FontWeight.w500,\n    fontStyle: FontStyle.normal, \n    );\nconst TextStyle PingFangSC—14pt = const TextStyle(\n    fontFamily: 'PingFangSC',\n    color: Color(0xff000000),\n    fontSize: 14,\n    fontWeight: FontWeight.w400,\n    fontStyle: FontStyle.normal,\n    );\n\n```\n#### Sample layer output - `(Text with Shadows)` \n\n```\nnew Text(\"Color\",\n    style: TextStyle(\n    fontFamily: 'Montserrat',\n    color: Color(0xfffefefe),\n    fontSize: 10,\n    fontWeight: FontWeight.w500,\n    fontStyle: FontStyle.normal,\n    \n    shadows: [BoxShadow(\n        color: Color(0x29646464),\n        offset: Offset(0,3),\n        blurRadius: 6,\n        spreadRadius: 0\n\n      )],\n    )\n)\n```\n\n#### Sample layer output - `(Text with multiple Styles)` \n\n```\nRichText(\n    text: new TextSpan(\n    children: [\n      new TextSpan(\n        text: \"EN | \",\n        style: TextStyle(\n        fontFamily: 'Segoe UI',\n        color: Color(0xfff4b326),\n        fontSize: 12,\n        fontWeight: FontWeight.w400,\n        fontStyle: FontStyle.normal,\n        )\n      ),\n      new TextSpan(\n        text: \"CH\",\n        style: TextStyle(\n        fontFamily: 'Segoe UI',\n        color: Color(0xff444242),\n        fontSize: 12,\n        fontWeight: FontWeight.w400,\n        fontStyle: FontStyle.normal,\n        )\n      ),\n    ]\n  )\n)\n```\n\n#### Sample layer output - `(Container with Borders and Shadows)` \n\n```\nnew Container(\n  width: 128,\n  height: 172,\n  decoration: new BoxDecoration(\n    color: Color(0xff1b1b1b),\n    border: Border.all(\n      color: Color(0xfff19528),\n      width: 1\n    ),\n\tboxShadow: [BoxShadow(\n        color: Color(0x29000000),\n        offset: Offset(0,3),\n        blurRadius: 6,\n        spreadRadius: 0\n\n    ) ],\n\n  )\n)\n```\n\n#### Sample layer output - `Container with Circular Borders` \n```\nnew Container(\n  width: 103,\n  height: 36,\n  decoration: new BoxDecoration(\n    color: Color(0xffd7d6d6),\n\tborderRadius: BorderRadius.circular(25),\n\tboxShadow: [\n      BoxShadow(\n        color: Color(0x29000000),\n        offset: Offset(0,3),\n        blurRadius: 6,\n        spreadRadius: 0\n\n    ) ],\n\n  )\n)\n```\n\n#### Sample layer output - `Container with Fill with Opacity` \n```\nnew Container(\n  width: 169,\n  height: 269,\n  decoration: new BoxDecoration(\n    color: Color(0xfffbd085).withOpacity(0.46)\n  )\n)\n```\n\n#### Sample layer output - `Container with LinearGradient` \n\n```\nnew Container(\n  width: 30.492919921875,\n  height: 30.4931640625,\n  decoration: new BoxDecoration(\n    gradient: LinearGradient(\n      colors: [\n        Color(0xfff8362d),\n        Color(0xff801c18),\n        Color(0xff7c1b17) ],\n    stops: [\n        0,\n        0.7395932078361511,\n        1\n    ]\n    )\n  )\n)\n```\n\n## Options\n\nThere are several features to modify in the future, first of them will be add more options to Gradients, Radial and Sweap Gradients. If this is extension is useful for you and you want to support me [buy me a coffe!](https://www.buymeacoffee.com/SaNhE76x9)\n\n\n## Developmentß\n\nThis extension is developed using [zem](https://github.com/zeplin/zem), Zeplin Extension Manager. zem is a command line tool that lets you quickly create, test and publish extensions.\n\nTo learn more about creating Zeplin extensions, [see documentation](https://github.com/zeplin/zeplin-extension-documentation).\nß\n","funding_links":["https://www.buymeacoffee.com/SaNhE76x9"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobertodevs%2Fzeplin-flutter-extended","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobertodevs%2Fzeplin-flutter-extended","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobertodevs%2Fzeplin-flutter-extended/lists"}