Neumorphism in Flutter
Last Updated :
11 Apr, 2022
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());
}
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(),
);
}
}
|
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(
backgroundColor: Colors.grey[300],
body: Center(
child: Container(
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(
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: [
const BoxShadow(
color: Colors.grey,
offset: Offset(10, 10),
blurRadius: 6,
spreadRadius: 1,
),
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.
Share your thoughts in the comments
Please Login to comment...