Home Flutter Flutter Neumorphism – 3D Button

Flutter Neumorphism – 3D Button

Flutter Neumorphirm - 3D Button.
Flutter Neumorphirm - 3D Button.

Hi Guy’s Welcome to Proto Coders Point, In this Flutter Article let’s learn How to Create Neuporphism button.

Neumorphism in Flutter

Flutter Neomorphism is an UI element that is created by applying Shadows to give a Elevation effect to any Widget.

Let’s Understand neumorphism with a container, Two opposite edges, On is in front of light source while another is opposite, This create a shadow on the other end of the container.

In this Article we will give a neumorphism effect to a container making it a 3D button in flutter.

Complete Source Code – Flutter Neumorphic Button

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  var darkColors = Color(0xFF000A1F);
  var lightColors = Color(0xFF5A86EA);
  var isPressed = false;
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.indigo,
        body: Center(
          child: GestureDetector(
            onTapUp: (val){
              setState(() {
                isPressed = false;


            onTapDown: (val){
              setState(() {
                isPressed = true;

            child: AnimatedContainer(
              duration: Duration(milliseconds: 100),
              width: 200,
              height: 200,
              padding: EdgeInsets.all(20.0),
              decoration: BoxDecoration(
                color: darkColors,
                borderRadius: BorderRadius.circular(20.0),
                boxShadow: isPressed ? null : [
                  BoxShadow(color: Colors.white,offset: Offset(-3,-3),blurRadius: 10.0,spreadRadius: 3.0),
                  BoxShadow(color: darkColors,offset: Offset(3,3),blurRadius: 10.0,spreadRadius: 3.0)
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    isPressed ? lightColors : darkColors,
                    isPressed ? darkColors : lightColors

So, In above flutter code, we have a square shaped AnimatedContainer at the center of the screen.

In the container widget we will use decoration: property with BoxDecoration to make the normal container a neumorphism container.

In BoxDecoration, We are using:

  • color: To give color to the container.
  • borderRadius: To give a Circular Radius to the container.
  • boxShadow: To Apply a meumorphism shadow effect to the container.
  • gradient: linear gradient from topLeft to bottonRight a light & dark color gredient effect.

That make a normal container a neumorphism container & then to give a click/onTop feel I have Simply wrapped the AnimatedContainer with GestureDetector & make few changes in color when user tap by using onTapUp() & onTopDown() methods.

Video Tutorial