Flutter sigue las métricas de diseño de Material Design por defecto por lo tanto nos proveerá un kit de botones propios de estas métricas de diseño como: Raised Button, Floating Action Button, Flat Button, etc. Puedes personalizarlos tanto como tu diseño lo exija, esa es la magia de Flutter, veamos más detalles a continuación.
RaisedButton
Un RaisedButton lucirá de esta forma
Puedes ponerle una elevación personalizada con la propiedad elevation .
Además del color por defecto que también puedes asignar con la propiedad color también puedes definir un color que lo haga brillar mientras pones el dedo sobre él, esto con la propiedad highlightColor
Es ese botón redondo que encuentras flotando en la parte inferior de las interfaces, hoy por hoy puedes ubicarlo en cualquier zona de tu interfaz.
Tenemos dos tamaños el que es por defecto (más grande) y uno pequeño que puedes definirlo poniendo true en la propiedad mini. Un FloatingActionButton tiene una elevación definida por las métricas de diseño de Material Design pero siempre podrás cambiarla con la propiedad highlightElevation. Recuerda que este botón tiene su lugar en la propiedad floatingActionButton del Widget Scaffold.
Este tipo de Widget es uno de mis favoritos pues viene con el kit de iconos de Material Design y además tiene el comportamiento que vemos en la imagen por defecto.
📌Chicos, está clase está un poco desactualizada. Según la documentación: FlatButton, RaisedButton, y OutlineButton han sido reemplazadas por TextButton, ElevatedButton, and OutlinedButton respectivamente. FloatingActionButton y IconButton siguen activas tal y como esta clase lo dice.
Es importante revisar constantemente la documentación del lenguaje que estemos aprendiendo por estas cosas. 😄
Saludos,
Adjunto el comando de creación de proyectos de ejemplo de flutter desde la consola para revisar la funcionalidad de los botones arriba relacionados:
Está bastante completa la explicación que realiza Ann en el post, lo mejor es que ha dejado los enlaces a la documentación propia de flutter para así leer y aprender sobre los botones.
Si estos botones siguen las métricas de material design, cómo se vería en IOS que sigue las métricas de cupertino? para hacer un botón que cumpla con las dos métricas tendría que codificarlo dos veces?
El highlightElevation hace referencia a la cordenada z, o sea, podemos elegir que tan profundo o elevado esté en nuestra aplicación,aunque no le hayo mucho sentido a dejarlo debajo de los demás widgets 😛
existe fab button list? en donde yo pueda oprimir y desbplegar buttons hijos obviamente de ese mismo estilo y si se vuelve a presionar se recoga esta lista
en esta página que ya han compartido antes pueden conocer “los estándares” y recomendaciones de la implementación así como ejemplos visuales, está genial: https://material.io/components/buttons#text-button
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.