Neumorphism in Flutter

Neumorphism is a UI element that uses shadows to create an Elevation effect. Two opposite edges of the container are considered, one in front of a source of light while another opposite. This creates a shadow on the other side of the container.  This gives our widget an elegant and clean look. So to create a Neumorphic design we will first create a stateless widget in flutter and name it as NeumorphicDesign. 

In this article, we will look at an interesting UI element called Neumorphism. We will look at how we can modify our basic container in Flutter to a Neumorphic container that we can use in our app. Also, we will be using the Flutter container to create Neumorphism, and VS Code to create the Flutter application. 

Dart

import 'package:flutter/material.dart';

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

// Root widget of your app
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const NeumorphicDesign(),
    );
  }
}

class NeumorphicDesign extends StatelessWidget {
  const NeumorphicDesign({Key? key}) : super(key: key);
  // Write your widget here
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(),
    );
  }
}

First of all, let’s give background color to our app. As we have only created a container, when we run the app we will only see a blank screen as Container itself doesn’t contain anything. So let’s give some height and width to our Container. Also by wrapping Container using Centre we can make it the center of our app.

Dart

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return Scaffold(
      // Background color to the app
      backgroundColor: Colors.grey[300],
      // Widget to center the widgets inside it.
      body: Center(
        child: Container(
            // Providing Container
              // with height and width
            height: 200.0,
            width: 200.0,
        ),
      );
    }
}

To change color or to assign borderRadius to a Container we need to use BoxDecoration.

Constructor of BoxDecoration class:

Dart

BoxDecoration({
    this.color,
    this.image,
    this.border,
    this.borderRadius,
    this.boxShadow,
    this.gradient,
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,
)}

We will be making use of borderRadius and boxShadow for customizing our Container.

Dart

Container(
  height = 200.0,
  width = 200.0,
  decoration: BoxDecoration(
    // Providing container with rounded corners.
    borderRadius: BorderRadius.circular(50),
  ),
),

Now to make a Neumorphic widget first the widget’s color should be the same as the background color. And the separation of the widget from its background is created using the boxShadow parameter of BoxDecoration. To create the design let us consider the top-left corner of our app as a source of light. When it falls on our Container, the top-left corner will be directly in front of light while the bottom-right corner will be opposite of light, which means we have to select a light shade for the top-left while the dark shade of background for the bottom-left corner. So by this logic, we will give shadows to our container. With the help of blurRadius we can control the haziness of shadows.

Dart

BoxDecoration(
  color: Colors.grey[300],
  borderRadius: BorderRadius.circular(50),
  boxShadow: [
    // Shadow for top-left corner
    const BoxShadow(
      color: Colors.grey,
      offset: Offset(10, 10),
      blurRadius: 6,
      spreadRadius: 1,
    ),
    // Shadow for bottom-right corner
    const BoxShadow(
      color: Colors.white12,
      offset: Offset(-10, -10),
      blurRadius: 6,
      spreadRadius: 1,
    ),
  ]
),

Note: Here Offset(+ve, +ve) means bottom-left corner, while Offset(-ve, -ve) means top-right corner for position of shadow.

Complete Code:

Dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const NeumorphicDesign(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 200,
        width: 200,
        padding: EdgeInsets.all(8),
        child: Image.asset(
          "assets/gfg.png",
        ),
        decoration: BoxDecoration(
          color: Colors.grey[300],
          borderRadius: BorderRadius.circular(50),
          boxShadow: [
            const BoxShadow(
              color: Color(0xFFBEBEBE),
              offset: Offset(10, 10),
              blurRadius: 30,
              spreadRadius: 1,
            ),
            const BoxShadow(
              color: Colors.white,
              offset: Offset(-10, -10),
              blurRadius: 30,
              spreadRadius: 1,
            ),
          ]
        ),
      ),
    );
  }
}

Output:

So in this article, we saw how we can give Flutter Container Neumorphic style to make better UI elements.