En la propiedad home será donde anidaremos los widgets relacionados con el scaffold de nuestra aplicación. Recordemos que el scaffold contiene la estructura base para una aplicación en Material Design.
La composición básica del scaffold para nuestro Hola Mundo será la siguiente:
Además del appBar y el body, un scaffold estándar también puede incluir un bottomNavigationVar y un floatingActionButton, entre otros widgets.
Es importante tener en cuenta que un error común al definir la estructura de widgets para nuestra aplicación es olvidar colocar el widget correspondiente al Scaffold(). Esto se hace más evidente cuando al previsualizar nuestra app, vemos que los widgets de tipo Text() aparecen con unas rayas amarillas en la parte inferior.
En Flutter, al hacer cambios en el código y guardar el archivo, se actualiza automáticamente la interfaz del emulador, compilando solo la zona modificada, lo que nos permite ver los cambios reflejados casi de manera instantánea.
El desarrollo en VSC también es mágico gracias al plugin de Flutter y Dart, al guardar hay hot reloading automáticamente, la manera de escoger en qué dispositivo correr el app es muy sencilla y también tiene ayuda de sintaxis como en Android Studio, mejor me quedo con VSC 😊.
En VSCode puedes hacer uso de emulador? Como se hace?
Crea tu dispositivo virtual en Android Studio, y ya que lo tengas encendido VSCode lo detecta.
Para los que apenas inician en Android Studio. Si necesitan crear el dispositivo virtual van a Tools > AVD Manager > Create New Virtual Device. En ese punto eliges algún dispositivo y descargas la imagen, refrescas y listo. Recuerden reiniciar Android Studio.
Si luego de crear el dispositivo virtual les aparece un error de Hyper-V, primero vayan a Tools > SDK Manager y miren si tienen instalado el Intel Emulator:
Si no lo tienen, seleccionar la casilla para instalar y reinician el Android Studio.
Luego van a la ruta C:\Users\usuario\AppData\Local\Android\Sdk\extras\intel\Hardware_Accelerated_Execution_Manager
Hacen clic en intelhaxm-android.exe para ejecutar el emulador, reinician Android Studio y ya debería funcionar.
Tengo instalado el Intel Emulator pero el dispositivo virtual me corre por este error.
Emulator: emulator: ERROR: x86 emulation currently requires hardware acceleration!
Emulator: Process finished with exit code 1
Con respecto a tu problema: "Tengo instalado el Intel Emulator pero el dispositivo virtual me corre por este error.
Emulator: emulator: ERROR: x86 emulation currently requires hardware acceleration!
Emulator: Process finished with exit code 1" Es posible q tengas un procesador AMD y Intel en ese caso cuando creas el dispositivo luego de escoger el modelo vas a la seleccion de System image es aca donde escoges armeabi-v7a o cualquiera q diga arm… y vas probando te adjunto video por si tienes dudas
Si quieren borrar el liston que aparece en la parte superior que indica que estan en modo debug, coloquen esto justo al iniciar el MaterialApp:
debugShowCheckedModeBanner: false,
Wow muchas gracias Josué 💚
MUCHAS GRACIAS! ya me estaba molestando eso
Hola, creo que se salto una parte importante para novatos
¿Cómo hago funcionar el emulador de android?
Bro, como se hace? :(
Lo mismo pensaba, como hizo para compilar el código.
✨ Dartfmt permite formatearcódigo escrito en Dart, haciéndolo más fácil de leer e interpretar.
Si acaban de realizar el ejercicio Hola Mundo ya sea en un teléfono físico o virtual ANDROID notaran que el title del AppBar no esta centrado, esto es por comportamiento nativo de los dispositivos, mientras que en teléfonos IOs saldrá por default centrado, en dispositivos Android saldrá por default a la izquierda, si quisieran que su title este centrado también en adroid solo tendrían que agregar la etiqueta:
centerTitle: true,
dentro de su AppBar ;)
gracias, justo me estaba dando cuenta de lo mismo.
Genial, muchas gracias Juan! !
¿Quién es team VScode?
Para los que quieran ejecutar en el telefono y tienen problemas traigo una solucion.
Android studio necesita tener instalado el sdk de la version android de su telefono para poder compilar el gradle. necesitan ir a tools>sdk manager y ahi descargan e instalan la version de android de su telefono.
Espero sirva de ayuda ;)
Muchas gracias lo voy a probar y les cuento como me va :D
Wxplica paso a paso como configurar android studio y el modo desarrollador del teléfono.
Hola mi nombre de Jose y recien acabo de entrar a conocer flutter, soy un old school 🦖de angular y principalmemte desarrollo webapps y al parecer fullter esta bien poderoso, y mi incial objetivo es desarrollar webapps, ya instale todo incluyendo las extensiones para webapps (todo un proceso ehh!!) de hecho ya levante un demo por defecto y estoy empezando a conocer el framework, pero veo que este curso esta principalmente orientado a hacer apps y para dispositivos, este cursome servirá para desarrollar webapps? en el caso de que no platzy tiene algun curso dirigido a desarrollar webapps con flutter/dart???
Scaffold define la estructura de diseño de una aplicación en Flutter.
Soy el único a quien el “Hola Mundo” de la appBar no le aparece centrado? A que se debe? 🤔
Lo conseguí centrar, pero para eso tuve que hacerlo así
Me pasa lo mismo, será que en IOS es diferente?
Todos en platzi desarrollan en sus macbook y yo aqui con mi debian editando con Vim :'v
Qué lindo Flutter :heart: ya me enamoré 😍
Si quieren eliminar el text “DEBUG” de la derecha superior coloquen debajo del código “return MaterialApp(” el código “debugShowCheckedModeBanner: false,” y se eliminara… Para tener una mejor vista de la app…
Super gracias :)
Estaba usando Scaffold y aún así me salían las rayas amarillas, es una sugerencia de android studio para que usemos cons delante. Ejemplo
appBar:AppBar(title:constText("Hola Mundo"),),
De todas maneras dejando el cursor encima de las líneas amarillas te da la opción de colocarlo automáticamente. Espero les sirva y se ahorren el tener que preguntarlo. Saludos
no me funciona el emulador cuando ya lo descargue varias veces
Que sistema operativo estas utilizando? puede que te falte la declaración en las variables del sistema, por lo que Visual Studio code no consigue la aplicación.
Hola, alguien sabe como puedo agrandar las letra del editor de texto de android studio?, solo la del codigo y no la letra del todo el android studio.
Debes ir a File > Settings y en la pestaña de "Appearance & Behavior" moverte a "Appearence" y por debajo de "Them" dice "Use custom font" lo activas y ya escoges la fuente y tamaño que quieras :)
Oh muchas gracias amigo.
Hola, alguien me puede explicar porque me sale el error que dice Anahi en el video bajo los textos si estoy usando el Scaffold
Por el color del subrayado tengo la impresion de que no es un error sino que es alguna advertencia ¿En el buscador de archivos dice algo de un error? ¿En la ventana del editor (donde ten encuentras) hay algun signo de error? Como un boton rojo o algo asi, sino puede que solo haya mensajes de advertencia. Casi siempre los errores están en rojo, pero si definitivamente es un error por favor copia el codigo en el comentario o comparte la imagen completa para ayudarte.
No, ya entendi, era solo una advertencia, el Android Studio analiza que eso no va a variar en la aplicacion cuando se ejecute, asi que deberia escribirse como
appBar:constAppBar()
con el const da por entendido que no se modificara una vez ejecutada la app, eso hace que el rendimiento sea mayor ya que no lee esas lineas de codigo despues de cargar la app
con lo cual podrias dejarlo con la constante o sin ella ya que solo es una recomendacion del IDE
Como haces para que el Hot Restar en VSC sea mas rápido? a veces toma demasiado tiempo incluso solo con el hola mundo. O es mi computadora 🥺¿?
Hola, en mi caso logre solucionarlo al realizar la emulacion por medio de la tarjeta grafica.
En android studio → AVD Manager → Editar el dispositivo que uses → Emulated Performance → seleccionas "hardware"