[ENG/ESP] MY FIRST FLUTTER PROJECT: A SIMPLE PORTFOLIO MOBILE APP || MI PRIMER PROYECTO EN FLUTTER: UNA SENCILLA APLICACIÓN MÓVIL DE CARTERA
It's no news that all Federal Universities in my home country, Nigeria are on what looks like an indefinite strike till the Federal Government meets the Academic Staff Union of Universities (ASUU) demand. This has been on for over three months and currently there is no end in sight with the hopes of many students dashed.
While at home hoping for school to resume fully, I decided to develop my skills more and acquire indepth software development knowledge.
My love for technology especially software development is massive and over this few months, it has increased tremendously.
In order to develop my skills, I decided to pick up my Mobile App development courses again from the scratch with the aim of fully completing them this time and doing freelance jobs before the year ends. I also registered in an online coding school for backend development which also involves a bit of frontend development using HTML, CSS and JAVASCRIPT.
So, for today, i started with Angela yu's Complete Flutter development 2020 course and I made this beautiful project: A SIMPLE PORTFOLIO PAGE APP.
Are you wondering how I made this? Let's jump right into it.
No es ninguna novedad que todas las universidades federales de mi país, Nigeria, están en lo que parece una huelga indefinida hasta que el Gobierno Federal cumpla con la demanda del Sindicato de Personal Académico de las Universidades (ASUU). La huelga dura ya más de tres meses y actualmente no se vislumbra el fin de la misma, con las esperanzas de muchos estudiantes truncadas.
Mientras estaba en casa esperando que la escuela se reanudara por completo, decidí desarrollar más mis habilidades y adquirir conocimientos profundos de desarrollo de software.
Mi amor por la tecnología, especialmente por el desarrollo de software, es enorme y en estos meses ha aumentado enormemente.
Para desarrollar mis habilidades, decidí retomar mis cursos de desarrollo de aplicaciones móviles desde el principio con el objetivo de completarlos completamente esta vez y hacer trabajos como freelance antes de que termine el año. También me inscribí en una escuela de codificación en línea para el desarrollo de backend que también implica un poco de desarrollo de frontend utilizando HTML, CSS y JAVASCRIPT.
Así que, para hoy, empecé con el curso Complete Flutter development 2020 de Angela yu e hice este hermoso proyecto: UNA SIMPLE APLICACIÓN DE PÁGINA DE PORTAFOLIO.
¿Te estás preguntando cómo lo he hecho? Vamos a entrar de lleno en el tema
MY MOBILE APP STEP-BY-STEP PROCESS
First of, what is Flutter?
Flutter is a UI toolkit built by Google which comprises of widgets. It uses the Dart language and is used to build cross-platform Mobile apps. That is, it can be used to build apps that runs on android OS, IOS, desktop apps.
In simple terms, it means one codename working on multiple platforms which saves time and reduces production cost.
En primer lugar, ¿qué es Flutter?
Flutter es un kit de herramientas de interfaz de usuario construido por Google que se compone de widgets. Utiliza el lenguaje Dart y se utiliza para construir aplicaciones móviles multiplataforma. Es decir, se puede utilizar para construir aplicaciones que se ejecutan en el sistema operativo Android, IOS, aplicaciones de escritorio.
En términos sencillos, significa que un solo nombre de código funciona en múltiples plataformas, lo que ahorra tiempo y reduce el coste de producción.
- Choose Flutter application and click on Next
- Elija la aplicación Flutter y haga clic en Siguiente
For me, I used com.alexander.mypersonalportfolio and then click on the Finish button.
- establezca el nombre del paquete en la casilla que se muestra utilizando el formato com. + tu nombre/nombre de la empresa + nombre del proyecto
En mi caso, utilicé com.alexander.mypersonalportfolio y luego hice clic en el botón Finalizar.
- android studio will generate a new page with a default sample app.
Note that, the first Flutter file is always the main.dart file.
Looking at the top screen, it comprises of different tabs like the FILE TAB, VIEW, RUN, HELP, CODE, BUILD among others. They are meant for easy navigation.
Next tab comprises of the project name, a dropdown button showing connected device, run button, debug button, hot reload, hot restart,stop button.
Android studio is technically designed for easy and quick understanding.
- android studio generará una nueva página con una aplicación de ejemplo por defecto.
Ten en cuenta que, el primer archivo de Flutter es siempre el archivo main.dart.
Mirando la pantalla superior, se compone de diferentes pestañas como FILE TAB, VIEW, RUN, HELP, CODE, BUILD entre otras. Están pensadas para facilitar la navegación.
La siguiente pestaña incluye el nombre del proyecto, un botón desplegable que muestra el dispositivo conectado, el botón de ejecución, el botón de depuración, la recarga en caliente, el reinicio en caliente y el botón de parada.
Android studio está técnicamente diseñado para una fácil y rápida comprensión.
So, to start a new project we have to clear out the sample app code and start coding with the function: void main () {}
The function calls the main.dart file and runs it.
- Inside the curly braces, I wrote runapp() with my stateless widget name inside it. This means all codes given in the stateless widget should run.
Así que, para empezar un nuevo proyecto tenemos que borrar el código de la aplicación de ejemplo y empezar a codificar con la función: void main () {}
La función llama al archivo main.dart y lo ejecuta.
- Dentro de las llaves, escribí runapp() con el nombre de mi widget sin estado dentro de él. Esto significa que todos los códigos dados en el widget sin estado deben ejecutarse.
Next, I noticed a red alert from the widget_test.dart file showing that the stateless widget name has changed from MyApp to MyPortfolio without reflecting there.
So, I made same changes in the widget_test.dart file.
A continuación, me di cuenta de una alerta roja del archivo widget_test.dart que mostraba que el nombre del widget sin estado había cambiado de MyApp a MyPortfolio sin reflejarse allí.
Así que hice los mismos cambios en el archivo widget_test.dart.
Like I said earlier on, Flutter is made of widgets. It is built on widgets.
My widget tree starts from MaterialApp - scaffold - SafeArea.
The safeArea is meant to move contents away from the edges of the screen thus making it visible.
Como dije antes, Flutter está hecho de widgets. Está construido sobre widgets.
Mi árbol de widgets comienza con MaterialApp - scaffold - SafeArea.
El safeArea está pensado para alejar el contenido de los bordes de la pantalla y así hacerlo visible.
Since it comprises of widget tree, widgets can call the child (single) or Children property to add specific functions and designs to ones taste.
Also, all widgets carries certain attributes
Examples of child/children widgets are Column, row, CircleAvatar, Text,Images.
Dado que se compone de un árbol de widgets, los widgets pueden llamar a la propiedad child (simple) o Children para añadir funciones y diseños específicos a su gusto.
Además, todos los widgets llevan ciertos atributos
Ejemplos de widgets child/children son Column, row, CircleAvatar, Text,Images.
For our portfolio project, we used a circleAvatar widget to display our image so we need to open a folder to save images.
- To create a new directory, click on the project folder at the left side of the screen, click on New, choose directory and type IMAGES then save.
Para nuestro proyecto de portafolio, utilizamos un widget circleAvatar para mostrar nuestra imagen, por lo que necesitamos abrir una carpeta para guardar las imágenes.
- Para crear un nuevo directorio, haga clic en la carpeta del proyecto en la parte izquierda de la pantalla, haga clic en Nuevo, elija el directorio y escriba IMÁGENES y luego guarde.
- move your images into the root folder on your device
- mueve tus imágenes a la carpeta raíz de tu dispositive
- to use your images, locate pubspec.yaml file and edit the asset properties.
- para utilizar sus imágenes, localice el archivo pubspec.yaml y edite las propiedades de los activos.
- add the images directory to the assets and then run pub get to update your project with the images.
- añada el directorio de imágenes a los activos y luego ejecute pub get para actualizar su proyecto con las imágenes.
to add images, we can either use Network image widget or the Asset Image widget.
Since our image is already placed under assets in the pubspec.yaml file. We use AssetImage and then the image name inside ('image name here').
para añadir imágenes, podemos utilizar el widget de imagen de red o el widget de imagen de activos.
Como nuestra imagen ya está colocada en los activos en el archivo pubspec.yaml. Usamos AssetImage y luego el nombre de la imagen dentro ('nombre de la imagen aquí').
- to also use various font families, we use the same method of adding the fonts to the asset folder in the pubspec.yaml file.
- para utilizar también varias familias de fuentes, utilizamos el mismo método de añadir las fuentes a la carpeta de activos en el archivo pubspec.yaml.
- click on pub get to save fonts to the project folder and continue.
- haga clic en pub get para guardar las fuentes en la carpeta del proyecto y continual
at this point, we have added our image inside the circle avatar and also a text widget displaying my name.
to run/ debug my app so far, I need an emulator or a physical device.
For me, I used my Samsung device to run the app since my HP laptop cannot efficiently run an emulator because of Android studio specifications.
Yes, Google gave the minimum system requirements for Android studio to be 8GB RAM but I use a 4GB RAM hp system thus some functions drag the laptop.
en este punto, hemos añadido nuestra imagen dentro del círculo avatar y también un widget de texto que muestra mi nombre.
Para ejecutar/depurar mi aplicación hasta ahora, necesito un emulador o un dispositivo físico.
En mi caso, he utilizado mi dispositivo Samsung para ejecutar la aplicación ya que mi portátil HP no puede ejecutar eficazmente un emulador debido a las especificaciones de Android studio.
Sí, Google dio los requisitos mínimos del sistema para Android studio a ser 8 GB de RAM, pero yo uso un sistema de 4 GB de RAM hp por lo tanto algunas funciones arrastran el portátil.
- This is the output so far after running the app on my mobile app.
To run or debug on your mobile device you need to enable developer's mode from your phone settings.
It looks great...right? Wait till we are done
- Esta es la salida hasta ahora después de ejecutar la aplicación en mi aplicación móvil.
Para ejecutar o depurar en tu dispositivo móvil necesitas habilitar el modo de desarrollador desde la configuración de tu teléfono.
Se ve muy bien ... ¿verdad? Espera a que terminemos
- after adding my name and job description text, the next phase is adding a card widget.
- Después de añadir mi nombre y el texto de la descripción del trabajo, la siguiente fase es añadir un widget de tarjeta.
- The next step is adding a card widget which allows us to use icons and also add text too.
Check the output below
- El siguiente paso es añadir un widget de tarjeta que nos permita utilizar iconos y también añadir texto.
Compruebe el resultado a continuación
Looking awesome right?
Wait for the final blow
Se ve impresionante, ¿verdad?
Espera el golpe final
- So, finally I used 3 cards wrapped with margins and padding to give a better outlook.
Each cards contains details of my link, my location and my discord chat link.
- Así que, finalmente, utilicé 3 tarjetas envueltas con márgenes y relleno para dar una mejor perspectiva.
Cada tarjeta contiene detalles de mi enlace, mi ubicación y mi enlace de chat de discordia.
Wow, this surely looks beautiful especially with the blue background color.
Wow, esto seguramente se ve hermoso especialmente con el color de fondo azul.
I am sure you like it and would love to try out your own.
Of course, you can make yours too by following this simple steps. Thanks to my detailed screenshots.
Seguro que te gusta y te encantaría probar el tuyo.
Por supuesto, tú también puedes hacer el tuyo siguiendo estos sencillos pasos. Gracias a mis detalladas capturas de pantalla.
Thanks for enjoying my first mobile app ride with me. I plan to continue working on my skills and drop them here.
Your support and kind comments will go a long way. Till my next post here, enjoy.
Much love ❤
NOTE: all desktop images are screenshot taken from my android studio IDE on my laptop.
- Other output images are screenshot from my Samsung phone.
My reference course material is Angela Yu's Complete Flutter development course from Appbrewery.
Much love ❤
Gracias por disfrutar conmigo de mi primer paseo por la aplicación móvil. Pienso seguir trabajando en mis habilidades y dejarlas aquí.
Su apoyo y sus amables comentarios serán de gran ayuda. Hasta mi próximo post aquí, disfruta.
Mucho amor ❤
NOTA: todas las imágenes de escritorio son capturas de pantalla tomadas de mi android studio IDE en mi portátil.
- Otras imágenes de salida son captura de pantalla de mi teléfono Samsung.
Mi material del curso de referencia es el curso de desarrollo de Flutter completo de Angela Yu de Appbrewery.
Mucho amor ❤
I am @chosenfingers, a young Nigerian studying Mechatronics Engineering, your favourite blogger, content writer, love doctor 🤗 and friend. My main purpose here on Hive is to impact as many as possible with the right knowledge through mind-blowing, educational content. I hope my blog reaches people far and near.
Please don't forget to share on any platform and reblog. Much love😍