Fully customizable neumorphic containers for your flutter projects.

Overview

neumorphic_container

Fully customisable Neumorphic Containers for your flutter projects.

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  neumorphic_container: "^0.0.1+2"

In your library add the following import:

import 'package:neumorphic_container/neumorphic_container.dart';

For help getting started with Flutter, view the online documentation.

Usage

Simple Container: For best results, set the background color of a surrounding widget to match the color you set for the container.

NeumorphicContainer(
              height: 150,
              width: 150,
              borderRadius: 10,
              primaryColor: Color(0xfff0f0f0),
              curvature: Curvature.flat,
            ),

Container with Border:

 NeumorphicContainer(
              height: 130,
              width: 130,
              borderRadius: 150,
              primaryColor: Color(0xff292929),
              //add border color and thickness
              borderColor: Colors.orange,
              borderThickness: 1,
              curvature: Curvature.concave,
              child: Icon(Icons.phone,color: Colors.orange,size: 30,),
            ),

Curvature

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

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  @override
  Widget build(BuildContext context) {
    Color color = Color(0xfff0f0f0);
    return Scaffold(
      backgroundColor: color,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(20.0),
              child: NeumorphicContainer(
                height: 150,
                width: 150,
                borderRadius: 150,
                depth: 20,
                primaryColor: color,
                //flat neumorphism design
                curvature: Curvature.flat,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(20.0),
              child: NeumorphicContainer(
                height: 150,
                width: 150,
                borderRadius: 150,
                primaryColor: color,
                spread: 5,
                //convex neumorphism design
                curvature: Curvature.convex,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(20.0),
              child: NeumorphicContainer(
                height: 150,
                width: 150,
                borderRadius: 150,
                primaryColor: color,
                //concave neumorphism design
                curvature: Curvature.concave,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Getting Started

This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Show some ❤️ and star the repo to support the project

You might also like...

A fully-functional e commerce app made in Flutter using Firebase.

A fully-functional e commerce app made in Flutter using Firebase.

Smart Shop 🛍️ A fully-functional e commerce app made in Flutter using Firebase. How To Run This Project 🏃‍♂️ Clone the repository. Create project on

Sep 30, 2022

My flutter projects work with JSON

Apps work with JSON A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you star

Oct 21, 2021

Flutter development projects

Flutter development projects

quizapp A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Oct 26, 2021

:star: Flutter-Firebase fully backend messaging app

:star: Flutter-Firebase fully backend messaging app

Orgonet ChatApp ⭐ Flutter-Firebase fully backend messaging app I made a backend full messaging app using firebase **download the file named orgone tv2

Nov 18, 2022

A Flutter app to estimate the price of Civil Engineering Projects.

A Flutter app to estimate the price of Civil Engineering Projects.

Mobile application to estimate the price of Civil Engineering Projects About this Project This project was made to simplify and optimize the budgeting

Mar 18, 2021

A fully functional chat application built with Flutter and Stream

A fully functional chat application built with Flutter and Stream

🏐 SpikeChat A fully functional chat application built with Flutter and Stream! ✅ Join the chat room (If you have the secret passcode hehe) ✅ Send tex

Apr 30, 2022

A collection of packages created to increase code reuse across many of my Flutter projects.

CodeWithAndrea Flutter Packages A collection of packages, created to increase code reuse across many of my Flutter projects. They include: Wrappers fo

Dec 29, 2022

📱⏰ Mobile application for tracking projects time written in Flutter!

📱⏰ Mobile application for tracking projects time written in Flutter!

ProTime Mobile application for tracking projects time Why? This app was born from the need of a simple and minimal solution to keep track of the times

Aug 27, 2022

Fully Functioning Chat App with Flutter & Firebase

flutterchat A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Aug 26, 2022
Comments
  • Any example for nested neumorphic ?.

    Any example for nested neumorphic ?.

    I have tried many neumorph for making, but none of that working when I tried to make nested neumorphic. I never tried yours, but maybe you have some example for it.

    opened by nandaborneo 1
Owner
Aditi Ravi
Aditi Ravi
Neumorphic Sign In And Sign Up UI with no packages

Neumorphic SignIn And SignUp Watch it on YouTube Neumorphic Login UI using flutter,This project consist of two screen, SignIn Screen and SignUp Screen

Sayuj Sujeev 11 Aug 2, 2022
This is a beautiful neumorphic noticeboard app for Guru Gobind Singh Indraprastha University. This works on both Android and iOS.

GGSIPU Noticeboard App This is a beautiful neumorphic noticeboard app for Guru Gobind Singh Indraprastha University. This works on both Android and iO

Hash Studios 20 Nov 10, 2022
Tan Tien is an e-commerse mobile application, using Neumorphic design in UI to improve UX

Tân Tiến (新進)Shop App Tan Tien is an e-commerse mobile application, using Neumorphic design in UI to improve UX. About the app name: 'Tân Tiến' (新進) i

MinhHo 5 Nov 11, 2022
A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully & easily modifiable.

A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully

Muhammad Hamza 21 Jan 1, 2023
Meme Network is the creative powerhouse that supercharges your Meme projects with the World's First Layer 1 solution in the Cosmos Ecosystem.

MEME Chain How to Join MEME Mainnet Recommended system setup 4 core CPU Memory: 4GB Disk: 100GB Ubuntu 20.04 Meme Validator Node Snapshot & State-Sync

MEME Chain 10 Oct 26, 2022
A fully functional Instagram clone written in Flutter using Firebase / Firestore

Fluttergram A working Instagram clone written in Flutter using Firebase / Firestore Demo Download the release APK to try out Fluttergram I update Flut

Matthew Danics 2.1k Jan 8, 2023
Fully functional Twitter clone built in flutter framework using Firebase realtime database and storage

Fwitter - Twitter clone in flutter A working Twitter clone written in Flutter using Firebase auth,realtime,firestore database and storage. Download Ap

Sonu Sharma 2.4k Jan 8, 2023
This is a fully fledged Sudoku game written in Dart using Flutter.

This is a fully fledged Sudoku game written in Dart using Flutter.

Varun Shanbhag 56 Dec 29, 2022
A fully open source visual to-do list Flutter application.

A fully open source visual to-do list Flutter application.

Abigail Mabe 1 Oct 24, 2021
Fully Functioning Messenger (Like Whatsapp) in Flutter

HitUp Messenger A Fully Functioning Chat Messenger (like Whatsapp) built using Flutter. About the project Flutter for building the Android & IOS App.

Diganta Kalita 181 Dec 25, 2022