[🧑‍💻] Estudio - Flutter App Development Basics 14/44: configuracion del entorno Flutter, widgets clave y sintaxis basica de Dart

✨ Resumen de Gemini 2.5 Pro 　

Curso Flutter App Development Basics

DevStory - Inflearn DevStory

No pasa nada aunque no tengas conocimientos de desarrollo. Flutter app development basics que tambien pueden hacer principiantes 🏃‍♂️Flutter app development basics que incluso principiantes absolutos pueden aprender[foto]Si aprendes desarrollo de apps, puedes lanzar al mundo entero tu propio servicio de app, eso que hasta ahora solo imaginabas. En realidad

• Original: http://blog.naver.com/hyeogikarp/223882864462
• Hora de publicacion en Naver: 2025/05/30 11:30 KST
• Categoria original: Estudio de desarrollo

Original

Curso Flutter App Development Basics

DevStory - Inflearn

DevStory

No pasa nada aunque no tengas conocimientos de desarrollo. Flutter app development basics que tambien pueden hacer principiantes 🏃‍♂️Flutter app development basics que incluso principiantes absolutos pueden aprender[foto]Si aprendes desarrollo de apps, puedes lanzar al mundo entero tu propio servicio de app, eso que hasta ahora solo imaginabas. En realidad, crear una app

www.inflearn.com

1. Que es Flutter?

• Framework multiplataforma: desarrollado por Google, permite desarrollar aplicaciones Android, iOS, Web y Desktop con una sola base de codigo.

• Usa el lenguaje Dart: la UI se escribe con codigo.

1. Concepto clave: todo es un Widget

• Unidad de composicion de UI: se compone la pantalla ensamblando widgets.

• Widget Tree: estructura jerarquica de widgets, formada por relaciones padre-hijo.

• Key? key y super(key: key): en el constructor de un widget, Key se usa para preservar el estado del widget y actualizarlo de forma eficiente cuando se reconstruye el arbol de widgets. En esta etapa basta con entender que existe este concepto.

• BuildContext context: objeto importante que representa la posicion del widget actual en el arbol de widgets y permite acceder a datos o temas de widgets superiores. Se usa en muchos lugares, como Navigator.pop(context).

• Principales categorias de widgets:

• StatelessWidget: widget estatico sin estado.

• StatefulWidget: widget dinamico que puede volver a dibujarse segun cambios de estado. (ejemplo de codigo omitido)

• StatefulWidget: widget dinamico que puede volver a dibujarse segun cambios de estado. (ejemplo de codigo omitido)

1. Estructura basica de una app y widgets principales

• funcion main() & runApp() & MaterialApp & Scaffold:

• home de MaterialApp: especifica la primera pantalla de la aplicacion. (ej.: home: HomePage())

• home de MaterialApp: especifica la primera pantalla de la aplicacion. (ej.: home: HomePage())

• Propiedades detalladas de AppBar:

• Widgets de layout:

• Column & Row:

• Padding: agrega espacio alrededor del widget hijo.

• Padding: agrega espacio alrededor del widget hijo.

• Container: widget rectangular al que se le pueden aplicar distintos estilos(tamano, color, margen, borde, etc.).

• Container: widget rectangular al que se le pueden aplicar distintos estilos(tamano, color, margen, borde, etc.).

• Expanded: expande un widget hijo de Row o Column para que llene el espacio restante.

• Expanded: expande un widget hijo de Row o Column para que llene el espacio restante.

• SingleChildScrollView: permite hacer scroll cuando el contenido del widget hijo se sale de la pantalla.

• SingleChildScrollView: permite hacer scroll cuando el contenido del widget hijo se sale de la pantalla.

• ListView.builder: crea una lista desplazable que muestra eficientemente muchos items. Solo genera los items visibles en pantalla.

• ListView.builder: crea una lista desplazable que muestra eficientemente muchos items. Solo genera los items visibles en pantalla.

• Stack: permite colocar widgets superpuestos(eje Z).

• Stack: permite colocar widgets superpuestos(eje Z).

• AspectRatio: fija la proporcion ancho-alto del widget hijo.

• AspectRatio: fija la proporcion ancho-alto del widget hijo.

• double.infinity: se usa en propiedades width o height de Container, etc., para llenar el tamano maximo permitido por el widget padre.

• double.infinity: se usa en propiedades width o height de Container, etc., para llenar el tamano maximo permitido por el widget padre.

• SizedBox: se usa para crear un espacio vacio de tamano especifico o para indicar explicitamente el tamano de un widget hijo.

• SizedBox: se usa para crear un espacio vacio de tamano especifico o para indicar explicitamente el tamano de un widget hijo.

• Widgets basicos de UI:

• Text & TextStyle: muestra texto y define su estilo.

• Image.network: carga y muestra una imagen desde una URL de red.

• Image.network: carga y muestra una imagen desde una URL de red.

• fit: BoxFit.cover: hace que la imagen llene el espacio especificado manteniendo su proporcion. (si la imagen es mas grande que el espacio, puede recortarse)Icon: muestra un icono de Material Design.

• fit: BoxFit.cover: hace que la imagen llene el espacio especificado manteniendo su proporcion. (si la imagen es mas grande que el espacio, puede recortarse)

• fit: BoxFit.cover: hace que la imagen llene el espacio especificado manteniendo su proporcion. (si la imagen es mas grande que el espacio, puede recortarse)

• Icon: muestra un icono de Material Design.

• Detalles de TextField & InputDecoration: recibe entrada de texto del usuario.

• Detalles de TextField & InputDecoration: recibe entrada de texto del usuario.

• ElevatedButton, TextButton, IconButton: widgets de boton de distintos tipos.

• ElevatedButton, TextButton, IconButton: widgets de boton de distintos tipos.

• Card: crea una UI con forma de tarjeta de Material Design. Tiene una sombra ligera y esquinas redondeadas.

• Card: crea una UI con forma de tarjeta de Material Design. Tiene una sombra ligera y esquinas redondeadas.

• Divider: crea una linea divisoria visual.

• Divider: crea una linea divisoria visual.

• CircleAvatar: se usa principalmente para mostrar imagenes circulares, como imagenes de perfil de usuario.

• CircleAvatar: se usa principalmente para mostrar imagenes circulares, como imagenes de perfil de usuario.

• Colors.black.withOpacity(0.5): aplica transparencia a un color. 0.0(totalmente transparente) ~ 1.0(totalmente opaco).

• Colors.black.withOpacity(0.5): aplica transparencia a un color. 0.0(totalmente transparente) ~ 1.0(totalmente opaco).

• Drawer y widgets relacionados:

• Drawer: se asigna a la propiedad drawer de Scaffold y es un panel que se desliza desde un lado de la pantalla.

• DrawerHeader: widget usado para decorar el area superior de un Drawer.

• ListTile: se usa con frecuencia para componer cada elemento dentro de un Drawer. Tiene propiedades como leading, title, trailing y onTap.

• ListTile: se usa con frecuencia para componer cada elemento dentro de un Drawer. Tiene propiedades como leading, title, trailing y onTap.

• PageView: widget que permite ver varias paginas(pantallas) desplazandose a izquierda y derecha. (ej.: banner de evento)

1. Fundamentos de navegacion

• Navigator.pop(context): se usa para quitar la pantalla(ruta) actual del stack y volver a la pantalla anterior. Es util al cerrar un Drawer o un dialogo.

1. Manejo de datos(ejemplo simple)

• List<Map<String, dynamic»: componer los datos que se usaran en ListView.builder, etc., con listas y mapas de Dart es una practica comun. Cada Map contiene la informacion de un item, y se accede a los valores mediante claves String.

1. Estructura del proyecto y entorno de desarrollo

• Carpeta lib: es donde se escribe principalmente el codigo Dart. main.dart es el archivo inicial por defecto.

• Archivo pubspec.yaml: archivo para configurar metadatos del proyecto, gestion de dependencias(librerias/paquetes), version del SDK, etc.

• VSCode: se usa como herramienta principal de desarrollo.

• Command Palette (Ctrl+Shift+P / Cmd+Shift+P): ejecuta varios comandos de Flutter, como Flutter: New Project y Flutter: Launch Emulator.

• Atajos utiles: es imprescindible aprender atajos utiles como autocompletado (Ctrl+Space/Option+Esc), refactorizacion (Ctrl+Shift+R), vista de parametros (Ctrl+Option), etc. (para mejorar la productividad)

• Mas adelante pienso hacer muchos posts simples centrados en atajos de VSCode.

• ej.) Como activar Presentation Mode en VSCode

• Emulator: dispositivo movil virtual, usado para probar apps sin un dispositivo real.

• Hot Reload: refleja rapidamente los cambios de codigo en la pantalla conservando en gran parte el estado de la app. (icono con forma de rayo)

• Hot Restart: inicializa el estado de la app y reinicia la app. (icono con forma de circulo)

• analysis_options.yaml: archivo que configura reglas de analisis del codigo Dart. (ej.: activar/desactivar reglas de lint especificas)

• Por ejemplo, si intentas usar la funcion print para mostrar texto en la Debug Console, arma un escandalo diciendo que no deberias usarla en production.

• Como eso se puede quitar por cuenta propia en production, probemos a eliminar ‘avoid_print’ de las reglas de lint. Solucion 1. Escribir un comentario ignore_for_file en la parte superior del archivo dart correspondiente.

• Como eso se puede quitar por cuenta propia en production, probemos a eliminar ‘avoid_print’ de las reglas de lint.

• Solucion 1. Escribir un comentario ignore_for_file en la parte superior del archivo dart correspondiente.

• Solucion 2. Tratarlo como ignorado en analysis_options.yaml, en la raiz del proyecto.

• Solucion 2. Tratarlo como ignorado en analysis_options.yaml, en la raiz del proyecto.

• Solucion 2. Tratarlo como ignorado en analysis_options.yaml, en la raiz del proyecto.

1. Como estudiar Flutter

• Widget Catalog & Widget of the week: estudiar distintos widgets mediante el catalogo de widgets de la documentacion oficial de Flutter y la serie ‘Widget of the week’.

• Usar comunidades: preguntar y responder en comunidades relacionadas con Flutter(foros online, chats abiertos, etc.) y crecer juntos.

• Dominar la sintaxis de Dart: como Flutter usa el lenguaje Dart, es importante entender suficientemente la sintaxis de Dart.

💭 Diario

Aunque ya habia usado C, C++, Java, Javascript, Python, … un monton de lenguajes, y tambien habia trabajado con varios frameworks/herramientas como Spring, Vue.js, Django y FlutterFlow, empece a escuchar un curso basico de Flutter por si habia conceptos fundamentales que se me estuvieran escapando.

Pensaba que eran conceptos que ya conocia y quise saltarlos rapido, pero esto… parece que habia dejado el desarrollo durante demasiado tiempo. Quizas se me endurecio el musculo cerebral; no podia imaginar con agilidad en mi cabeza como tendria que escribir el codigo.

Ahora estamos en una epoca en la que, en VSCode, se puede programar de forma eficiente recibiendo ayuda de IA como Inline Chat(Gemini 2.5 Pro) o Code Recommendation(GitHub Copilot), preguntando dudas al instante, encontrando respuestas y usando autocompletado. Asi que espero poder recuperar mas rapido el musculo cerebral de programacion.

Queda mucho camino por recorrer. Vamos!