Neumorphic containers and text widget primitives to serve as the foundation of your own unique neumorphic designs.

Overview

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.

Version 0.3.0 -- Null Safety!

Thanks to Sameerkash the project has been migrated to null safety as the 0.3.0 (the current version).

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!

You can use a ClayAnimatedContainer to create animations in the same way as you would an AnimatedContainer. An explanation of AnimatedContainers can be found on the Google Developers channel on YouTube.

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.

ClayAnimatedContainer

Positional Arguments

None.

Named Arguments
  • duration - The duration over which to animate the parameters of this container.
  • curve - The curve to apply when animating the parameters of this container.
  • Additional parameters are identical to ClayContainer.
Comments
  • design and building of Other NeuWidgets

    design and building of Other NeuWidgets

    I like this package. :) Best flutter neumorphic package so far 👍

    Do you have plans for buttons, or any other widgets? if so, do you have plans for how they will be implemented? I would be happy to help if I am able.

    Also, it would be really cool if we could somehow tie into Flutter ThemeData, or create a NeuThemeData or something.
    I am a fan.

    opened by AirborneEagle 2
  • Question: can this package be a BoxDecoration?

    Question: can this package be a BoxDecoration?

    I'm curious if this package could be distilled into a BoxDecoration class. If so, we may be able to use AnimatedContainer with it and get implicit animations for free.

    opened by lukepighetti 1
  • ClayAnimatedContainer onEnd implementation.

    ClayAnimatedContainer onEnd implementation.

    You can use a ClayAnimatedContainer to create animations in the same way as you would an AnimatedContainer. An explanation of AnimatedContainers can be found on the [Google Developers channel]) on YouTube.

    Hello. There is no implementation of onEnd callback in ClayAnimatedContainer but this is important part on AnimatedContainer. Could you add VoidCallback? onEnd to the widget, please, or merge with my PullRequest.

    opened by AstrisDev 0
  • No Issue - Awesome Performance, Thanks!

    No Issue - Awesome Performance, Thanks!

    Just wanted to tell ya, that I had implemented neumorphic elements in my app using https://pub.dev/packages/flutter_neumorphic.

    I have a decent number of elements, and was experiencing some mild jank when scrolling. After months of dealing with it, scaling back, etc. I just replaced a page's elements with your clay_containers and it became smooth as can be.

    So, Thank you for making yours with low overhead, efficient, and performant!

    opened by m-j-g 0
  • Lovely, simple package, but still needs documetation

    Lovely, simple package, but still needs documetation

    Provide documentation 10 / 20

    10/10 points: Package has an example

    • Found example at: example/main.dart

    0/10 points: 20% or more of the public API has dartdoc comments

    • 3 out of 58 API elements (5.2 %) have documentation comments.
    • Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API. Document at least 20% of the public API elements.
    opened by Zabadam 0
  • Useless complexity

    Useless complexity

    Hi, shouldn't this method be replaceable by the following simpler and more efficient code?

    extension on Color {
      Color withIncrement(int amount) => 
        Color.fromRGBO(
          (this.red + amount).clamp(0, 255), (this.green + amount).clamp(0, 255), (this.blue + amount).clamp(0, 255), 1
        );
    }
    

    Or am I missing something?

    help wanted good first issue 
    opened by vfsfitvnm 1
  • FR: ClayTheme

    FR: ClayTheme

    Looking for a ClayTheme class that we can apply pretty much any of the decorations to and have all descendent ClayContainers inherit from this via InheritedWidget.

    enhancement help wanted 
    opened by lukepighetti 1
Owner
Michael Aubrey
Engineer at S2 Co. Ltd. in Akita, Japan.
Michael Aubrey
Widget for displaying waves with custom color, duration, floating and blur effects.

Wave Widget for displaying waves with custom color, duration, floating and blur effects. Getting Started WaveWidget( config: CustomConfig(

Protoss 890 Dec 31, 2022
A repository with unique ideas, unique frontends..!

Unique-Frontends A repository with unique ideas, unique frontends..!! This repository is hacktoberfest-accepted and a part of hacktoberfest 2022..! Co

Surabhi Lele 3 Nov 1, 2022
Fully customizable neumorphic containers for your flutter projects.

neumorphic_container Fully customisable Neumorphic Containers for your flutter projects. Getting Started In the pubspec.yaml of your flutter project,

Aditi Ravi 11 Jul 13, 2022
In this project, we will design a travel app UI with a parallax effect for a unique scroll experience. You will learn how to create your own parallax effect without using external libraries.

Travel App UI In this part, we will design a travel app UI with a parallax effect for a unique scroll experience. You will learn how to create your ow

DebugErrorX 5 Dec 5, 2022
Collection of object-oriented Dart primitives

Dartoos — Dart Object-Oriented Software This package is a collection of object-oriented Dart primitives that implement classic data structures, algori

Dartoos 6 Nov 6, 2022
A simple HTTP server that can serve up any directory, built with Dart

A simple HTTP server that can serve up any directory, built with Dart. Inspired by python -m SimpleHTTPServer. Install Use the dart pub global command

Behruz Hurramov 0 Dec 27, 2021
null 0 Feb 16, 2022
This is a project we created for our Mobile App Development task under The Sparks Foundation Internship.

Hello everyone! This is a project we created for our Mobile App Development task under The Sparks Foundation Internship. We hope you like it!

Eyosiyas Tibebu 4 Jun 14, 2022
Simple flutter app that shows the transfer of money between multiple customers. The project is done as a part of The Sparks Foundation Internship GRIPSEPTEMPER22

Sparks Bank ?? Table of Contents About Packages used ScreenShots from the app Demo vedio Contributors About Basic banking system created in Flutter ba

Heba Ashraf 5 Oct 14, 2022
Neumorphic style - Example app with Flutter that displays a neumorphic style container

Flutter Neumorphic Style Example App Example app with Flutter that displays a ne

Piyush Nagpal 2 Mar 24, 2022
Calendar widget for flutter that is swipeable horizontally. This widget can help you build your own calendar widget highly customizable.

flutter_calendar_carousel Calendar widget for flutter that is swipeable horizontally. This widget can help you build your own calendar widget highly c

dooboolab 750 Jan 7, 2023
Masked text field - A flutter package for masked text field for formet your text and good UI

Masked Text Field Masked Text Field Features A package for masked text field for

Alok Dubey 7 Sep 4, 2022
An open source encrypted peer-to-peer system. Own data, own privacy.

An open source encrypted peer-to-peer system. Own data, own privacy.

Cymple Tech 456 Jan 3, 2023
An open source encrypted peer-to-peer system. Own data, own privacy. (Rust+Flutter)

An open source encrypted peer-to-peer system. Own data, own privacy. (Rust+Flutter)

Cymple Tech 124 Oct 7, 2021
Encrypted peer-to-peer system for data security. Own data, own privacy

ESSE (Encrypted Symmetrical Session Engine) An open source encrypted peer-to-pee

CympleTech 455 Dec 26, 2022
Behruz Hurramov 0 Dec 29, 2021
A flutter widget that animates scrolling through a set of fixed size containers.

Spinner This flutter package implements a simple Spinner animation that cycles through any number of fixed size child widgets. Useful for selecting a

Mark Schmidt 6 Aug 3, 2021
Text analyzer that extracts tokens from text for use in full-text search queries and indexes.

Tokenize text, compute document readbility and compare terms in Natural Language Processing. THIS PACKAGE IS PRE-RELEASE, and SUBJECT TO DAILY BREAKIN

GM Consult Pty Ltd 5 Dec 12, 2022
A powerful extended official text for Flutter, which supports Speical Text(Image,@somebody), Custom Background, Custom overFlow, Text Selection.

Extended official text to build special text like inline image or @somebody quickly,it also support custom background,custom over flow and custom selection toolbar and handles.

FlutterCandies 509 Jan 4, 2023
An Instagram like text editor Flutter widget that helps you to change your text style.

TextEditor An instagram like text editor widget for flutter Show some ❤️ and star the repo to support the project Features Edit TextStyle object font

Mehdi Zarepour 68 Dec 16, 2022