App Entwicklung mit Dart und Flutter Tutorial #2 – Erklärung der Demo App

Bien, bienvenido de nuevo a Dart & Flutter y hoy, por supuesto, con la solución de qué hace exactamente este código. Ya lo hemos visto aquí, tenemos una aplicación que al final aquí está escrita en la página de inicio de demostración de Flutter. Entonces tenemos aquí este menú normal, que en realidad no es algo especial, que no es de nuestra aplicación, que es simplemente el Android normal.

Tenemos el botón Atrás y demás, nada especial, pero tenemos un botón en el que podemos hacer clic y luego tenemos una pantalla aquí. Y esa es la aplicación estándar normal en Flutter o en Dart & Flutter. Y queremos analizar muy brevemente lo que hay aquí. Y personalmente no soy amigo de comentarios tan largos, porque los comentarios deben explicar brevemente qué es eso. Y en mi opinión, realmente no lo hace legible y es por eso que los elimino muy brevemente y solo les digo lo que eso significa realmente. Entonces, antes de continuar, el primero aquí. Entonces, ¿cómo se ve eso realmente? Entonces puedes, en mi opinión, dejar los comentarios en él. Bien, primero que nada tenemos un Void Main aquí. En realidad, tenemos que empezar desde arriba. The Void Main es tu punto de partida de tu aplicación Flutter. Como con cualquier código normal, en Python tienes el if name es igual a main, en C o C++ tienes el int main, en Java también tienes el Void Main, en Kotlin también tienes un main.

Y sí, ese es tu punto de partida. Aquí comienza el código del programa y al final no haces más que llamar a runApp desde myApp. Con myApp se crea una instancia de una nueva clase y verás, también pongo habilidades de programación en esta fila, al menos habilidades de programación rudimentarias de antemano. Si aún no sabes programar te puedo recomendar algunas listas de reproducción, solo mírame, haz clic en el canal y allí encontrarás un montón de listas de reproducción y cursos sobre programación normal.

Puedes empezar con todo, nadie que empiece aquí en esta fila puede programar Dart. Eso no es necesario, aprendes Dart y Flutter en uno. Pero no necesariamente debes aprender Dart como primer idioma. Entonces myApp, quote, quote, crea una instancia de una nueva clase. Es como si crearas una variable que no tiene nombre y sí, es una instancia de myApp. Y runApp simplemente ejecuta esta aplicación. Entonces myApp, esa es exactamente esta clase aquí, de la que acabamos de crear una instancia. Verá, no importa el orden, eso significa que myApp puede estar arriba, por lo que esta clase myApp puede estar arriba de main o debajo de main, en este caso está debajo de main.

Eso significa que de alguna manera no es relevante dónde fue declarado. Y aquí tenemos la clase myApp, eso es lo que escribimos aquí, extiende statelessWidget. StatelessWidget es exactamente una de estas clases para un widget o para una clase de Android, exactamente para lo que queremos aquí. Haremos mucho más con los widgets, porque los widgets son los elementos portadores. Entonces tenemos aquí un addOverride, eso significa que es una función, una función o un método de statelessWidget, que queremos sobrescribir aquí. Ese es el único en myApp que realmente debes sobrescribir.

Pero, por supuesto, aún puedes agregar cualquier variable en myApp o simplemente agregar nuevas funciones o simplemente métodos. Y aquí vemos que todo está empaquetado directamente en una declaración de devolución. Y bueno, normalmente vería esto por separado, pero Dart es más o menos, al menos en parte, casi un lenguaje declarativo, donde simplemente especificas las variables individuales. Y vemos aquí, construimos una materialApp, y eso es lo que devolvemos aquí. Y esa es nuestra aplicación, que queremos mostrar aquí. materialApp, que proviene del material del marco, o también del material del tema que da nombre o del material UI. Se trata básicamente de un marco de diseño que, hasta donde yo sé, Google también ha adoptado o al menos lo ha diseñado ellos mismos. Y sí, eso es al final, así se ven bien las cosas. Definitivamente puedes usarlo, pero probablemente haga un curso separado o al menos algunos videos. Porque no sólo puedes usarlo para aplicaciones, sino que también puedes usarlo para sitios web, etc. Aquí vemos que el título, por supuesto, debería ser FlutterDemo de nuestra aplicación. Y queremos usar como tema, es decir, cómo se ve todo, lo siguiente.

Y decimos, está bien, en realidad son datos temáticos. Y esa es otra clase de la que hemos creado una instancia aquí. En realidad, programáticamente, no solo el estilo más hermoso, que se crea aquí en la aplicación de demostración. Y esa es la muestra principal. La muestra primaria significa qué color debería tener al final y qué color de material deberían tener los botones. Y aquí realmente quiere decir que todos los botones deberían verse similares y todos tener el mismo diseño.

Y esa es básicamente la idea de diseño detrás de esto, que todo se vea similar y todo esté bien. Está bien, me ocuparé de eso más tarde. No, nos encargaremos de ello de inmediato. Si tiene muy poca memoria, puede ir a configurar aquí o en la configuración. Y vemos aquí, en mi caso, que el tamaño máximo del montón es de 1280 megabytes. Por supuesto, esto es demasiado poco. Aquí ya necesitamos los 4 gigabytes de RAM. Eso ya es significativo. Entonces, por supuesto, tenemos que reiniciar más tarde, porque no quiero hacer eso ahora, porque quiero explicarles las cosas. Sólo brevemente y ya no hacemos nada nuevo. Bien, la densidad visual. Y sí, necesitas un poco de memoria si quieres programar Android. Entonces digamos que ya deberías tener 8 gigabytes. Bueno, la densidad visual significa aquí que queremos diseños individuales, es decir, el diseño de los botones, o solo los botones, de modo que no importe para qué dispositivo funcione.

Es decir, no importa si es una tableta o un teléfono celular u otras cosas. Eso debería funcionar para todo, por favor. Y es por eso que decimos adaptativo aquí. Y aquí conoceremos las cosas individuales. Más precisamente, no te preocupes. Luego tenemos la página de inicio aquí y decimos aquí, mi página de inicio. Esa es tu página, puedes imaginarla como una página web móvil, que debería tener exactamente este título. Página de inicio de demostración de Flutter y eso es exactamente lo que vemos aquí.

Pero la página de inicio, como vemos aquí también, es en realidad una clase separada. Y encontramos esta clase aquí abajo. Aquí vemos la clase mi página de inicio y también es un widget de estado completo. Aquí arriba indica el widget sin estado, aquí abajo indica el widget completo. Eso significa que esta cosa puede salvar cosas. Estado significa, el estado significa, al final, guardamos información en esta página de inicio, en esta página de inicio de clase. Como, por ejemplo, la cantidad de veces que se hizo clic en el botón. Verá, eso no se guardó en mi aplicación, se guardó aquí en mi página de inicio. Y así es como lo configuras normalmente. Bien, ¿cómo se ve eso? Bueno, mi página de inicio guarda todo aquí en este constructor, por así decirlo.

Y vemos aquí de nuevo, está bien, tenemos un título de cadena final. Ese es exactamente el título que nos entregarán aquí. Y aquí vemos que también construimos estados. Y por supuesto, también los introduciremos por separado. No quiero entrar en esto con más detalle ahora. Verás, estoy haciendo esto de forma bastante espartana en este momento. Pero también vemos que hemos creado el Estado, por así decirlo, un Estado creado. Entonces, una función crea un estado. Y este estado, que es del tipo piso-mi-estado-de-página-de-inicio. Que también es una clase separada, de la que estamos creando una instancia aquí en la parte posterior. Y estas instancias de atrás, bueno, no vienen de ningún lado. Eso significa que tenemos otra clase aquí abajo, que representa el estado de mi página de inicio. Y eso es básicamente un estado con una clase genérica. Extiende o hereda esta clase my-home-page-state. Y hereda de este estado de clase genérico, que como tipo de variable obtiene mi página de inicio. Entonces, verán, aquí se está volviendo un poco más complejo.

Aquí tenemos un mostrador, o mostrador de piso. Porque es una variable interna y la configuramos en cero al principio. Eso está claro. Y aquí decimos, está bien, si queremos incrementar todo. Esa es básicamente la función que se llama cuando presionamos el botón aquí. Entonces el contador simplemente se establece en 1. Eso significa que aquí decimos establecer estado. Y sí, nos gustaría tener el contador en 1 más. Lo que sucede exactamente aquí, lo veremos con más detalle. Entonces, el widget en sí, desde el estado de mi página de inicio, lo encontramos aquí abajo. Y eso es un andamio. No quiero decir nada más sobre eso ahora. Porque ese es básicamente uno de los widgets que usas con relativa frecuencia, diría yo. Y me gustaría profundizar un poco más en ello. Pero podemos ver aquí, eso es lo que realmente podemos ver. Porque aquí solo está el título establecido. Entonces aquí puedes ver el título directamente. Y en este andamio que vemos aquí, ¿está disponible este título? El widget.title se transfiere aquí como título de la barra de aplicaciones.

Esto de aquí arriba es la barra de aplicaciones. Ahí es donde está el título. De lo contrario, no hay nada en ello. En el cuerpo, sin embargo, por supuesto, todo lo demás está en él. Eso significa que lo grande y blanco aquí es el cuerpo de nuestra aplicación. Y contiene la columna secundaria. Y centro no significa nada más. Este es un diseño, por así decirlo. Eso significa que decimos, está bien, por favor, centra todo.

Eso significa que las páginas quedan libres si tenemos demasiado espacio. Como podemos ver aquí, presionas el botón tantas veces. Tenemos un pequeño espacio a izquierda y derecha. Y por eso todo está centrado. Entonces, este elemento hijo, lo que tenemos aquí ahora, es una columna. Una columna de este diseño central, como dije, también está explicada en detalle. Donde lo encontramos, alineación del eje principal, donde queremos alinear todo.

Entonces, donde está alineado, bueno, por supuesto, en el centro, en el medio. Porque en realidad no hay nada más, excepto este botón o este que has presionado tantas veces. Y luego viene este número. Entonces, ¿y qué hay ahí ahora, en este niño? Bueno, eso también es un widget. Y con texto en él, o en realidad hay varios widgets.

Y con texto en él, has presionado el botón tantas veces. Y el segundo widget que está ahí, lo vemos aquí. Ése es el contador del resultado final del dólar. Y si recuerdas, vaya, eso es un poquito, está bien. El contador de resultados, atención, no hay contador de resultados en dólares. El dólar es un símbolo especial, por así decirlo. El contador de resultados se pone aquí a cero. Porque, por supuesto, no lo presionamos al principio. Pero, por supuesto, también queremos calcular la frecuencia con la que se hizo todo. Y es por eso que decimos contador de resultados en dólares. Al dólar, como dije, nuevamente por separado. Y como estilo, decimos aquí, por favor sea un titular 4. Hay diferentes titulares. Por ejemplo, podría ir aquí ahora y escribir un titular 1. Entonces todo sería mucho más grande, por supuesto. Pero también puedo tener simplemente un título 4. Y es por eso que el texto se muestra aquí.

Ahora tenemos que introducir el botón de alguna manera. Y es por eso que decimos aquí que tenemos un botón de acción flotante. Y ese es exactamente este botón de acción, que siempre encuentras en tantas aplicaciones. Aquí abajo, sólo un botón en el lado derecho, que flota. Entonces fluye, por así decirlo, como agua. Primero hacia abajo, luego hacia la derecha, como puedes imaginar.

Y si presiona, presiona, entonces, por favor, el contador debe aumentarse. ¿ Bueno? Esa es la función que escribimos aquí. En resumen, no, vamos, contador de incrementos en el resultado final. Esta función que hemos hecho aquí, que cambia el estado con el contador. Y eso a su vez cambia este widget de texto, que nos muestra el contador. El resto, por supuesto, permanece constante. Entonces, información sobre herramientas. La información sobre herramientas es algo que aparece cuando conduzco hasta aquí. Entonces, si paso por la aplicación aquí, por ejemplo, y… … no se muestra correctamente. Entonces, si presiono prolongadamente, aquí se muestra el incremento.

Esa es mi ayuda, porque no sé exactamente, o tal vez no sé, qué hace este botón aquí. Presiono mucho aquí y luego viene este pequeño texto. Oye, si lo presionas, incrementa este contador. Y su hijo es un ícono. Y bueno, al final los íconos también se incluyen en la interfaz de usuario del material. Y contienen, por así decirlo, diferentes iconos, como por ejemplo agregar. Ahora puedo ser desagradable y puedo decir aquí… … vamos, está bien, se retrasa. Necesito reiniciar urgentemente mi IDE. Pero si yo… Ah, y la beta también sigue disponible, muchas gracias, pero no la necesito. Si presionamos aquí, control, tecla vacía, obtenemos aquí, por cierto, también diferentes sugerencias. Y podemos ver aquí lo que eso es realmente. Así que aquí hay realmente mucho. Creo que me quedaré aquí para ver este video, aquí en el complemento. Así que de alguna manera no nos romperemos aquí ahora. Porque sí, parece que mi memoria aquí en el IDE definitivamente no es suficiente. Bien, ya ve, este aumento de memoria quizás no sea tan insignificante.

Especialmente si grabas videos. Y sí, en ese caso, fue de mi parte. Espero que hayas disfrutado de un pequeño resumen de tu primera aplicación, que casi ya tenías. Pero aún así, primero debes entender eso. Porque es en parte un lenguaje ligeramente diferente al que podríamos esperar. Y si ahora dices que quieres trabajar en esta área, entonces sólo puedo recomendarte que te dediques a TI. Ya lo hemos oído varias veces aquí. Pero aquí realmente encuentran trabajo tanto los principiantes como los profesionales de TI experimentados. Si quieren entrar en TI. Por lo tanto, entra en TI, ¿verdad? De hecho, puedes crear un perfil de forma totalmente gratuita.

Entonces, de forma gratuita para usted, por supuesto, no para las empresas que luego lo anuncian. Y aquí tu perfil. Por ejemplo, puedes decir, hombre, ya hemos hecho Dart y Flutter. Pero queremos volver a ingresar a la habilidad Dart. Y podemos hacerlo de manera muy sólida en un Fiat. ¿ Por qué ya hemos hecho eso? Porque ya lo has presentado en las tendencias de la aplicación. Y sí, esa fue realmente la tendencia de aplicaciones que más te ha fascinado. Por eso get in IT decidió presentarme esta serie de Dart y Flutter. Y por eso le estoy, por supuesto, muy agradecido. Entonces, y lo bueno es que, si ahora ha creado completamente su perfil, entonces no tiene que postularse a la empresa en la que desea comenzar. Pero las empresas se aplican a usted. Eso significa que dicen, oye, puede lanzar y aletear. Genial, necesitamos algo así. Y de hecho te escriben. He escuchado de muchas personas que ya han escuchado, que ya han escrito con usted o con empresas. Y sí, ese ha sido el caso muy, muy a menudo cuando se trata de entrar en TI.

Creo que más del 80% de la gente aquí realmente ha completado su perfil por completo. Hoy, sin embargo, todavía puedo presentarles algo muy especial. Y ese es Job.io, que ya tuvo lugar una vez. Y ahora volverá a suceder. ¿ Y qué es eso en realidad? Esta es una feria de empleo virtual. Eso significa una feria donde puedes hablar con gente de empresas, también puedes ver a qué debes prestar atención en la entrevista de trabajo. Y encuentre diferentes conferencias que son súper emocionantes. Y, por supuesto, esto también lo organiza periódicamente get in IT. La primera vez ya estaba allí. Por cierto, puedes encontrarlo aquí. Oh, ahí está mi cara para ver. ¿Que esta pasando ahí? Y exactamente, en ese entonces di una conferencia sobre el tema de React y entrevistas de trabajo.

Incluso puedes verlo todo como un registro completo aquí. Porque te acaba de llegar muy bien y porque quizás quieras saber un poco más sobre él. Súper genial en realidad. Y sí, la próxima vez volveré, por supuesto. Eso significa que ya puedes registrarte en el calendario y tal vez registrarte. Y eso es el 18 de marzo, a las 13.30 horas. Haré una pequeña prueba de penetración, por así decirlo. Eso significa que en realidad algo sucederá en dirección a la piratería. Y, por supuesto, eso también depende de tus comentarios.

Eso significa lo que querías y lo que te pidieron. Sí, en definitiva, espero que nos veamos allí. O no sólo allí, sino también a los vídeos que salen antes. Y nos vemos la próxima vez. Adiós..

As found on YouTube

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *