En la entrada anterior hablamos de como instalar Flutter, de cual IDEs podemos emplear que básicamente serían Android Studio y/o Visual Studio Code y también dimos una introducción al mundo de los widgets en Flutter creando una tarjeta que en realidad es un Widgets con algo de contenido, texto e imágenes que son widgets también; para ver la entrada puedes ir al siguiente enlace:
Primeros pasos con Flutter desde cero: Mi primera aplicación.
Hoy vamos a seguir trabajando en Flutter pero vamos a ver directamente un elemento que es indispensable en cualquier interfaz, el elemento para procesar acciones por excelencia como lo es el botón, y que el Flutter es el realidad un widgets; lo cual va perfectamente bien con las Cards o Cartas que vimos anteriormente en otra entrada en Android con Java/Kotlin.
Los botones en Flutter
Flutter como cualquier tecnología emergente, quiere hacerse con un hueco en el mercado y por tal motivo el framework contiene una gran cantidad de botones que nosotros podemos emplear en nuestras aplicaciones; y los botones no se quedan atrás; en esta entrada te traigo los principales botones que tenemos y podemos emplear en nuestras aplicaciones; existen otros tipos de botones como el del botón para una barra: Button Bar, pero estos no lo trataremos en esta entrada al ser un botón muy específico y que nos sirve más para contenedor que para otra cosa.
Así que en este punto te presento los botones más interesantes que podemos emplear en nuestra aplicación y te doy un resumen de las mismas; aunque lo ideal es que tomes este contenido de referencia y se soporte y tu mismos veas y pruebes los botones en tus aplicaciones, que veas el total de las propiedades que podemos configurarles a los botones y no solo un resumen.
Floating Action Button o Botón de Acción Flotante en Flutter
El primer botón que veremos, es el famoso Botón Flotante de Android del Material Desing que lo podemos implementar fácilmente en Flutter empleando un widget:
FloatingActionButton( child: Icon(Icons.access_time), elevation: 50.0, backgroundColor: Colors.amber, ),Como puedes ver, con este widget podemos crear un botón de acción flotante o el Float Action Button; podemos definir un color de fondo, como un suave anaranjado como el que colocamos aquí, así como un ícono e inclusive podemos definir la elevación para definir el sombreado, que es un aspecto fundamental en el Material Desing.
Recuerda que todos estos son componentes o widgets en Flutter, tienen características similares y únicas con respecto a todo el abanico de widgets que existen el Flutter pero todos en esencia son widgets; por lo tanto no esperes que se posicione de manera automática en una de las esquina de tu pantalla.
Para crear un botón en Flutter tenemos que emplear las siguientes líneas de código
RaisedButton(
child: Text("Back"),
onPressed: () => Navigator.pop(context),
)
La propiedad onPressed está disponible para todos los botones en general, y para saber qué propiedades puedes emplear en cada uno de los botones en Flutter, ya que tienen sus variantes, puedes consultar la documentación oficial o el autocompletado de Android Studio o Visual Studio Code.
Raised Button en Flutter
El Raised Button, es un botón clásico en Flutter, sería el Button por defecto que tenemos en Android; así de simple; aquí podemos ver algunas de las propiedades que puede tomar; para definir el color de fondo, o el splashColor y por supuesto el texto y los demás elementos que ya se hacen reiterativos aquí:
RaisedButton( disabledColor: Colors.amber, child: Text("Raised Button"), splashColor: Colors.amber, color: Colors.blueAccent, onPressed: () { print("Hola Raised Button") }, ),Como puedes ver, tenemos varias propiedades reflejadas en la líneas de código anterior, aunque no son todas, tenemos para indicar el color del botón, le definimos el texto mediante un widget, el color de texto y nuevamente definimos una función para el evento clic.
Flat Button en Flutter
Los siguientes botones que vamos a ver se conocen como FlatButton que son botones sencillos, al mismo estilo que tienen los botones en iOS los tenemos en Flutter; de los mismos podemos modificar aspectos como la letra, su color, tamaño y tipo; pero fijate que son botones sencillos sin color de fondo, para estos casos existen otros botones como puedes ver en nuestra publicación:
FlatButton( child: new Text('Flat Button'), )
Material Button en Flutter
Los Material Button son los botones para el Material Design que podemos ver en Android, son la norma hoy en día para el desarrollo de aplicaciones para Android que sean modernas; como puedes ver con poco más de lo que definimos aquí:
MaterialButton(
minWidth: 200.0,
height: 40.0,
onPressed: () {},
color: Colors.lightBlue,
child: Text('Material Button', style: TextStyle(color: Colors.white)),
),
Tenemos un botón de color azul con la característica onda que ocurre sobre nuestros botones y que se llama ripple en nuestra aplicación; prácticamente a todos los botones les podemos definir sus dimensiones con los atributos de width y height y además del color del texto y en algunos casos en de fondo también y el resto de las propiedades que ves aquí; de igual manera para obtener la lista completa puedes verla desde la documentación oficial o del mismo IDE.
Como puedes ver, hay un botón para todo, si no tiene espacio suficiente en tu app y quieres señalar una función importante en tu app, pues usa un Float Action Button, si quieres un botón que luzca y de un buen diseño a tu app, emplea un Material Design Button, y para tener un botón sencillo que no llame mucho la atención puedes emplear un Icon Button o un Flat Button, para un diseños clásico un Raised Button te vendría bien.
Finalmente, te dejo todo el código de la aplicación para que la puedas ejecutar tu mismo y realizar todas las pruebas que desees:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('MiLista2'),
),
body: Card(
child: Center(
child: Column(
children: <Widget>[
Image.asset('assets/codeigniter.png'),
Text("Curso en CodeIgniter"),
IconButton(
icon: Icon(Icons.access_alarms),
tooltip: "Mensaje",
),
FloatingActionButton(
child: Icon(Icons.access_time),
elevation: 50.0,
backgroundColor: Colors.amber,
),
MaterialButton(
minWidth: 200.0,
height: 40.0,
onPressed: () {},
color: Colors.lightBlue,
child: Text('Material Button',
style: TextStyle(color: Colors.white)),
),
RaisedButton(
disabledColor: Colors.amber,
child: Text("Raised Button"),
splashColor: Colors.amber,
color: Colors.blueAccent,
onPressed: () {
print("Hola Raised Button");
},
),
FlatButton(
child: new Text('Flat Button'),
)
],
),
),
),
),
);
}
}
Finalmente, nuestra aplicación luce los botones que puedes ver en la imagen promocional.
Por supuesto, aquí te dejamos enlaces a la documentación oficial:
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter