{"id":13550187,"url":"https://github.com/CRED-CLUB/neopop-flutter","last_synced_at":"2025-04-02T23:32:04.792Z","repository":{"id":42227695,"uuid":"498672831","full_name":"CRED-CLUB/neopop-flutter","owner":"CRED-CLUB","description":"NeoPOP is CRED's inbuilt library for using NeoPOP components in your app","archived":false,"fork":false,"pushed_at":"2024-03-31T09:46:10.000Z","size":636,"stargazers_count":436,"open_issues_count":7,"forks_count":51,"subscribers_count":9,"default_branch":"main","last_synced_at":"2024-10-18T06:44:34.427Z","etag":null,"topics":["cred","dart","flutter","flutter-package","flutter-ui","framework","neopop","package","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/neopop","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/CRED-CLUB.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-01T09:31:47.000Z","updated_at":"2024-10-17T20:55:52.000Z","dependencies_parsed_at":"2024-06-19T01:25:49.588Z","dependency_job_id":"c37727d7-c9a7-4b2e-a0a7-fcca74ba6eb1","html_url":"https://github.com/CRED-CLUB/neopop-flutter","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/CRED-CLUB%2Fneopop-flutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CRED-CLUB%2Fneopop-flutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CRED-CLUB%2Fneopop-flutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CRED-CLUB%2Fneopop-flutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CRED-CLUB","download_url":"https://codeload.github.com/CRED-CLUB/neopop-flutter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222893048,"owners_count":17054035,"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":["cred","dart","flutter","flutter-package","flutter-ui","framework","neopop","package","ui","ui-components"],"created_at":"2024-08-01T12:01:29.927Z","updated_at":"2024-11-03T19:31:39.802Z","avatar_url":"https://github.com/CRED-CLUB.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"# NeoPOP\nNeoPOP is CRED's inbuilt library for using NeoPOP components in your app.\n\n### What really is NeoPOP? \n[NeoPOP](https://cred.club/neopop) was created with one simple goal; to create the next generation of a beautiful, affirmative design system. NeoPOP stays true to everything that design at CRED stands for.\n\nNeoPOP is built for [Android](https://github.com/CRED-CLUB/neopop-android), [iOS](https://github.com/CRED-CLUB/neopop-ios), [Flutter](https://pub.dev/packages/neopop) and [Web](https://github.com/CRED-CLUB/neopop-web)\n\n![NeoPOP Banner](https://i.imgur.com/1gN3wzy.jpg \"NeoPOP Banner\")\n\n## Installation\n\nAdd `neopop` as a [dependency in your pubspec.yaml file](https://flutter.dev/using-packages/).\n\n```yaml  \ndependencies:\n    neopop: ^1.0.2\n```  \n\n# NeoPopButton\n\n![Configs](https://user-images.githubusercontent.com/9965653/173539706-fa521743-b214-4372-87dd-799d9b8b6c70.png)\n`NeoPopButton` render 5 surfaces, top, left, right, bottom and center.\n`NeoPopButton` widget gives you mutliple configs that you can use for your widget.\n\n## Elevated\n\n![Elevated](https://user-images.githubusercontent.com/9965653/172596228-1bcb92d0-d293-4290-ac38-b9a693a2fab2.png \"Elevated Button\")\n![elevated](https://user-images.githubusercontent.com/9965653/175874614-ab316981-29d1-4ed5-a90b-6fe840ac9700.gif)\n\n\n``` dart\nNeoPopButton(\n    color: Colors.white,\n    onTapUp: () =\u003e HapticFeedback.vibrate(),\n    onTapDown: () =\u003e HapticFeedback.vibrate(),\n    child: Padding(\n        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),\n        child: Row(\n            mainAxisAlignment: MainAxisAlignment.center,\n            children: [\n                Text(\"Pay now\"),\n            ],\n        ),\n    ),\n),\n```\n\n## Flat\n\n![Flat](https://user-images.githubusercontent.com/9965653/172597180-63b4c386-9b7c-4211-a64c-a79892232481.png \"Flat Button\")\n![flatButton](https://user-images.githubusercontent.com/9965653/175874619-b5edb3e8-6c18-4f15-8e60-ef44cb004c94.gif)\n\nBy specifying the `buttonPosition` as `Position.center`, NeoPOP will compute right and bottom surface's color according to `color`.\nTop and left surface's color is computed w.r.t `parentColor` and `grandparentColor`\n\n``` dart\nNeoPopButton(\n    color: Colors.white,\n    onTapUp: () =\u003e HapticFeedback.vibrate(),\n    onTapDown: () =\u003e HapticFeedback.vibrate(),\n    parentColor: Colors.transparent,\n    buttonPosition: Position.center,\n    child: Padding(\n        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),\n        child: Row(\n            mainAxisAlignment: MainAxisAlignment.center,\n            children: const [\n                Text(\"Pay Now\"),\n            ],\n        ),\n    ),\n),\n```\n\n## Shimmer\n\n```dart\nconst NeoPopShimmer(\n    shimmerColor: Colors.yellow,\n    child: Padding(\n        padding: const EdgeInsets.symmetric(horizontal: 100, vertical: 15),\n        child: Text(\"Hello\"),\n    ),\n),\n ```  \n## Flat Strokes\n\n![Flat Strokes](https://user-images.githubusercontent.com/9965653/172597728-5830cc72-1d2a-4d52-8089-55fb61449996.png \"Flat Strokes\")\n![flatStroked](https://user-images.githubusercontent.com/9965653/175874617-a90ef305-d460-4887-927c-0ddecfe45975.gif)\n\nTo add border on a flat button, add `border`\n\n```dart\nNeoPopButton(\n    color: const Color.fromRGBO(0, 0, 0, 1),\n    buttonPosition: Position.center,\n    onTapUp: () {},\n    border: const Border.fromBorderSide(\n        BorderSide(color: kBorderColorWhite, width: kButtonBorderWidth),\n    ),\n    child: Padding(\n        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),\n        child: Row(\n            mainAxisAlignment: MainAxisAlignment.center,\n            children: const [\n                Text(\"Pay Now\", style: TextStyle(color: Colors.white)),\n            ],\n        ),\n    ),\n),\n```\n\n## Elevated Strokes\n\n![Elevated Strokes](https://user-images.githubusercontent.com/9965653/172597473-630c86b9-574d-4f65-afeb-171c5ec147cc.png \"Elevated Strokes\")\n![elevatedStroked](https://user-images.githubusercontent.com/9965653/175874610-3e92e9e9-cbed-4906-a90b-423c615e465d.gif)\n\n```dart\nNeoPopButton(\n    color: kSecondaryButtonLightColor,\n    bottomShadowColor: ColorUtils.getVerticalShadow(kBorderColorGreen).toColor(),\n    rightShadowColor: ColorUtils.getHorizontalShadow(kBorderColorGreen).toColor(),\n    animationDuration: kButtonAnimationDuration,\n    depth: kButtonDepth,\n    onTapUp: () {},\n    border: Border.all(\n        color: kBorderColorGreen,\n        width: kButtonBorderWidth,\n    ),\n    child: Padding(\n        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),\n        child: Row(\n            mainAxisAlignment: MainAxisAlignment.center,\n            children: const [\n                Text(\"Scan \u0026 Pay\", style: TextStyle(color: Colors.white)),\n            ],\n        ),\n    ),\n),\n```  \n\n## Adjacent Buttons\n\n![Adjacent Buttons](https://user-images.githubusercontent.com/58745044/176997736-e93eae47-caa7-4905-a678-5e6eba0ac70f.jpg \"Adjacent Buttons\")\n\n### Vertically Aligned Buttons\n\n```dart\nColumn(\n    mainAxisSize: MainAxisSize.min,\n    children: [\n        NeoPopButton(\n        color: kSecondaryButtonLightColor,\n        bottomShadowColor: kShadowColorDarkGreen,\n        rightShadowColor: kShadowColorGreen,\n        buttonPosition: Position.fullBottom,\n        onTapUp: () {},\n        border: Border.all(\n            color: kBorderColorGreen, width: kButtonBorderWidth,\n        ),\n        child:  const Padding(\n                    padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 15.0),\n                    child: Text(\n                    \"Button\",\n                    style: TextStyle(color: Colors.white),\n                ),\n            ),\n        ),\n        NeoPopButton(\n            color: kPrimaryButtonColor,\n            buttonPosition: Position.fullBottom,\n            onTapUp: () {},\n            child:  const Padding(\n                padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 15.0),\n                child: Text(\"Button\"),\n            ),\n        ),\n    ],\n),\n```\n\n### Horizontally Aligned Buttons\n\n```dart\nRow(\n    mainAxisSize: MainAxisSize.min,\n    children: [\n        Expanded(\n        child: NeoPopButton(\n            color: kPrimaryButtonColor,\n            buttonPosition: Position.fullBottom,\n            depth: kButtonDepth,\n            onTapUp: () {},\n            child: const Center(\n            child:  Padding(\n                    padding: EdgeInsets.symmetric(\n                        horizontal: 8.0, vertical: 15.0),\n                    child: Text(\"Button\"),\n                    ),\n                ),\n            ),\n        ),\n        Expanded(\n            child: NeoPopButton(\n                color: kSecondaryButtonLightColor,\n                bottomShadowColor: kShadowColorDarkGreen,\n                rightShadowColor: kShadowColorGreen,\n                buttonPosition: Position.fullBottom,\n                depth: kButtonDepth,\n                onTapUp: () {},\n                border: Border.all(\n                    color: kBorderColorGreen, width: kButtonBorderWidth,\n                ),\n                child: const Center(\n                child: Padding(\n                    padding: EdgeInsets.symmetric( horizontal: 8.0, vertical: 15.0),\n                    child: Text(\n                            \"Button\",\n                            style: TextStyle(color: Colors.white),\n                        ),\n                    ),\n                ),\n            ),\n        ),\n    ],\n),\n```\n\n## NeoPopButton Attributes\n\n| Attribute            | Type             | Description                                                                           |\n| :------------------- | :--------------- | :------------------------------------------------------------------------------------ |\n| `child`              | `Widget`         | The child of button widget                                                            |\n| `color`              | `Color`          | Color of the button                                                                   |\n| `depth`              | `double`         | The depth of the button if it is elevated                                             |\n| `onTapUp`            | `VoidCallback?`  | Callback triggered when the forward \u0026 reverse button animation is finished            |\n| `onTapDown`          | `VoidCallback?`  | Callback triggered as soon as the user clicks the `enabled` button                    |\n| `onLongPress`        | `VoidCallback?`  | Callback triggered when user has long pressed the cta                                 |\n| `disabledColor`      | `Color`          | Color of the button when it is disabled                                               |\n| `parentColor`        | `Color`          | Button's immediate ancestor's color                                                   |\n| `grandparentColor`   | `Color`          | Button's second level ancestor's color                                                |\n| `buttonPosition`     | `Position`       | The position of button in reference to parent view. `default - Position.fullBottom`   |\n| `animationDuration`  | `Duration`       | Animation duration of the button click. `default - const Duration(milliseconds: 50)`  |\n| `forwardDuration`    | `Duration?`      | If you want different forward duration for button click, use forwardDuration          |\n| `reverseDuration`    | `Duration?`      | If you want different reverse duration for button click, use reverseDuration          |\n| `border`             | `Border?`        | The border to be painted around the button                                            |\n| `enabled`            | `bool`           | If set to `false`, the button will be disabled. `default - true`                      |\n| `shadowColor`        | `Color?`         | The base color of the shadow. The shadow colors will be derived from this             |\n| `rightShadowColor`   | `Color?`         | The color of the right shadow.                                                        |\n| `leftShadowColor`    | `Color?`         | The color of the left shadow.                                                         |\n| `topShadowColor`     | `Color?`         | The color of the top shadow.                                                          |\n| `bottomShadowColor`  | `Color?`         | The color of the bottom shadow.                                                       |\n\n\u003cbr\u003e\n\n# NeoPopTiltedButton\n\n![NeoPopTiltedButton](https://user-images.githubusercontent.com/58745044/176997116-89e1de77-f903-4051-8145-012f3af1fe7d.jpg \"NeoPopTiltedButton\")\n\n\n## Non Floating\n\n![Non Floating](https://user-images.githubusercontent.com/9965653/172599904-75d12903-f490-47d6-b8df-39adc9ef058e.png \"Non Floating\")\n![tiltNonFloating](https://user-images.githubusercontent.com/9965653/175874607-e8e10326-1d6d-4b7d-be8f-50cc8f37ee14.gif)\n\n```dart\n NeoPopTiltedButton(\n    color: kPrimaryButtonColor,\n    onTapUp: () {},\n    child: Padding(\n        padding: const EdgeInsets.symmetric(\n        horizontal: 80.0,\n        vertical: 15,\n        ),\n        child: SvgPicture.asset('assets/svg/cta_text_view.svg'),\n    ),\n),\n```\n\n##  Floating\n\n![Floating](https://user-images.githubusercontent.com/9965653/172599406-6da2d3a4-06ff-4a74-bd6a-988b36a59159.png \"Floating\")\n![tiltFloating](https://user-images.githubusercontent.com/9965653/175874595-86cc0725-df20-4ab3-b432-a6110d4c97c4.gif)\n\n```dart\nNeoPopTiltedButton(\n    isFloating: true,\n    onTapUp: () =\u003e HapticFeedback.vibrate(),\n    onTapDown: () =\u003e HapticFeedback.vibrate(),\n    decoration: const NeoPopTiltedButtonDecoration(\n        color: kPopYellowColor,\n        plunkColor: kPlunkColorYellow,\n        shadowColor: kTiltedButtonShadowColor,\n    ),\n    child: Padding(\n        padding: const EdgeInsets.symmetric(\n        horizontal: 70.0,\n        vertical: 15,\n        ),\n        child: SvgPicture.asset('assets/svg/cta_text_play_now.svg'),\n    ),\n),\n```\n\n## Strokes\n\n![Strokes](https://user-images.githubusercontent.com/9965653/172600281-53eec23d-3596-470e-95ed-dc93ebef82bb.png \"Strokes\")\n![TiltStroked](https://user-images.githubusercontent.com/9965653/175874601-91a27b7d-9e1b-4148-9a26-b9c9245e7a05.gif)\n\n```dart\nNeoPopTiltedButton(\n    isFloating: true,\n    onTapUp: () {},\n    decoration: const NeoPopTiltedButtonDecoration(\n        color: Color(0xFF0D0D0D),\n        plunkColor: Color(0xFF3F6915),\n        shadowColor: Colors.black,\n        border: Border.fromBorderSide(\n        BorderSide(color: Color(0xFF8DD04A), width: 1),\n        ),\n    ),\n    child: const Padding(\n        padding: EdgeInsets.symmetric(horizontal: 70.0, vertical: 15),\n        child: Text('Play Now', style: TextStyle(color: Colors.white)),\n    ),\n),\n```\n\n## Shimmer\n\n![shimmer](https://user-images.githubusercontent.com/9965653/175874574-99f209f2-2d14-458b-9f92-959e6aabf112.gif)\n\n```dart \nNeoPopTiltedButton(\n    isFloating: true,\n    onTapUp: () {},\n    decoration: const NeoPopTiltedButtonDecoration(\n        color: Color.fromRGBO(255, 235, 52, 1),\n        plunkColor: Color.fromRGBO(255, 235, 52, 1),\n        shadowColor: Color.fromRGBO(36, 36, 36, 1),\n        showShimmer: true,\n    ),\n    child: const Padding(\n        padding: EdgeInsets.symmetric(\n        horizontal: 70.0,\n        vertical: 15,\n        ),\n        child: Text('Play Now'),\n    ),\n),\n```\n\n## NeoPopTiltedButton Attributes\n\n| Attribute           | Type                            | Description                                                                                                                                                                                                                                       |\n| :------------------ | :------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `child`             | `Widget`                        | The child of the button                                                                                                                                                                                                                           |\n| `color`             | `Color?`                        | Color of the button                                                                                                                                                                                                                               |\n| `decoration`        | `NeoPopTiltedButtonDecoration?` | The decoration to paint the button. The `color` and `decoration` arguments cannot both be supplied, since it would potentially result in the decoration drawing over the background color. To supply a decoration with a color, use `decoration`. |\n| `buttonDepth`       | `double?`                       | The depth of the tilted button. `default: 8.0`                                                                                                                                                                                                    |\n| `onTapUp`           | `VoidCallback?`                 | A callback triggered when a pointer that will trigger a tap with button has stopped contacting the screen                                                                                                                                         |\n| `onTapDown`         | `VoidCallback?`                 | A callback triggered when a pointer that might cause a tap with button has contacted the screen                                                                                                                                                   |\n| `shadowDistance`    | `double?`                       | The maximum distance from the button at which the shadow is painted. `default: 20`                                                                                                                                                                |\n| `yPosFactor`        | `double?`                       | Factor that defines the floating positions of buttons and shadow along vertical-axis. `default: 5`                                                                                                                                                |\n| `isFloating`        | `bool`                          | Whether the button is floating. `default: false`                                                                                                                                                                                                  |\n| `floatingDuration`  | `Duration?`                     | The duration of the floating animation. One floating cycle i.e to-and-fro movement of the button and shadow accounts for two floating durations. `default: Duration(milliseconds: 1500)`                                                          |\n| `floatingDelay`     | `Duration?`                     | The delay between two floating cycles. `default: Duration(milliseconds: 750)`                                                                                                                                                                     |\n| `tapDuration`       | `Duration?`                     | The duration of the animation when button is pressed or released. `default: Duration(milliseconds: 100)`                                                                                                                                          |\n| `enabled`           | `bool`                          | Whether the button is enabled. `default: true`                                                                                                                                                                                                    |\n\n\u003cbr\u003e\n\n## Contributing\n\nPull requests are welcome! We'd love help improving this library. Feel free to browse through open issues to look for things that need work. If you have a feature request or bug, please open a new issue so we can track it.\n\n## License\n\n```\nCopyright 2022 Dreamplug Technologies Private Limited.  \n  \nLicensed under the Apache License, Version 2.0 (the \"License\");  \nyou may not use this file except in compliance with the License.  \nYou may obtain a copy of the License at  \n  \n http://www.apache.org/licenses/LICENSE-2.0  \nUnless required by applicable law or agreed to in writing, software  \ndistributed under the License is distributed on an \"AS IS\" BASIS,  \nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  \nSee the License for the specific language governing permissions and  \nlimitations under the License.  \n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCRED-CLUB%2Fneopop-flutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCRED-CLUB%2Fneopop-flutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCRED-CLUB%2Fneopop-flutter/lists"}