Flutter Neumorphism Button

This is how to make a Neumorphism button animation with Flutter. This is a neumorphic design button. Building this with dart is super simple. You just need to create shadows for the AnimatedContainer widget, wrap all this with a gesturedetector widget and voila. You might know this FlutterMapp as the Flutter Tips and Tricks channel or the top flutter widget or top flutter animations or top flutter update or Flutter UI desing but on this video we make only 1 Neumorphism ui animation design that you can use as a futuristic flutter button. This is how to make cool animation with flutter and dart in a very easy way.

LINK

COURSES

OVERVIEW
0:00​ Flutter Neumorphism animation button
0:10​ Setup the background
0:20 Function
0:30 Neumorphism Button shape
0:40 Neumorphic Button elevation
0:50 Neumorphism final shape
1:00 Flutter Logic
1:10 AnimatedContainer
1:20 Next Flutter video to watch

MISSION
Our mission at Flutter Mapp (Flutter Mobile App) is to help purpose driven Flutter developers go full-time doing what they love and making an impact through coding. We achieve this with useful Flutter tips and straight to the point Flutter videos.

RECOMMENDED

DISCORD

SOCIAL MEDIA:

CONTACT

#FlutterMapp
#creatornow
#Flutter

[mohammadhasan]

Nice short tutorial. Thanks!!

I paste the code here, in case anyone needs it.


import

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

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

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

@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,
),
),
),
),
);
}
}

[GnomePuntTrainerYT]

This is a really nice tutorial, but I think it glosses over the most important part of the neumorphism design philosophy, and that is that the buttons should imitate the kind of latex rubber feel of a real button, so instead of !_isElevated removing the styling completely, it should invert the shadows and make then inner shadows instead.

[ryk]

Oh wow. This looks great and its so easy. Gonna try to implement it somewhere :D

[esentakos]

Aweseome demonstration of how flexible and powerful Flutter is <3

[ecoman]

I first saw this on dribble, I'm so glad you made a video on it!
Now I get to try it out

[emelinepal]

Omg ! So smooth and amazing, cant wait to try it

[capt_naman_gor]

Was thinking of doing this myself but saw your video! And the joy was immense! Thank you for making this video!🤟🏻😀

[Aspiiire]

Wow super beautiful especially with the animation!! 😀

[HarveyJoness]

Damn dude, I admire when you teach so clean like that.

[joelmoreira]

I just discovered your channel and this kind of Flutter short videos are awesome, new sub 👍

[TheAtom]

Thats what make flutter is make things looks like a bit 3d but also that nice 2d style that makes is look like a marshmallow or things like that like puffy is like One UI.

[petroniobonavides]

Awesome!!? Going to project, to apply this tip RIGHT NOW!!!

[Tyrone-Ward]

Good tutorial. I’ve never used Flutter before, but that looks like what JS developers call a Pyramid of Doom.

[ilyasayusuf]

that's a nice one, animation work automatically on flutter.

in RN i have to put AnimatedValue inside a transfrom style, kinda like css.

[naqeebmaqsood]

This series should have a name "flutter made easy for you" 😍
And i still hope and pray that you find success in your investment plan ❤️

[felixst-gelais]

esti c'est donc bein cool comme effet