¿Alguna vez has querido agregar contenido dinámico a tu aplicación Flutter? ¡Aquí te muestro cómo hacerlo con una API para obtener frases inspiradoras en tiempo real!
Paso 1: Configuración Básica
Lo primero que hacemos es configurar un proyecto Flutter sencillo. La estructura básica incluye un MyApp que inicializa la aplicación con un tema atractivo usando Material 3 y un esquema de colores púrpura profundo
void main() {
runApp(const MyApp());
}
Paso 2: La Magia del FutureBuilder
En la pantalla principal, estamos utilizando un FutureBuilder para manejar las llamadas a la API. Este widget es súper útil cuando quieres mostrar datos que provienen de una fuente externa, como una API. Dependiendo del estado de la conexión (waiting, hasError, hasData), el FutureBuilder mostrará un indicador de carga, un mensaje de error o los datos que recibimos.
FutureBuilder(
future: freaseApi(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(child: CircularProgressIndicator());
} else if (snapshot.hasError) {
return const Text('Datos no disponibles');
} else if (snapshot.hasData) {
final frase = snapshot.data!['frase'];
final autor = snapshot.data!['autor'];
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"'$frase",
style: const TextStyle(
fontSize: 15.0,
color: Colors.red,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
const SizedBox(
height: 15.0,
),
Text("'$autor".toUpperCase()),
],
);
} else {
return const Text('INFORMACION NULA');
}
},
),
-
Paso 3: Consumiendo la API
El corazón de esta pequeña app está en la función
freaseApi(), que utilizahttppara obtener datos de una API (¡asegúrate de tener la funciónfreaseApi()en el archivoapi.dart!).
-
Paso 4: La Función
freaseApi()La función
freaseApi()es el corazón de nuestra app, encargada de conectarse a una API para obtener una frase y su autor.-
Conexión a la API: Utiliza el paquete
httppara hacer una solicitud GET a la API que nos dará la frase del día.
-
final respuesta = await http.get(Uri.parse('https://frasedeldia.azurewebsites.net/api/phrase'));
Procesamiento de la Respuesta:
Si la solicitud es exitosa (statusCode == 200), decodifica la respuesta JSON para extraer la frase y el autor.
if (respuesta.statusCode == 200) {
final jsonData = jsonDecode(respuesta.body);
return {'frase': jsonData['phrase'], 'autor': jsonData['author']};
}
Manejo de Errores:
Si la solicitud falla, se lanza una excepción para manejar el error.
else {
throw Exception('NO conectado');
}
Resultado Final: ¡Frases con Estilo!
Cuando la aplicación se ejecuta, ves una frase motivacional junto con su autor. Todo está envuelto en un diseño sencillo pero elegante, con textos que destacan en la pantalla.
Si quieres saber más sobre este proyecto o tienes preguntas, ¡déjamelo saber en los comentarios!
💻 Código fuente ( GIT HUB ): https://github.com/tinguar/BLOG/tree/main/flutter/api
