{"id":277,"date":"2020-08-09T18:43:14","date_gmt":"2020-08-09T23:43:14","guid":{"rendered":"https:\/\/80bits.blog\/?p=277"},"modified":"2020-08-10T20:07:46","modified_gmt":"2020-08-11T01:07:46","slug":"flutter-botones-estilo-neumorphic","status":"publish","type":"post","link":"https:\/\/80bits.blog\/index.php\/2020\/08\/09\/flutter-botones-estilo-neumorphic\/","title":{"rendered":"Flutter. Botones estilo neumorphic."},"content":{"rendered":"\n

Dise\u00f1o con estilo neumorfico en flutter.<\/p>\n\n\n\n

Para los que no conocen el dise\u00f1o neumorphic o neumorfico como me parece que le llaman en espa\u00f1ol, es un estilo en el que los elementos parece que se funden con el fondo y se trata del estilo de color de toda la pantalla.<\/p>\n\n\n\n

A diferencia del estilo de dise\u00f1o skeuomorphism o eskeumorfico en espa\u00f1ol donde los elementos tratan de adoptar un estilo que se parece mas al mundo real, el neumorfismo trata de hacer casi todo lo contrario.<\/p>\n\n\n\n

Ejemplos de dise\u00f1os<\/h2>\n\n\n\n
\"calculadora
Calculadora de iPhoneOS<\/figcaption><\/figure><\/div>\n\n\n\n
\"ejemplo
Calculadoras neumorfica<\/a>s<\/figcaption><\/figure><\/div>\n\n\n\n

Como pueden observar los estilos son bastante opuestos<\/p>\n\n\n\n

Botones neumorficos con flutter<\/h2>\n\n\n\n

Quise replicar este estilo con flutter, la idea era hacer algo sencillo y r\u00e1pido y que se vieran bien, y aqu\u00ed esta el resultado.<\/p>\n\n\n\n

\"Screen
Ejemplo de estilo neumorfico<\/figcaption><\/figure><\/div>\n\n\n\n

Como pueden ver no me quise complicar mucho y aplique simplemente el mismo dise\u00f1o, si el bot\u00f3n era redondo, rectangular o con borders redondeados.<\/p>\n\n\n\n

C\u00f3digo<\/h3>\n\n\n\n
\"screeshot
C\u00f3digo <\/figcaption><\/figure>\n\n\n\n

La idea es sencilla, tan solo hay que agregar sombras con blur a ambos lados, lo que b\u00e1sicamente seria las “luces” del dise\u00f1o, y se vera algo como esto.<\/p>\n\n\n\n

\"Screenshot_neumorphic_quarter\"<\/figure><\/div>\n\n\n\n

Para poder agregar este tipo de sombras en flutter hay que hacerlo dentro de un container como se ve en el screenshot del c\u00f3digo, y toda la magia lo hace la propiedad BoxShadow<\/em>.<\/p>\n\n\n\n

[\nBoxShadow(\ncolor: Colors.white,\noffset: Offset(-4, -4),\nblurRadius: 5,\nspreadRadius: 2),\nBoxShadow(\ncolor: Colors.grey.shade300,\noffset: Offset(4, 4),\nblurRadius: 5,\nspreadRadius: 1)\n]<\/pre>\n\n\n\n
Otra cosa sobre es estilo es que se necesita que el fondo del bot\u00f3n tenga el mismo color que el fondo de la pantalla, en este caso es: Color(0xFFF4F4F4)<\/em>, lo dem\u00e1s es ir probando las variaciones de los colores dentro del BoxShadow para ir viendo con que colores contrasta mejor.<\/p>\n\n\n\n
El c\u00f3digo anterior es el que hace toda la magia en flutter, este c\u00f3digo es muy b\u00e1sico y no esta implementado por ejemplo que cuando se le de click al bot\u00f3n, este cambie de dise\u00f1o a un dise\u00f1o “hundido”, pero eso se puede hacer de manera sencilla con un widget<\/em> de tipo state<\/em> y cambiando el dise\u00f1o cuando se haga click.<\/p>\n\n\n\n
Les comparto el c\u00f3digo, cualquier sugerencia o aportaci\u00f3n no duden en comentarla o hacer un fork del mismo.<\/p>\n\n\n\n
C\u00f3digo en Gihub<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Ejemplo en flutter de botones con estilo neumorfico, codigo en github. Funciona en iOS y android. Se libre de modificarlo<\/p>\n","protected":false},"author":1,"featured_media":286,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[21,23,22],"tags":[8,48,6,25,24,9],"class_list":["post-277","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dart","category-flutter","category-frameworks","tag-android","tag-app","tag-apps","tag-dart","tag-flutter","tag-ios"],"jetpack_featured_media_url":"https:\/\/80bits.blog\/wp-content\/uploads\/2020\/08\/neumorphic_flutter_example.jpg","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/posts\/277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/comments?post=277"}],"version-history":[{"count":25,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/posts\/277\/revisions"}],"predecessor-version":[{"id":309,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/posts\/277\/revisions\/309"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/media\/286"}],"wp:attachment":[{"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/media?parent=277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/categories?post=277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/tags?post=277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}