{"id":17100121,"url":"https://github.com/reinbentdal/division","last_synced_at":"2025-04-05T11:12:56.174Z","repository":{"id":34943349,"uuid":"191210431","full_name":"ReinBentdal/division","owner":"ReinBentdal","description":"Simple to use yet powerfull style widgets with syntax inspired by CSS.","archived":false,"fork":false,"pushed_at":"2023-10-10T17:37:41.000Z","size":35520,"stargazers_count":269,"open_issues_count":16,"forks_count":43,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-29T10:10:32.681Z","etag":null,"topics":["animated","css","dart","flutter","flutter-package","flutter-widget","style","styled"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/division","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/ReinBentdal.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":"ReinBentdal","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://www.paypal.me/reinbentdal"]}},"created_at":"2019-06-10T17:03:56.000Z","updated_at":"2025-02-19T13:10:44.000Z","dependencies_parsed_at":"2024-06-18T22:36:42.223Z","dependency_job_id":"2e1e327c-2869-4dcf-acd8-aa123c61028c","html_url":"https://github.com/ReinBentdal/division","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReinBentdal%2Fdivision","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReinBentdal%2Fdivision/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReinBentdal%2Fdivision/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReinBentdal%2Fdivision/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ReinBentdal","download_url":"https://codeload.github.com/ReinBentdal/division/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247325695,"owners_count":20920714,"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":["animated","css","dart","flutter","flutter-package","flutter-widget","style","styled"],"created_at":"2024-10-14T15:12:28.668Z","updated_at":"2025-04-05T11:12:56.134Z","avatar_url":"https://github.com/ReinBentdal.png","language":"Dart","funding_links":["https://github.com/sponsors/ReinBentdal","https://www.paypal.me/reinbentdal","https://www.buymeacoffee.com/tOTWBs7"],"categories":[],"sub_categories":[],"readme":"# Division\n\u003ca href=\"https://pub.dev/packages/division\"\u003e\u003cimg src=\"https://img.shields.io/pub/v/division?color=blue\u0026label=division\" /\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ca href=\"https://www.buymeacoffee.com/tOTWBs7\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/be06971baed9105260e0ed5c03746108c30b527f/68747470733a2f2f63646e2e6275796d6561636f666665652e636f6d2f627574746f6e732f64656661756c742d6f72616e67652e706e67\" alt=\"Buy Me A Coffee\" data-canonical-src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" width=\"150px\" /\u003e\u003c/a\u003e\n\u003e Simple to use yet powerfull style widgets with syntax inspired by CSS.\n\n### Please check out [styled_widget](https://github.com/ReinBentdal/styled_widget) which is a replacement of Division!\n\nThe true power of this package is a combination of its features. Flutter widgets are designed to combine both the styling widgets and the structural widgets together when building apps. This package tries to decouple style from structure. This results in much more readable code. Another strong point of this package is the ease of animations. \n\n- **[Getting started](#getting-started)**\n- **[Basic example](#basic-example)**\n- **[Documentation](#documentation)**\n  - [Core style methods](#core-style-methods)\n  - [Parent](#parent)\n  - [Txt](#txt)\n  - [Gestures](#gestures)\n- **[Examples and best practices](#examples-and-best-practices)**\n\n⚠️ **If you encounter an issue or have any feedback which you think could improve Division, please open an issue [here](https://github.com/ReinBentdal/division/issues)**\n\n### Built with Division\n| [App designer](https://dribbble.com/shots/6459693-Creative-layout-design),  [Code](https://github.com/ReinBentdal/division/blob/master/example/example/example_1.dart) | [Code](https://github.com/ReinBentdal/division/blob/master/example/example/example_form.dart) |\n|-|-|\n| \u003cimg src=\"https://raw.githubusercontent.com/ReinBentdal/division/master/example/assets/demo_app.gif\" width=\"250\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/ReinBentdal/division/master/example/assets/form_demo.gif\" width=\"250\"\u003e |\n\n## Getting Started\nThis is the two main widgets included in Division\n```dart\nParent(\n  child: Widget,\n  style: ParentStyle, \n  gesture: Gestures,\n);\n```\n```dart\nTxt(\n  String,\n  style: TxtStyle,\n  gesture: Gestures,\n);\n```\n\n### Basic example\n#### Import\n```dart\nimport 'package:division/division.dart';\n```\n#### Code\n```dart\nbool pressed = false;\n\nfinal buttonStyle = (pressed) =\u003e TxtStyle()\n  ..alignment.center()\n  ..background.color(pressed ? Colors.orange : Colors.white)\n  ..textColor(pressed ? Colors.white : Colors.orange)\n  ..borderRadius(all: 5)\n  ..border(all: 3, color: Colors.orange)\n  ..padding(vertical: 10, horizontal: 15)\n  ..ripple(true)\n  ..animate(150, Curves.easeOut);\n\nGestures buttonGestures() =\u003e\n    Gestures()..isTap((isPressed) =\u003e setState(() =\u003e pressed = isPressed));\n\n@override\nWidget build(BuildContext context) {\n  return Txt(\n    'Styled button!',\n    style: buttonStyle(pressed),\n    gesture: buttonGestures(),\n  );\n}\n```\n#### Result\n\u003cimg src=\"https://raw.githubusercontent.com/ReinBentdal/division/master/example/assets/basic_example.gif\" width=\"300\"\u003e\n\n## Documentation\nAll current and future Division widgets share a common style base.\n### Core style methods\n\n\u003cdetails\u003e\n  \u003csummary\u003eAnimate\u003c/summary\u003e\n\n  ```dart\n  ..animate([int duration, Curve curve = Curves.linear])\n  ```\n  A powerful style method. Whenever a style property changes, the widget will animate between the two states (given the style property is compatibel with animations).\n  `duration` in ms\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eAlignment\u003c/summary\u003e\n\n```dart\n..alignment.[alignment] // alignment.topCenter()\n```\nThe widget alignment\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eContent alignment\u003c/summary\u003e\n\n  ```dart\n  ..alignmentContent.[alignment] // alignment.topCenter()\n  ```\n  Alignment of the child.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003ePadding\u003c/summary\u003e\n\n  ```dart\n  ..padding({double all, \n        double horizontal, \n        double vertical, \n        double top, \n        double bottom, \n        double left, \n        double right})\n  ```\n  All properties work together. `padding(all: 10, top: 30)` is equivilent to `padding(top: 30, bottom: 10, left: 10, right: 10)`\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eMargin\u003c/summary\u003e\n\n  ```dart\n  ..margin({double all,\n        double horizontal,\n        double vertical,\n        double top,\n        double bottom,\n        double left,\n        double right})\n  ```\n  All properties work together. `margin(all: 10, top: 30)` is equivilent to `margin(top: 30, bottom: 10, left: 10, right: 10)`\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eBackground color\u003c/summary\u003e\n\n  ```dart\n  ..background.color(Color)\n  ..background.hex(xxxxxx)\n  ..background.rgba(int, int, int, [double])\n  ```\n  `color` format options: hex('#xxxxxx'), rgba(int, int, int, double) or [Color].\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eBackground image\u003c/summary\u003e\n\n  ```dart\n  ..background.image(\n        {String url, \n        String path, \n        ColorFilter colorFilter, \n        ImageProvider\u003cdynamic\u003e imageProveder,\n        BoxFit fit, \n        AlignmentGeometry alignment = Alignment.center, \n        ImageRepeat repeat = ImageRepeat.noRepeat})\n  ```\n  Eighter the [url] or the [path] has to be specified.\n  [url] is for network images and [path] is for local images.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eBackground blur\u003c/summary\u003e\n\n  ```dart\n  ..background.blur(double blur)\n  ```\n  Blurs the background. Can be used for example to achieve a \"frosted glass\" effect:\n\n  ```dart\n  StyleClass()\n    ..background.blur(10)\n    ..background.rgba(255,255,255,0.15)\n  ```\n  Does not work together with `rotate()`.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eBackground blend mode\u003c/summary\u003e\n\n  ```dart\n  ..background.blendMode(BlendMode blendMode)\n  ```\n  Algorithms for blending background\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eLinear gradient\u003c/summary\u003e\n\n  ```dart\n  ..linearGradient({AlignmentGeometry begin = Alignment.left,\n        AlignmentGeometry end = Alignment.right,\n        @required List\u003cColor\u003e colors,\n        TileMode tileMode = TileMode.clamp,\n        List\u003cdouble\u003e stops})\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eRadial gradient\u003c/summary\u003e\n\n  ```dart\n  ..radialGradient(\n      {AlignmentGeometry center = Alignment.center,\n      @required double radius,\n      @required List\u003cColor\u003e colors,\n      TileMode tileMode = TileMode.clamp,\n      List\u003cdouble\u003e stops})\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eSweep gradient\u003c/summary\u003e\n\n  ```dart\n  ..sweepGradient(\n      {AlignmentGeometry center = Alignment.center,\n      double startAngle = 0.0,\n      @required double endAngle,\n      @required List\u003cColor\u003e colors,\n      TileMode tileMode = TileMode.clamp,\n      List\u003cdouble\u003e stops})\n  ```\n  In the style widget constructor, specify what angle calculation format you want to use.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eOpacity\u003c/summary\u003e\n\n  ```dart\n  ..opacity(double opacity)\n  ```\n  Opacity applied on the whole widget.\n\n  Value must not be negative.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eBorder\u003c/summary\u003e\n\n  ```dart\n  ..border(\n        {double all,\n        double left,\n        double right,\n        double top,\n        double bottom,\n        Color color = const Color(0xFF000000),\n        BorderStyle style = BorderStyle.solid})\n  ```\n  Choose between `all`, `left`, `right`, `top` and `bottom`. `all` works together with the other properties.\n  `color` format options: hex('#xxxxxx'), rgb(int, int, int), rgba(int, int, int, double) or [Color].\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eBorder radius\u003c/summary\u003e\n\n  ```dart\n  ..borderRadius(\n        {double all,\n        double topLeft,\n        double topRight,\n        double bottomLeft,\n        double bottomRight})\n  ```\n  It is valid to use `all` together with single sided properties. Single sided properties will trump over the `all` property.\n\n  See also [circle] for creating circular widgets.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eCircle\u003c/summary\u003e\n\n  ```dart\n  ..circle([bool enable = true])\n  ```\n  Makes the widget circular\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eBox shadow\u003c/summary\u003e\n\n  ```dart\n  ..boxShadow(\n        {Color color = const Color(0x33000000),\n        double blur = 0.0,\n        Offset offset = Offset.zero,\n        double spread = 0.0})\n  ```\n  See [elevation] for a different way of defining a box shadow.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eElevation\u003c/summary\u003e\n\n  ```dart\n  ..elevation(\n        double elevation,\n        {double angle = 0.0,\n        Color color = const Color(0x33000000),\n        double opacity = 1.0})\n  ```\n  Elevates the widget with a boxShadow.\n  [opacity] is a relative constant\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eScale\u003c/summary\u003e\n\n  ```dart\n  ..scale(double ratio)\n  ```\n  Scale the widget\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eOffset\u003c/summary\u003e\n\n  ```dart\n  ..offset([double dx, double dy])\n  ```\n  Offsets the widget\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eRotate\u003c/summary\u003e\n\n  ```dart\n  ..rotate(double angle)\n  ```\n  Rotates the widget.\n  By default one turn equals the value 1.0. To change to radians: `StyleClass(useRadians: true)`.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eRipple\u003c/summary\u003e\n\n  ```dart\n  ..ripple(bool enable, {dynamic splashColor, dynamic highlightColor})\n  ```\n  Material ripple effect applied on tap.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eOverflow\u003c/summary\u003e\n\n  ```dart\n  ..overflow.visible({Axis direction = Axis.vertical})\n  ..overflow.scrollable({Axis direction = Axis.vertical})\n  ..overflow.hidden()\n  ```\n  Change child overflow behaviour.\n  Choose the overflow direction with the [direction] parameter.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eWidth, minWidth, maxWidth, Height, minHeight, maxHeight\u003c/summary\u003e\n\n  ```dart\n  ..[type](double dimension)\n  ```\n\u003c/details\u003e\n\n### Parent\n```dart\nParent(\n  style: ParentStyle,\n  gesture: Gestures,\n  child: Widget\n)\n```\nAs the name suggests this widget is a simple styled widget which takes a child.\n\n### ParentStyle\n```dart\n// format\nParentStyle()\n  ..[style method]\n\n// example\nParentStyle()\n  ..width(100)\n  ..padding(all: 10)\n  ..elevation(5)\n```\n\u003cdetails\u003e\n  \u003csummary\u003eAdd\u003c/summary\u003e\n\n  ```dart\n  ..add(ParentStyle parentStyle, {bool override = false})\n  ```\n  Combines style from two styled widgets.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eClone\u003c/summary\u003e\n\n  ```dart\n  ..ParentStyle().clone()\n  ```\n  This will clone the `ParentStyle` widget. This is usefull if you for example want to add more style to a widget without modifying the initial style.\n\u003c/details\u003e\n\n### Txt\n```dart\nTxt(\n  String,\n  style: TxtStyle,\n  gesture: Gestures,\n)\n```\nAs the name suggests this widget is a simple styled widget which takes a `String` as its child.\nThis widget enables text styling with the `TxtStyle` widget. This also has the possibility to make the widget editable.\n\n### TxtStyle\n```dart\n// format\nTxtStyle()\n  ..[style method]\n\n// example\nTxtStyle()\n  ..width(100)\n  ..padding(all: 10)\n  ..textColor(Colors.blue)\n  ..bold()\n```\n\u003cdetails\u003e\n  \u003csummary\u003eEditable\u003c/summary\u003e\n\n  ```dart\n  ..editable(bool enable,\n        {TextInputType keyboardType,\n        String placeholder,\n        bool obscureText = false,\n        int maxLines,\n        void Function(String) onChange,\n        void Function(bool focus) onFocusChange,\n        void Function(TextSelection, SelectionChangedCause) onSelectionChanged,\n        void Function() onEditingComplete,\n        FocusNode focusNode})\n  ```\n  This makes the widget editable, just like a `TextField`, its just much easier to style\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eText align\u003c/summary\u003e\n\n  ```dart\n  ..textAlign.center()\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eFont weight\u003c/summary\u003e\n\n  ```dart\n  ..fontWeight(FontWeight fontWeight)\n  ```\n  A shorthand to make the text bold:\n  ```dart\n  ..bold([bool enable])\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eItalic\u003c/summary\u003e\n\n  ```dart\n  ..italic([bool enable])\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eFont family\u003c/summary\u003e\n\n  ```dart\n  ..fontFamily(String font, {List\u003cString\u003e fontFamilyFallback})\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eText color\u003c/summary\u003e\n\n  ```dart\n  ..textColor(Color textColor)\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eMax lines\u003c/summary\u003e\n\n  ```dart\n  ..maxLines(int maxLines)\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eLetter spacing\u003c/summary\u003e\n\n  ```dart\n  ..letterSpacing(double space)\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eWord spacing\u003c/summary\u003e\n\n  ```dart\n  ..wordSpacing(double space)\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eText decoration\u003c/summary\u003e\n\n  ```dart\n  ..textDecoration(TextDecoration decoration)\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eText shadow\u003c/summary\u003e\n\n  ```dart\n  ..textShadow({Color color = const Color(0x33000000),\n      double blur = 0.0,\n      Offset offset = Offset.zero})\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eText elevation\u003c/summary\u003e\n\n  ```dart\n  ..textElevation(double elevation,\n      {double angle = 0.0,\n      Color color = const Color(0x33000000),\n      double opacity = 1.0})\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eAdd\u003c/summary\u003e\n\n  ```dart\n  ..add(TxtStyle txtStyle, {bool override = false})\n  ```\n  This adds together two `TxtStyle`s. The `override` property specifies if already defined properties should be overrided.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eClone\u003c/summary\u003e\n\n  ```dart\n  ..TxtStyle().clone()\n  ```\n  This will clone the `TxtStyle` widget. This is usefull if you for example want to add more style to a widget without modifying the initial style.\n\u003c/details\u003e\n\n### Gestures\n\u003cdetails\u003e\n  \u003csummary\u003eisTap\u003c/summary\u003e\n\n  ```dart\n  ..isTap((isTapped) =\u003e setState(() =\u003e pressed = isTapped))\n  ```\n  Called whenever the tap state on the widget changes.\n  This replaces the use of `onTapDown`, `onTapUp` and `onTapCancel` together.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eOther\u003c/summary\u003e\n\n  ```dart\n  ..onTap()\n  ..onTapUp()\n  ..onTapCancel()\n  ..onDoubleTap()\n  ..onTapDown()\n  ..onLongPress()\n  ..onLongPressStart()\n  ..onLongPressEnd()\n  ..onLongPressMoveUpdate()\n  ..onLongPressUp()\n  ..onVerticalDragStart()\n  ..onVerticalDragEnd()\n  ..onVerticalDragDown()\n  ..onVerticalDragCancel()\n  ..onVerticalDragUpdate()\n  ..onHorizontalDragStart()\n  ..onHorizontalDragEnd()\n  ..onHorizontalDragCancel()\n  ..onHorizontalDragUpdate()\n  ..onHorizontalDragDown()\n  ..onForcePressStart()\n  ..onForcePressEnd()\n  ..onForcePressPeak()\n  ..onForcePressUpdate()\n  ..onPanStart()\n  ..onPanEnd()\n  ..onPanCancel()\n  ..onPanDown()\n  ..onPanUpdate()\n  ..onScaleStart()\n  ..onScaleEnd()\n  ..onScaleUpdate()\n  ```\n\u003c/details\u003e\n\n## Examples and best practices\n\n#### Decoupling style from structure\n```dart\nfinal ParentStyle cardStyle = ParentStyle()\n  ..height(175)\n  ..padding(horizontal: 20.0, vertical: 10)\n  ..alignment.center()\n  ..background.hex('#3977FF')\n  ..borderRadius(all: 20.0)\n  ..elevation(10, color: hex('#3977FF'));\n\nWidget build(BuildContext context) {\n  return Parent(\n    style: cardStyle,\n    child: Widget,\n  );\n}\n```\n\n#### Variable dependent style\n```dart\nfinal Color color = Colors.blue;\n\nfinal cardStyle = (color) =\u003e ParentStyle()\n  ..height(175)\n  ..padding(horizontal: 20.0, vertical: 10)\n  ..alignment.center()\n  ..background.color(color)\n  ..borderRadius(all: 20.0)\n  ..elevation(10, color: color);\n\nWidget build(BuildContext context) {\n  return Parent(\n    style: cardStyle(color),\n    child: Widget,\n  );\n}\n```\n\n#### Animated widgets\n```dart\nbool pressed = false;\n\nfinal cardStyle = (pressed) =\u003e ParentStyle()\n  ..height(175)\n  ..padding(horizontal: 20.0, vertical: 10)\n  ..alignment.center()\n  ..borderRadius(all: 20.0)\n  ..animate(200, Curves.easeOut)\n  ..background.color(pressed ? Colors.white : Colors.black)\n  ..elevation(pressed ? 10 : 20);\n\nWidget build(BuildContext context) {\n  return Parent(\n    style: cardStyle(pressed),\n    gesture: Gestures()\n      ..isTap((isPressed) =\u003e setState(() =\u003e pressed = isPressed)),\n    child: Widget,\n  );\n}\n```\nor\n```dart\nbool pressed = false;\n\nfinal cardStyle = (pressed) =\u003e ParentStyle()\n  ..height(175)\n  ..padding(horizontal: 20.0, vertical: 10)\n  ..alignment.center()\n  ..borderRadius(all: 20.0)\n  ..animate(200, Curves.easeOut)\n  ..background.color(pressed ? Colors.white : Colors.black)\n  ..elevation(pressed ? 10 : 20);\n\nGestures cardGesture() =\u003e Gestures()\n  ..isTap((isPressed) =\u003e setState(() =\u003e pressed = isPressed));\n\nWidget build(BuildContext context) {\n  return Parent(\n    style: cardStyle(pressed),\n    gesture: cardGesture(),\n    child: Widget,\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freinbentdal%2Fdivision","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freinbentdal%2Fdivision","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freinbentdal%2Fdivision/lists"}