Flutter es un framework desarrollado por Google que permite crear aplicaciones para Android, iOS, Web, Windows, Linux y macOS utilizando un solo código fuente.
Permite desarrollar aplicaciones multiplataforma de forma rápida y eficiente.
Se utilizó Flutter para crear la interfaz gráfica y consumir datos desde una API.
Dart es el lenguaje de programación utilizado por Flutter.
Permite desarrollar toda la lógica de la aplicación.
Se utilizó Dart para programar la obtención de datos desde MockAPI y mostrarlos en pantalla.
Una API (Application Programming Interface) es un servicio que permite que dos aplicaciones se comuniquen entre sí.
Permite solicitar o enviar información entre sistemas.
La aplicación Flutter solicita usuarios y la API responde con esos datos.
MockAPI es una plataforma que permite crear APIs simuladas para realizar pruebas y prácticas.
Permite trabajar con datos sin necesidad de crear un servidor real.
Se utilizó para almacenar usuarios y obtenerlos desde Flutter.
JSON (JavaScript Object Notation) es un formato utilizado para intercambiar información entre aplicaciones.
[
{
"id": "1",
"name": "Juan"
}
]Permite transportar datos de forma organizada.
La API devuelve los usuarios en formato JSON.
HTTP (HyperText Transfer Protocol) es el protocolo utilizado para la comunicación entre aplicaciones y servidores.
Permite enviar y recibir información por Internet.
Se utilizó para solicitar los usuarios almacenados en MockAPI.
http: ^1.2.1Es una dependencia de Flutter.
Permite realizar peticiones a APIs.
- GET → Obtener datos.
- POST → Agregar datos.
- PUT → Actualizar datos.
- DELETE → Eliminar datos.
Los Widgets son los componentes básicos de Flutter.
Permiten construir toda la interfaz gráfica.
- Text
- Button
- AppBar
- ListView
- Scaffold
Todo lo que se ve en pantalla es un Widget.
Es un Widget que no cambia durante la ejecución.
Se utiliza cuando la información mostrada es fija.
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context){
return const MaterialApp(
home: Center(
child: Text('hola mundo'),
),
);
}
}void main() {
runApp(
const MyApp(nombre: "Juan"),
);
}
class MyApp extends StatelessWidget {
final String nombre;
const MyApp({super.key, required this.nombre});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Text("Hola $nombre"),
),
),
);
}
}- No tiene variables que cambien con
setState(). - No administra su propio estado.
- Depende de los datos que recibe.
Es un Widget que puede cambiar durante la ejecución.
Permite actualizar la pantalla cuando cambian los datos.
Se utilizó porque los usuarios llegan desde la API.
- Tiene estado propio.
- Puede usar
setState(). - Puede cambiar la interfaz desde dentro del widget.
MaterialApp es el widget principal que envuelve toda la aplicación Flutter y aplica las características de Material Design de Google.
- Configura la aplicación.
- Define la pantalla inicial.
- Permite configurar temas y colores.
- Gestiona la navegación entre pantallas.
Scaffold es la estructura básica de una pantalla Flutter.
Organiza elementos como:
- AppBar
- Body
- Botones
- Menús
- Navegación
Es considerado el "esqueleto" de una pantalla.
Es la barra superior de una aplicación.
Permite mostrar títulos y acciones.
AppBar(
title: Text("MockAPI")
)Es un Widget que muestra texto.
Text("Hola Mundo")Permite mostrar información al usuario.
Es un Widget que crea un botón.
Permite ejecutar acciones cuando el usuario hace clic.
Se utiliza para obtener los usuarios desde la API.
Es un Widget que muestra listas desplazables.
Permite mostrar grandes cantidades de información.
Es una versión dinámica de ListView.
Genera automáticamente los elementos de una lista.
Genera una fila por cada usuario recibido desde la API.
Es un Widget que representa una fila dentro de una lista.
Permite mostrar información organizada.
ListTile(
title: Text("Juan")
)Es un método que actualiza la interfaz gráfica.
Le indica a Flutter que los datos cambiaron.
Actualiza la pantalla cuando llegan los usuarios desde la API.
Es una función de Dart.
Convierte datos JSON en objetos que Flutter puede utilizar.
Convierte:
[
{
"name":"Juan"
}
]en una lista de Dart.
Future representa una tarea que tardará un tiempo en completarse.
Permite trabajar con operaciones que no son inmediatas.
Obtener información desde Internet.
Permite que una función trabaje de forma asíncrona.
Evita que la aplicación se bloquee mientras espera una respuesta.
Permite esperar el resultado de una operación asíncrona.
await http.get(...)Espera la respuesta de la API antes de continuar.
Es una solicitud utilizada para obtener información.
http.get(...)Permite solicitar datos a un servidor o API sin modificar la información almacenada.
Se utiliza para obtener la lista de usuarios almacenados en MockAPI.