{"id":13752073,"url":"https://github.com/MichaelCharles/clay_containers","last_synced_at":"2025-05-09T18:33:05.101Z","repository":{"id":43883441,"uuid":"235331852","full_name":"MichaelCharles/clay_containers","owner":"MichaelCharles","description":"Neumorphic containers and text widget primitives to serve as the foundation of your own unique neumorphic designs.","archived":false,"fork":false,"pushed_at":"2024-02-02T15:15:35.000Z","size":1958,"stargazers_count":451,"open_issues_count":3,"forks_count":33,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-02T04:48:00.332Z","etag":null,"topics":["flutter","neumorphic"],"latest_commit_sha":null,"homepage":"","language":"C++","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/MichaelCharles.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":"2020-01-21T11:57:31.000Z","updated_at":"2025-04-24T20:11:18.000Z","dependencies_parsed_at":"2023-12-29T02:41:16.966Z","dependency_job_id":"89e9668b-bb5a-415d-a095-cf24dc46f82b","html_url":"https://github.com/MichaelCharles/clay_containers","commit_stats":null,"previous_names":["mcaubrey/clay_containers"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCharles%2Fclay_containers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCharles%2Fclay_containers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCharles%2Fclay_containers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCharles%2Fclay_containers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MichaelCharles","download_url":"https://codeload.github.com/MichaelCharles/clay_containers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252856551,"owners_count":21814858,"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":["flutter","neumorphic"],"created_at":"2024-08-03T09:00:59.019Z","updated_at":"2025-05-09T18:33:04.104Z","avatar_url":"https://github.com/MichaelCharles.png","language":"C++","funding_links":[],"categories":["UI [🔝](#readme)"],"sub_categories":[],"readme":"![Clay Containers for implementing beautiful, modern neumorphic designs.](https://res.cloudinary.com/mca62511/image/upload/v1579847668/banner_zx6prd.png)\n\n# Clay Containers\n\nEasily create and customize beautiful, modern [neumorphic](https://dribbble.com/tags/neumorphism) containers for your Flutter project. These clay containers can become the basis for your own unique neumorphic designs.\n\n## Installation\n\nAdd `clay_containers` to your project as a [dependency in your pubspec.yaml file](https://flutter.dev/docs/development/packages-and-plugins/using-packages). This is a simple Dart plugin, so additional configuration for iOS and Android is not needed.\n\n## Examples\n\n### Simple `ClayContainer`\n\nFor best results, set the background\ncolor of a surrounding widget to match\nthe color you will set for your clay\ncontainer. Since it is likely you'll reuse this base color\nmultiple times (especially if you end up doing something fancy)\nit's good to set this color to a single value. In the following example it\nis set to `baseColor`.\n\n```\nimport 'package:clay_containers/clay_containers.dart';\n\nclass MyExampleScreen extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    Color baseColor = Color(0xFFF2F2F2);\n\n    return Container(\n        color: baseColor,\n        child: Center(\n          child: ClayContainer(\n            color: baseColor,\n            height: 200,\n            width: 200,\n          ),\n        ),\n      );\n  }\n}\n```\n\n![ClayContainer example.](https://res.cloudinary.com/mca62511/image/upload/v1579847714/simple_xeh3pd.png)\n\n### `ClayContainer` with a `ClayText` Child.\n\nIn the previous example the `ClayContainer` was given `height`\nand `width` since it has no child. `ClayContainer` behaves the\nsame as a normal `Container` and needs to be either given\n`height` and `width` or a `child` to be visible. In the\nfollowing example, the `ClayContainer` will receive a child.\n\nThe child it will receive is a `ClayText` wrapped in some `Padding`.\n\n```\nClayContainer(\n          color: baseColor,\n          child: Padding(\n            padding: EdgeInsets.all(20),\n            child: ClayText(\"Seize the Clay!\", emboss: true, size: 40),\n          ),\n        ),\n```\n\n![Clay container example with child.](https://res.cloudinary.com/mca62511/image/upload/v1579847742/simple_child_text_jmwjd3.png)\n\n### Rounded `ClayContainer`s\n\nDon't be a square! Use borderRadius to add some flare. If you want a uniform `borderRadius` you can simply set it directly in the `ClayContainer` constructor.\n\n```\nClayContainer(\n          color: baseColor,\n          height: 150,\n          width: 150,\n          borderRadius: 50,\n        ),\n```\n\n![A rounded ClayContainer.](https://res.cloudinary.com/mca62511/image/upload/v1579847766/circle_ci1at9.png)\n\nIf you want to pass your own custom `BorderRadius` object, that is available as well: In that case pass it to `customBorderRadius`.\n\n```\nClayContainer(\n          color: baseColor,\n          height: 150,\n          width: 150,\n          customBorderRadius: BorderRadius.only(\n              topRight: Radius.elliptical(150, 150),\n              bottomLeft: Radius.circular(50)),\n        ),\n```\n\n![A weird shaped ClayContainer.](https://res.cloudinary.com/mca62511/image/upload/v1579847787/weird_pv8vnk.png)\n\n### Embossed `ClayContainer`s\n\nYou may have noticed earlier that the `ClayText` can receive an `emboss` property. ClayContainers can as well. All clay widgets start in a debossed state by default.\n\n```\nClayContainer(\n          emboss: true,\n          color: baseColor,\n          height: 150,\n          width: 150,\n          borderRadius: 50,\n        ),\n```\n\n![An embossed ClayContainer.](https://res.cloudinary.com/mca62511/image/upload/c_scale,w_570/v1579930865/ss__2020-01-25_at_14.34.08_hntksj.png)\n\n### Change Default Spread and Depth\n\nDon't like the default look of the neumorphic effect? Change the base variables. Do whatever you want. I'm not your mom.\n\n```\nClayContainer(\n          color: baseColor,\n          height: 150,\n          width: 150,\n          borderRadius: 75,\n          depth: 40,\n          spread: 40,\n        ),\n```\n\n![Embossed!](https://res.cloudinary.com/mca62511/image/upload/v1579847841/deep_v010zd.png)\n\n### Concave and Convex `ClayContainer`s\n\nGive your `ClayContainer` a convex or a concave look by passing either `CurveType.concave` or `CurveType.convex` to the `curveType` parameter.\n\n```\nRow(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: \u003cWidget\u003e[\n            ClayContainer(\n              color: baseColor,\n              height: 150,\n              width: 150,\n              borderRadius: 75,\n              curveType: CurveType.concave,\n            ),\n            SizedBox(width: 50),\n            ClayContainer(\n              color: baseColor,\n              height: 150,\n              width: 150,\n              borderRadius: 75,\n              curveType: CurveType.none,\n            ),\n            SizedBox(width: 50),\n            ClayContainer(\n              color: baseColor,\n              height: 150,\n              width: 150,\n              borderRadius: 75,\n              curveType: CurveType.convex,\n            ),\n          ],\n        ),\n```\n\n![Concave, flat, and convex ClayContainers.](https://res.cloudinary.com/mca62511/image/upload/v1579847860/concave_convex_hyafpx.png)\n\n### Animate It!\n\nYou can use a `ClayAnimatedContainer` to create animations in the same way as you would an `AnimatedContainer`. An explanation of `AnimatedContainer`s can be found on the [Google Developers channel](https://www.youtube.com/watch?v=yI-8QHpGIP4) on YouTube.\n\n![Very animated. Much cool.](https://res.cloudinary.com/mca62511/image/upload/c_scale,h_300,w_300/v1579847878/animated_rktpdo.gif)\n\n### Theming\n\nYou asked for it, you got it. Now you can specify your clay container's properties high up in your widget tree and that theme will apply to every `ClayContainer` you create under that `ClayTheme`. Simply introduce the `ClayTheme` anywhere in your widget tree and pass it a `ClayThemeData` to it's `themeData` property.\n\n```dart\nClayTheme(\n  themeData: const ClayThemeData(\n    height: 10,\n    width: 20,\n    borderRadius: 360,\n    textTheme: ClayTextTheme(style: TextStyle()),\n    depth: 12,\n  ),\n  child: (...),\n);\n```\n\nNow any clay widget that is a child of this `ClayTheme` will inherit it's theme.\n\nAlso note that `ClayTextTheme` will handle the theme of your `ClayText`.\n\nYou can override any of these properties to give a specific clay widget custom theming. Simply give that property a value when you create it.\n\n```dart\nClayTheme(\n  themeData: const ClayThemeData(\n    height: 10,\n    width: 20,\n    borderRadius: 360,\n    textTheme: ClayTextTheme(style: TextStyle()),\n    depth: 12,\n  ),\n  child: ClayAnimatedContainer(\n      height: 240,\n      width: 240,\n      child: ClayContainer(\n          borderRadius: 10,\n      ),\n  ),\n);\n```\n\nNow, the `ClayAnimatedContainer` in the code above will have a `height` and `width` of `240`, ignoring the `10` and `20` height and width respectively passed to the `ClayTheme`, but the `ClayContainer` will rather take `height` and `width` of `10` and `20` respectively, which is from the `ClayTheme`, but will override the `borderRadius` with a `10`.\n\nBoth the `ClayThemeData` and the `ClayTextTheme` have only one default value\n\n```dart\ncolor: const Color(0xFFf0f0f0);\n```\n\n### Full API Documentation\n\n#### `ClayContainer`\n\n##### Positional Arguments\n\nNone.\n\n##### Named Arguments\n\n- **color** - This sets the base color for the clay object. Simply setting this to the background color of the parent object will give you a pretty good looking debossed neumorphic effect.\n- **height** - This sets the height of the container.\n- **width** - This sets the width of the container.\n- **parentColor** - This tells the widget to use a different color for the outside emboss/deboss effect, despite whatever is set in the `color` field.\n- **surfaceColor** - This tells the widget to use a different color for the inside of the container, despite whatever is set in the `color` field.\n- **spread** - How far should the emboss/deboss effect spread?\n- **depth** - How strong should the emboss/deboss effect be?\n- **child** - This receives child widgets.\n- **borderRadius** - This receives a number representing a border radius to be applied to all corners of the container.\n- **customBorderRadius** - This receives a `BorderRadius` object. Setting this object will override whatever is set in the `borderRadius` field.\n- **curveType** - This receives a `CurveType` enum. Use this to set the inside surface to look either convex or concave.\n- **emboss** - This is `false` by default. Set this to `true` in order to make an embossed container.\n\n#### `ClayText`\n\n##### Positional Arguments\n\n- **text** - This is the text to be displayed.\n\n##### Named Arguments\n\n- **color** - This sets the base color for the clay object. Simply setting this to the background color of the parent object will give you a pretty good looking debossed neumorphic effect.\n- **parentColor** - This tells the widget to use a different color for the outside emboss/deboss effect, despite whatever is set in the `color` field.\n- **textColor** - This tells the widget to use a different color for the fill of the text, despite whatever is set in the `color` field.\n- **spread** - How far should the emboss/deboss effect spread?\n- **depth** - How strong should the emboss/deboss effect be?\n- **emboss** - This is `false` by default. Set this to `true` in order to make an embossed container.\n\n#### `ClayAnimatedContainer`\n\n##### Positional Arguments\n\nNone.\n\n##### Named Arguments\n\n- **duration** - The duration over which to animate the parameters of this container.\n- **curve** - The curve to apply when animating the parameters of this container.\n- **Additional parameters are identical to `ClayContainer`.**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMichaelCharles%2Fclay_containers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMichaelCharles%2Fclay_containers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMichaelCharles%2Fclay_containers/lists"}