Neumorphism design tutorial
Neumorphism design is a UI element that uses shadow for elevation and looks 3d. we can use containers for this type of Neumorphism design In the container inside the box decoration, we take two opposite sides. one in front of the light and create a shadow on the other side.
We can make a neomorphism design without any use of plugins and packages, With the help of the flutter widgets.
let's do some code
First, create the stateless class
import 'package:flutter/material.dart';
the class neuromorphic design extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
),
);
}
}
add scaffold and change the background color or add box decoration and shadow to the container, like that shown below code.
Scaffold(
backgroundColor: Colors.grey[300],
body: Center(
child: Container(
decoration:
BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(50),
boxShadow: const [
// Shadow for top-left corner
BoxShadow(
color: Colors.grey,
offset: Offset(10, 10),
blurRadius: 6,
spreadRadius: 1,
),
// Shadow for bottom-right corner
BoxShadow(
color: Colors.white12,
offset: Offset(-10, -10),
blurRadius: 6,
spreadRadius: 1,
),
]
),
),
),
);
After this, you can create Neuromorphism designs.
gfhhghgg
ReplyDelete