Curso de Flutter

Curso de Flutter

Anahí Salgado Díaz de la Vega

Anahí Salgado Díaz de la Vega

Botones en Flutter

30/38

Lectura

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

Captura de pantalla 2018-12-28 a la(s) 13.11.15.png

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

Puedes encontrar la documentación completa aquí (https://docs.flutter.io/flutter/material/RaisedButton-class.html)

FloatingActionButton

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.

Captura de pantalla 2018-12-28 a la(s) 13.12.02.png

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.

Esta es la documentación completa (https://docs.flutter.io/flutter/material/FloatingActionButton-class.html)

FlatButton

Existe también FlatButton que a simple vista puede parecer un enlace, algo que ubicaríamos muy fácilmente en la web.

Captura de pantalla 2018-12-28 a la(s) 13.12.54.png

Puedes cambiarle el color con la propiedad color y modificarlo tanto hasta llevarlo a ser un RaisedButton

Mira todo en la documentación: https://docs.flutter.io/flutter/material/FlatButton-class.html

IconButton

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.

Captura de pantalla 2018-12-28 a la(s) 13.13.42.png

Aquí encuentras las propiedades de este tipo de botón https://docs.flutter.io/flutter/material/IconButton-class.html

Aportes 39

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

📌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:

flutter create --sample=material.RaisedButton.1 raised_button_example_1
flutter create --sample=material.FloatingActionButton.1 floating_action_button_1
flutter create --sample=material.FloatingActionButton.2 floating_action_button_2
flutter create --sample=material.IconButton.1 icon_button_1
flutter create --sample=material.IconButton.2 icon_button_2

Tenemos todas las piezas del lego, solo tenemos que aprender a encajarlas.

Perfecto para uso de manera inmediata.

Genial!

Muy buenos!

Genial!

Git-hub
Mi version del reto

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.

Flutter es algo maravilloso ❤

Banco fuerte a Flutter

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?

Genial!Genial!Genial!Genial!

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 😛

(Y)

Genial 😄

una buena gama de botones para empezar a diseñar una súper app!

Muy bien!

Muy buen aporte, gracias!

Muy facil trabajar con fluter, que divertido

Gracias! 😄

Excelente! 😎

muy buenas las referencias!

Muy divertido trabajar con Flutter.

Interesantes,

Buen Aporte Muchas Gracias

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

gracias por los aportes!

que bueno el icon buton justo estaba pensando como lograr eso a partir de un flat button

Un muy buen aporte 😃

Qué buen aporte !!!
Gracias

genial

Interesante versatilidad.

😃

throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")

me sale este error? alguna solucion

Waaao! Así sea una clase de lectura, Flutter no te deja de impresionar.

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

A seguirle!