clay_containers 0.2.2

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 a ClayText 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. In the following example, the ClayContainer will receive a child.

The child it will receive is a ClayText wrapped in some Padding.

ClayContainer(
          color: baseColor,
          child: Padding(
            padding: EdgeInsets.all(20),
            child: ClayText("Seize the Clay!", emboss: true, size: 40),
          ),
        ),

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 simply set it directly in the ClayContainer constructor.

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

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.

Embossed ClayContainers

You 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.

ClayContainer(
          emboss: true,
          color: baseColor,
          height: 150,
          width: 150,
          borderRadius: 50,
        ),

An embossed 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,
        ),

Embossed!

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.

Animate It! #

Animation is not something included in this plugin, but having these values abstracted makes it easier to do things like animate your neumorphic elements. You can find the source for the example image below in this project's ./example folder.

Very animated. Much cool.

Full API Documentation #

ClayContainer #

Positional Arguments #

None.

Named Arguments #
  • 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.
  • height - This sets the height of the container.
  • width - This sets the width of the container.
  • parentColor - This tells the widget to use a different color for the outside emboss/deboss effect, despite whatever is set in the color field.
  • surfaceColor - This tells the widget to use a different color for the inside of the container, despite whatever is set in the color field.
  • spread - How far should the emboss/deboss effect spread?
  • depth - How strong should the emboss/deboss effect be?
  • child - This receives child widgets.
  • borderRadius - This receives a number representing a border radius to be applied to all corners of the container.
  • customBorderRadius - This receives a BorderRadius object. Setting this object will override whatever is set in the borderRadius field.
  • curveType - This receives a CurveType enum. Use this to set the inside surface to look either convex or concave.
  • emboss - This is false by default. Set this to true in order to make an embossed container.

ClayText #

Positional Arguments #
  • text - This is the text to be displayed.
Named Arguments #
  • 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.
  • parentColor - This tells the widget to use a different color for the outside emboss/deboss effect, despite whatever is set in the color field.
  • textColor - This tells the widget to use a different color for the fill of the text, despite whatever is set in the color field.
  • spread - How far should the emboss/deboss effect spread?
  • depth - How strong should the emboss/deboss effect be?
  • emboss - This is false by default. Set this to true in order to make an embossed container.

[0.2.2] - January 25, 2020

  • Yet another minor documentation adjustment.

[0.2.1] - January 25, 2020

  • Made default embossed surfaces brighter.

[0.2.0] - January 24, 2020

  • Introduce the ClayText widget.
  • Add the emboss property to ClayContainers.
  • Allow arbitrarily setting surfaceColor and parentColor for ClayContainers.
  • ClayContainers no longer require a color, but will instead default to Color(0xFFF0F0F0).
  • Documentation updates.

[0.1.12] - January 22, 2020

  • Documentation changes.

[0.1.11] - January 22, 2020

  • Documentation changes.
  • Removed unused variable.

[0.1.2] - January 24, 2020

  • This release was a mistake. 0.1.2 is meant to be the release after 0.1.12. I misunderstood the way the version numbering works.

[0.1.1] - January 21, 2020

  • Initial release.

example/main.dart

import 'package:clay_containers/clay_containers.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  Color baseColor = Color(0xFFf2f2f2);
  double firstDepth = 50;
  double secondDepth = 50;
  double thirdDepth = 50;
  double fourthDepth = 50;
  AnimationController _animationController;

  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this, // the SingleTickerProviderStateMixin
      duration: Duration(seconds: 5),
    )..addListener(() {
        setState(() {});
      });

    _animationController.forward();

    super.initState();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    double stagger(value, progress, delay) {
      progress = progress - (1 - delay);
      if (progress < 0) progress = 0;
      return value * (progress / delay);
    }

    double calculatedFirstDepth =
        stagger(firstDepth, _animationController.value, 0.25);
    double calculatedSecondDepth =
        stagger(secondDepth, _animationController.value, 0.5);
    double calculatedThirdDepth =
        stagger(thirdDepth, _animationController.value, 0.75);
    double calculatedFourthDepth =
        stagger(fourthDepth, _animationController.value, 1);

    return Container(
      color: baseColor,
      child: Center(
        child: ClayContainer(
          color: baseColor,
          height: 240,
          width: 240,
          borderRadius: 200,
          curveType: CurveType.concave,
          spread: 30,
          depth: calculatedFirstDepth.toInt(),
          child: Center(
            child: ClayContainer(
              height: 200,
              width: 200,
              borderRadius: 200,
              depth: calculatedSecondDepth.toInt(),
              curveType: CurveType.convex,
              color: baseColor,
              child: Center(
                child: ClayContainer(
                    height: 160,
                    width: 160,
                    borderRadius: 200,
                    color: baseColor,
                    depth: calculatedThirdDepth.toInt(),
                    curveType: CurveType.concave,
                    child: Center(
                        child: ClayContainer(
                      height: 120,
                      width: 120,
                      borderRadius: 200,
                      color: baseColor,
                      depth: calculatedFourthDepth.toInt(),
                      curveType: CurveType.convex,
                    ))),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  clay_containers: ^0.2.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:clay_containers/clay_containers.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
80
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
90
Learn more about scoring.

We analyzed this package on Feb 19, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.7

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test