📌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. 😄
Bienvenida e Introducción
Desarrollando en Flutter
¿Qué es Flutter?
Dart y Flutter
Sintaxis de Dart
Flutter para desarrolladores Android, iOS y Xamarin.forms
Flutter para desarrolladores React Native
¿Cómo luce una app construída en Flutter?
Primer reto
Creando mi entorno de desarrollo
Requerimientos de Hardware y Software
Instalando Flutter en Android Studio y Visual Studio Code
Composición de un proyecto en Flutter
Interfaces en Flutter
Programación Declarativa en Flutter
Estructura de un programa en Flutter
Hola Mundo en Flutter
Widgets básicos
Widgets con estado y sin estado
Análisis de Interfaces de Usuario en Flutter
Definiendo los layouts de nuestra interfaz
Segundo reto
Widgets sin estado en Flutter
Flutter Widgets: Container, Text, Icon, Row
Flutter Widgets: Column
Recursos en Flutter: Tipografías y Google Fonts
Widget Image
Widget Apilando Textos
Widgets Decorados
Widget Imagen Decorada
Widget Listview
Widget Button, InkWell
Tercer reto
Widgets con estado en Flutter
Botones en Flutter
Clase StatefulWidget: Cómo se compone
Widget Floating Action Button
Widgets BottomNavigationBar
Generando Navegación en BottomNavigationBar
Personalizando nuestro BottomNavigation Bar a Cupertino iOS BottomBar
Cuarto reto
Fin del Curso
Conclusiones
¡Terminamos!
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
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.
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.
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.
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:
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!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.