Introduction

Nowadays, it is all about aesthetics and minimalistic designs. Neumorphism buttons are specially designed buttons which will give your app an aesthetic touch.

Neumorphism or Soft UI is a combination of flat design and skeuomorphism. By adding intense drop/box shadows to elements, it creates an effect that the element is able to be pushed or interacted with.

Today, we will see how we can create this UI in Flutter with the help of a container and some box shadows. So let's get started.

Basic Skeleton

First of all, create a stateful widget with any name. Then,

• Add the mandatory widget like a scaffold. Set the background color to grey[300].
• In its body attribute, add a Center widget and make a Gesture Detector its child.
• Now wrap this Gesture Detector around an animated container.
• We use Animated Container to make the transition between states smoother.
• We need a boolean which tells us if our button is elevated or not. For that use a boolean variable and inside the ontap() function of gesture detector, change its current state.
• Your code will look something like this for now.

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

  @override
  State<NeumorphismPage> createState() => _NeumorphismPageState();
}

class _NeumorphismPageState extends State<NeumorphismPage> {
  bool _isElevated = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[300],
      body: Center(
        child: GestureDetector(
          onTap: () {
            setState(() {
              _isElevated = !_isElevated;
            });
          },
          child: AnimatedContainer(),
        ),
      ),
    );
  }
}

Inside the Animated Container

This is where all our work has to be done.

• First of all, set the color of the container to grey[300].
• We have to think of generating shadows whenever our isElevated is true. So one easy way of doing is to use ternary operators.
• We will need two different shadows for two corners. One will generate a shadow effect and the other will generate a blend effect.
• We will also give our button a rounded corner to make it look more pleasing to our eyes.
• We will achieve this by adding this following piece of code in the decoration attribute of the Animated Container.

 decoration: BoxDecoration(
    color: Colors.grey[300],
    borderRadius: BorderRadius.circular(50),
    boxShadow: _isElevated
        ? [
      const BoxShadow(
        color: Colors.grey,
        offset: Offset(4, 4),
        blurRadius: 15,
        spreadRadius: 1,
      ),
      const BoxShadow(
        color: Colors.white,  // color of the shadow
        offset: Offset(-4, -4), 
        blurRadius: 15,
        spreadRadius: 1,   // how far the color effect spreads.
      ),
    ]
        : null,   // when the elevation is disabled, we won't create any effect and keep the container as it is.
  ),

That's it. Your neumorphismic button is ready and it will look exactly like this.

Looks pleasing on the eye doesn't it?

Conclusion

So this concludes our article on how to create a neumorphic button for your apps using Flutter. Here is the complete code for the same.

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.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const NeumorphismPage(),
    );
  }
}
class NeumorphismPage extends StatefulWidget {
  const NeumorphismPage({Key? key}) : super(key: key);

  @override
  State<NeumorphismPage> createState() => _NeumorphismPageState();
}

class _NeumorphismPageState extends State<NeumorphismPage> {
  bool _isElevated = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[300],
      body: Center(
        child: GestureDetector(
          onTap: () {
            setState(() {
              _isElevated = !_isElevated;
            });
          },
          child: AnimatedContainer(
  duration: const Duration(
    milliseconds: 200,
  ),
  height: 200,
  width: 200,
  decoration: BoxDecoration(
    color: Colors.grey[300],
    borderRadius: BorderRadius.circular(50),
    boxShadow: _isElevated
        ? [
      const BoxShadow(
        color: Colors.grey,
        offset: Offset(4, 4),
        blurRadius: 15,
        spreadRadius: 1,
      ),
      const BoxShadow(
        color: Colors.white,
        offset: Offset(-4, -4),
        blurRadius: 15,
        spreadRadius: 1,
      ),
    ]
        : null,
  ),
),
        ),
      ),
    );
  }
}

Press the subscribe button and never miss such articles on Flutter, Python, and DSA.