Flutter Neumorphism Button | The Best Way

how to create a button with a new morphism design in flutter we start with the blue container that we also make rounded next we replace this blue background color of the container by the background color of the whole page and lastly we want to make this container again visible therefore neomorphism uses shadows we create one darker shadow at the bottom right corner also add a blur effect to soften the shadow and next to the dark shadow we create a lighter highlight shadow at the top left corner again we give the shadow a blur effect and with this we have the elevated version of the neomorphic button next we make the blur radius and offset more dynamic by placing them inside some fields we also replace the outer drop shadows by inner shadows that are displayed within the container widget with these inner shadows we create the press state of our button so we also change the blur effect and the offset of our button if the button is pressed lastly we need to change this boolean field by wrapping a gesture detector around our container that toggles this is press boolean field also if the button is pressed then we have the inner shadow otherwise the outer shadow with this if we click on this button we go to the elevated or inset state of the button replace your container by an animated container as a result the change of our button is animated next we create a dark mode flag with which we change the background color and also we change both shadow colors with this we have a dark mode neumorphism button for a button that has no selected state we replace the gesture detector by a listener with this if i click short on this button it is always going back to this elevated state optionally if the button is pressed you can completely hide the shadows you could also use this website to generate a new morphism button simply set from which side your light source is coming from and then you can change the radius the distance and also the intensity of your shadows and lastly only copy the code and simply paste this code into your flutter project [Music]

Channel: HeyFlutter․com

Views: 42,742

Keywords: animation flutter, flutter, flutter animated button, flutter animation, flutter box shadow inset, flutter button animation, flutter neumorphic, flutter neumorphic button, flutter neumorphic design, flutter neumorphic shadow, flutter neumorphism button, flutter neumorphism inner shadow, flutter neumorphism ui, flutter tutorial, flutter widget, neumorphic, neumorphism flutter, neumorphism flutter generator

Id: A2Bbhr3DGd0

Length: 2min 20sec (140 seconds)

Published: Fri Mar 25 2022