Use these four rules for flutter neomorphism design
1. Screen background color
backgroundColor: Colors.grey[300],
2. Container border color
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(50),
),
),
)
Here Container border color should match the screen background color
3. Shadow color
boxShadow: [
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,
),
]
You shadows should be pointing to the opposite. And they should have two different colors. And they Bottom color should be little close to the background color of the screen.
4. Show and hide shadow color with animation
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,
),
)
Complete code
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(
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,
),
),
),
),
);
}
}