0% encontró este documento útil (0 votos)
126 vistas2 páginas

Conceptos Básicos de Flutter

El documento introduce conceptos básicos de Flutter como widgets, ciclo de vida de widgets, manejo de estado y eventos, y provee un ejemplo simple de una interfaz de usuario con texto y botón.

Cargado por

Harry Gutierrez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
126 vistas2 páginas

Conceptos Básicos de Flutter

El documento introduce conceptos básicos de Flutter como widgets, ciclo de vida de widgets, manejo de estado y eventos, y provee un ejemplo simple de una interfaz de usuario con texto y botón.

Cargado por

Harry Gutierrez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 2

2.

Conceptos básicos de Flutter

Flutter es un framework de desarrollo de aplicaciones móviles de código abierto desarrollado por Google. Utiliza el lenguaje de programación Dart y permite construir
interfaces de usuario rápidas, bonitas y nativas para iOS, Android y la web.

Antes de adentrarnos en el patrón Bloc, es importante tener una comprensión básica de los siguientes conceptos de Flutter:

Widgets: En Flutter, todo es un widget. Los widgets son los bloques de construcción fundamentales de las interfaces de usuario en Flutter. Pueden
representar elementos visuales como botones, imágenes, cajas de texto, etc., así como también pueden ser utilizados para estructurar el diseño de la interfaz
de usuario.

Ciclo de vida de los widgets : Los widgets en Flutter tienen un ciclo de vida. A medida que la aplicación se ejecuta, los widgets pueden ser creados,
actualizados o destruidos en respuesta a diferentes eventos. Comprender el ciclo de vida de los widgets es esencial para administrar el estado y garantizar
un rendimiento óptimo de la aplicación.

Manejo de estado en Flutter : Flutter ofrece diferentes enfoques para manejar el estado de la aplicación. Esto es importante porque el estado es fundamental
para mostrar datos actualizados y responder a eventos. Algunas opciones populares para el manejo de estado en Flutter incluyen el uso de setState ,
InheritedWidget , Provider y, por supuesto, el patrón Bloc.

Eventos y notificaciones en Flutter: Los eventos y las notificaciones son mecanismos que permiten la comunicación y la propagación de información en la
jerarquía de widgets. Por ejemplo, cuando se presiona un botón, se genera un evento que puede desencadenar una acción específica en la aplicación.
Comprender cómo manejar eventos y notificaciones es esencial para interactuar con la interfaz de usuario y controlar el flujo de datos.

Ahora que tienes una idea general de los conceptos básicos de Flutter, veamos un ejemplo sencillo que muestra cómo construir una interfaz de usuario básica con
un botón y un texto.

Ejemplo básico de interfaz de usuario en Flutter

1. Crea un nuevo proyecto Flutter y actualiza tu archivo main.dart con el siguiente código:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter UI Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'¡Hola, bienvenido a Flutter!',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// Acción a realizar cuando se presiona el botón
print('¡Botón presionado!');
},
child: Text('Presionar'),
),
],
),
),
),
);
}
}

2. En este ejemplo, creamos una aplicación Flutter básica que muestra un texto y un botón centrados en la pantalla. Al presionar el botón, se imprime un
mensaje en la consola.

Utilizamos MaterialApp como el widget raíz de nuestra aplicación y Scaffold como el widget principal de la pantalla. Scaffold proporciona una
estructura básica para una pantalla con una barra de aplicación (AppBar) y un cuerpo (body).
Dentro del cuerpo, usamos el widget Center para centrar los elementos verticalmente en la pantalla.

El texto "¡Hola, bienvenido a Flutter!" se muestra utilizando el widget Text .

El botón se crea con el widget ElevatedButton y se configura para ejecutar una acción al presionarlo. En este caso, simplemente imprimimos un mensaje
en la consola.

3. Ejecuta la aplicación y verás la interfaz de usuario con el texto y el botón centrados en la pantalla. Al presionar el botón, deberías ver un mensaje en la consola.

Este ejemplo básico te ayuda a familiarizarte con la creación de una interfaz de usuario simple en Flutter. A medida que explores más sobre Flutter, podrás construir
interfaces de usuario más complejas y utilizar diferentes widgets y características ofrecidos por el framework.

Recuerda que este tutorial solo abarca conceptos básicos de Flutter. A medida que avanzas en el desarrollo de aplicaciones, te encontrarás con desafíos y casos de
uso más avanzados. Continúa explorando recursos, documentación y ejemplos adicionales para mejorar tus habilidades en Flutter. ¡Diviértete desarrollando con
Flutter y explora el patrón Bloc en el siguiente punto del temario!

También podría gustarte