[Clay Containers for implementing beautiful, modern neumorphic designs.]

Clay Containers #

Easily create and customize beautiful, modern neumorphic containers for your Flutter project. These clay containers can become the basis for your own unique neumorphic designs.

Installation #

Add clay_containers to your project as a dependency in your pubspec.yaml file. This is a simple Dart plugin, so additional configuration for iOS and Android is not needed.

Examples #

Simple ClayContainer #

For best results, set the background color of a surrounding Widget to match the color you will set for your clay container. Since it is likely you'll reuse this base color multiple times (especially if you end up doing something fancy) it's good to set this color to a single value. In the following example it is set to baseColor.

import 'package:clay_containers/clay_containers.dart';

class MyExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Color baseColor = Color(0xFFF2F2F2);

    return Container(
        color: baseColor,
        child: Center(
          child: ClayContainer(
            color: baseColor,
            height: 200,
            width: 200,
          ),
        ),
      );
  }
}

[ClayContainer example.]

ClayContainer with Child #

In the previous example the ClayContainer was given height and width since it has no child. ClayContainer behaves the same as a normal Container and needs to be either given height and width or a child to be visible. I've also included Padding so that the text didn't end up flesh with the edge of the container.

ClayContainer(
    color: baseColor,
    child: Padding(
      padding: EdgeInsets.all(20),
      child: Text(
        "Seize the Clay!",
        style: TextStyle(
          fontSize: 40,
          fontWeight: FontWeight.w200,
          color: Colors.black45,
        ),
      ),
    ),
  ),

[Clay container example with child.]

Rounded ClayContainers #

Don't be a square! Use borderRadius to add some flare. If you want a uniform borderRadius you can simple set it directly in the ClayContainer constructor.

ClayContainer(
          color: baseColor,
          height: 150,
          width: 150,
          borderRadius: 75,
        ),

[A rounded ClayContainer.]

If you want to pass your own custom BorderRadius object, that is available as well: In that case pass it to customBorderRadius.

ClayContainer(
          color: baseColor,
          height: 150,
          width: 150,
          customBorderRadius: BorderRadius.only(
              topRight: Radius.elliptical(150, 150),
              bottomLeft: Radius.circular(50)),
        ),

[A weird shaped ClayContainer.]

Change Default Spread and Depth #

Don't like the default look of the neumorphic effect? Change the base variables. Do whatever you want. I'm not your mom.

ClayContainer(
          color: baseColor,
          height: 150,
          width: 150,
          borderRadius: 75,
          depth: 40,
          spread: 40,
        ),

[A ClayContainer as deep as a freshmen Philosophy class.]

Concave and Convex ClayContainers #

Give your ClayContainer a convex or a concave look by passing either CurveType.concave or CurveType.convex to the curveType parameter.

Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ClayContainer(
              color: baseColor,
              height: 150,
              width: 150,
              borderRadius: 75,
              curveType: CurveType.concave,
            ),
            SizedBox(width: 50),
            ClayContainer(
              color: baseColor,
              height: 150,
              width: 150,
              borderRadius: 75,
              curveType: CurveType.none,
            ),
            SizedBox(width: 50),
            ClayContainer(
              color: baseColor,
              height: 150,
              width: 150,
              borderRadius: 75,
              curveType: CurveType.convex,
            ),
          ],
        ),

[Concave, flat, and convex ClayContainers.]