Tabla de Contenidos

Lo que vas a Aprender.............................................................................3

Tu Primer Lenguaje: Dart.........................................................................3
Variables en Dart: Cajitas de Información ...............................................4
Funciones: Creando una Receta ..............................................................6
Condicionales: Tomando Decisiones .......................................................7
Bucles: Repitiendo Tareas en Dart...........................................................9
Flutter: Creando Aplicaciones ...............................................................10
¿Cómo Funciona Flutter? ......................................................................11
Tu Primera Aplicación............................................................................12
¿Más Widgets?......................................................................................14
¿Tu Propia Red Social?...........................................................................18
¿Y ahora qué? ........................................................................................31
Lo que vas a Aprender
¿Te imaginas ser capaz de hacer realidad todas esas ideas de aplicación que se te vienen a
la cabeza?
Pues si estás leyendo este libro, vas por buen camino, porque estás a punto de ser capaz
de crear tus propias aplicaciones.
Y créeme que si sigues este libro paso a paso, serás capaz de crear tu primera aplicación
HOY día mismo.
Siguiendo los pasos en esta guía, vas a sentirte cómodo leyendo código, y la programación
dejará de parecerte algo extremadamente complicado.
Intenté explicar todos los conceptos en este libro de la manera más intuitiva y simple que
pude, para que puedas aprender a programar y a crear aplicaciones lo más rápido posible.
Este es el comienzo de tu camino en la programación, y en la creación de aplicaciones
móviles.
Quiero que pienses en todas esas ideas de aplicación que se te han venido a la cabeza, y
que el deseo de llevarlas acabo sea la gasolina que te ayude a seguir aprendiendo para
hacerlas realidad.
Si de verdad te interesa aprender, te recomiendo que te unas al Discord de la comunidad,
donde podrás conocer gente igual que tú.
Ah, y a veces también hay gente que comparte su código.
El otro día alguien mandó el código de un bot para Instagram.
Pero bueno, empecemos.

Tu Primer Lenguaje: Dart

En esta guía aprenderemos sobre el lenguaje de programación Dart, creado por Google, y
para ello, necesitaremos un lugar donde probar nuestro código. Para esto, utilizaremos
Dart Pad.
Dart Pad es una herramienta en línea gratuita que te permite experimentar y practicar con
el lenguaje de programación Dart. Con Dart Pad, puedes escribir y ejecutar código Dart sin
tener que instalar nada en tu computador.
Para utilizar Dart Pad, simplemente abre la página web (www.dartpad.dev) en un
navegador y comienza a escribir código. Dart Pad ofrece una interfaz intuitiva y fácil de
usar, con un editor de código en un lado y una consola de salida en el otro. Puedes escribir
código Dart en el editor y ejecutarlo con un solo clic.
Te recomiendo fuertemente que utilices Dart Pad a medida que leas esta guía. Prueba los
códigos de ejemplo en cada capítulo, y experimenta creando tus propios tipos de
programas. Si haces eso, vas a aprender muchísimo más rápido.

Variables en Dart: Cajitas de Información

Las variables son uno de los elementos más importantes en cualquier lenguaje de
programación. Son como cajas donde guardamos información y las etiquetamos con
nombres para poder acceder a ellas más tarde.
Dart es un lenguaje tipado, lo que significa que debemos especificar el tipo de datos que
vamos a guardar en la variable antes de asignarle un valor. Los tipos de datos comunes en
Dart incluyen int (entero), float (decimal), strings (cadenas de texto), booleanos y listas.
Para crear una variable en Dart, debemos escribir el tipo de variable seguido de su nombre
y el valor que queremos asignar, dentro de la función main(). Por ejemplo:

Nota: Siempre agregamos “;” después de cada línea de código que escribamos.
En este ejemplo, creamos una variable llamada "edad" de tipo entero y le asignamos el
valor 27 dentro de la función main(). Luego, utilizamos la función print() para imprimir el
valor de la variable en la consola.
Además de asignar valores a las variables en el momento de su creación, también es
posible cambiar su valor en cualquier momento durante la ejecución del programa. Por
ejemplo:

En este caso, estamos modificando el valor de la variable "edad" de 27 a 28 y luego

imprimiendo su nuevo valor en la consola.

En este otro ejemplo, creamos una variable llamada mensaje de tipo String y le asignamos
el valor de "¡Hola, mundo!". Al ejecutar este código en Dart Pad, verás que se imprime
"¡Hola, mundo!" en la consola.
Es importante tener en cuenta que Dart es un lenguaje tipado fuerte, lo que significa que
no es posible asignar un valor de un tipo diferente al especificado en la creación de la
variable. Por ejemplo, si intentamos asignar un String a una variable de tipo int,
obtendremos un error.

Veamos ahora cómo crear listas en Dart, las cuáles necesitas entender para luego armar
tu aplicación.
En este ejemplo, creamos una lista llamada “numeros” que contiene los números enteros
del 1 al 5. La lista está definida como una lista de enteros utilizando el tipo List<int>.
Las listas son una colección de elementos ordenados. Estos elementos pueden ser
cualquier tipo de datos cómo enteros, strings, etc.
Para crear una lista, la creamos cómo cualquier otra variable, indicando el tipo de dato
List, y usando los corchetes []. Dentro de los corchetes agregamos nuestros elementos y
los separamos por comas.
Ahora que ya sabemos cómo crear y trabajar con variables en Dart, estamos listos para
profundizar en la creación de programas más avanzados.

Funciones: Creando una Receta

Las funciones son una de las herramientas más importantes en cualquier lenguaje de
programación, y Dart no es la excepción. Una función es como una receta que describe los
pasos para realizar una tarea específica. En Dart, podemos crear nuestras propias
funciones para realizar tareas repetitivas, organizar nuestro código y hacerlo más fácil de
mantener.
Imagina que quieres preparar una taza de café. La receta para hacer café es una función
que describe los pasos para preparar un café. De la misma manera, una función en Dart
describe los pasos que deben seguirse para realizar una tarea específica.
Para crear una función en Dart, debemos especificar el tipo de valor que la función
regresará (o void si la función no regresa ningún valor), seguido del nombre de la función,
los argumentos que la función requiere y el cuerpo de la función, que contiene los pasos
que deben seguirse para realizar la tarea.
Aquí hay un ejemplo de una función que toma dos números y regresa su suma:
En este ejemplo, la función se llama suma, toma dos argumentos de tipo entero llamados
a y b y regresa la suma de estos dos números como un entero. La palabra clave return
indica el valor que la función regresará.
Para llamar a una función en Dart, simplemente escribimos su nombre seguido de los
argumentos entre paréntesis. Por ejemplo:

En este ejemplo, estamos llamando a la función suma con los argumentos 3 y 4 y

asignando el resultado a la variable resultado. Luego, usamos la función print para
imprimir el valor de resultado en la consola.
En resumen, las funciones en Dart son una herramienta esencial para organizar y
simplificar nuestro código. Al crear funciones, podemos reutilizar código, hacer que
nuestro programa sea más fácil de mantener y mejorar su legibilidad. Con las funciones,
podemos dividir nuestro programa en tareas más pequeñas y manejables, lo que nos
permite centrarnos en resolver un problema a la vez.

Condicionales: Tomando Decisiones

En la vida diaria, tomamos decisiones constantemente basadas en ciertas condiciones. Por
ejemplo, si está lloviendo, decidimos llevar un paraguas; si no está lloviendo, decidimos no
llevarlo. De la misma manera, en programación, los condicionales nos permiten tomar
decisiones en función de ciertas condiciones.
En Dart, podemos usar la estructura if para ejecutar un bloque de código solo si se cumple
una determinada condición. Aquí hay un ejemplo de una estructura if que imprime "El
número es menor a 10" si el número es menor a 10:
También podemos usar la estructura if-else para ejecutar un bloque de código si se
cumple una determinada condición y otro bloque de código si no se cumple. Aquí hay un
ejemplo de una estructura if-else que imprime "El número es menor a 10" si el número es
menor a 10 y "El número es mayor o igual a 10" si no:

En Dart, tenemos varios operadores que podemos usar en nuestras condiciones, como >
(mayor que), < (menor que), >= (mayor o igual que), <= (menor o igual que), == (igual a) y
!= (no igual a). Aquí hay un ejemplo de una estructura if que usa el operador !=

Además, podemos usar la estructura else if para comprobar múltiples condiciones. En este
ejemplo, se imprime "El número es negativo" si el número es negativo, "El número es
cero" si el número es cero y "El número es positivo" si el número es positivo:
Bucles: Repitiendo Tareas en Dart
¿Alguna vez has estado haciendo tareas repetitivas, como ordenar tu habitación o hacer
tareas del colegio? Seguro que has pensado en que sería genial tener un robot que hiciera
esas tareas por ti, ¿verdad? Pues bueno, los bucles en programación son un poco como
tener un robot que haga tareas repetitivas por ti.
En Dart, podemos usar los bucles for y while para repetir una acción varias veces.
El bucle for tiene la siguiente estructura:

La inicialización es donde se establece una variable de control, que se utilizará para

controlar cuántas veces se ejecutará el bucle. La condición es la que se evalúa en cada
iteración del bucle y determina si se debe seguir ejecutando o no. La actualización es
donde se modifica la variable de control para que el bucle pueda continuar.
Por ejemplo, este sería un bucle for que imprime los números del 1 al 5:

En este caso, la variable de inicialización sería i de tipo int, mientras que la condición para
que el bucle siga corriendo es que la variable i sea menor o igual a 5. Finalmente, luego de
cada iteración, se aumenta el valor de i en 1.
Por otro lado, el bucle while tiene la siguiente estructura:
En un bucle while, la condición es la que se evalúa al comienzo de cada iteración y
determina si se debe seguir ejecutando o no.
En este caso, tenemos un bucle while que imprime los números del 1 al 5:

Ahora te estarás preguntando, ¿cuál es la diferencia entre un loop for y un bucle while?
En pocas palabras, el bucle for es útil cuando sabemos cuántas veces queremos repetir
una determinada acción, mientras que el bucle while es adecuado cuando queremos
repetir la acción mientras se cumpla cierta condición.

Flutter: Creando Aplicaciones

Ahora que ya aprendimos lo básico de el lenguaje de programación Dart, es momento de
saltar a lo más emocionante, crear aplicaciones.
Para crear aplicaciones, vamos a utilizar Flutter.
Flutter es una herramienta increíble que te permite dar vida a tus ideas y crear
aplicaciones de calidad en poco tiempo.
Además, con Flutter puedes desarrollar aplicaciones móviles para Android y IOS con un
solo código, es decir, creas una aplicación y funciona en todos los celulares, sin tener que
escribir el código dos veces.
Para instalar Flutter en tu máquina, puedes seguir los pasos en la página de instalación de
Flutter.
Pero si eres flojo (como yo), y te da pereza instalarlo, también puedes usar Flutter de
manera online yendo a la página de flutlab.io.
Elige una de estas dos opciones para que puedas empezar a crear tu primera aplicación.
Si eliges instalar Flutter en tu PC, te recomiendo que te guíes por mi curso GRATIS en
YouTube.
Si eliges usar Flutlab, simplemente crea una cuenta y crea un nuevo proyecto.
¿Cómo Funciona Flutter?
Cuando creas tu primer proyecto en Flutter, todo parece chino. O así me sentía yo.
Al ver tanto código que no entendía, pensaba que sería imposible llegar a entender todo
eso.
Pero todo se hizo más claro cuando entendí cómo funcionaba Flutter a grandes rasgos.
En Flutter, todo lo que se usa para construir la interfaz una aplicación móvil son widgets.
Ahora, ¿qué es un widget?, los widgets son como piezas de Lego que puedes ir
combinando para construir tu app.
Los widgets se organizan en un árbol de widgets, donde cada widget puede tener un
padre o un hijo. Piénsalo como un árbol genealógico.
Ahora vamos a ver unos ejemplos para que lo entiendas bien, porque quizás te siga
sonando como chino.
En este ejemplo, estamos creando un botón, con un texto de hijo:

El widget ElevatedButton, se usa para crear un botón, y recibe los parámetros

“onPressed” (la cual es una función, como las que vimos antes, solo que esta no tiene
nombre), y “child” (hijo), el cual es un Widget.
En este caso, el ElevatedButton vendría siendo el padre del Text, y el Text sería el hijo del
ElevatedButton.
Aquí va otro ejemplo donde creamos un Container (básicamente una caja), y le asignamos
un texto:

Como vemos, el Container tiene propiedades de width (ancho), height (altura), y child
vendría siendo el hijo.
En este caso, el Container es el padre del Text, y el Text es el hijo del Container.

Tu Primera Aplicación
Si aún no has creado un proyecto en Flutter, necesito que lo hagas, porque estamos a
punto de crear tu primera aplicación móvil, y lo vas a conseguir en menos de 5 minutos.
Apenas crees un nuevo proyecto en Flutter, se te debe haber creado una carpeta llamada
lib, dentro de la cual hay un archivo llamado main.dart.

En ese archivo, quiero que borres todo.

Si, en serio, bórralo todo.
Ahora, quiero que copies el siguiente código, que lo escribí como texto, así que puedes
copiarlo directamente.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
 return MaterialApp(
title: 'App',
home: Scaffold(
appBar: AppBar(
title: Text('Mi aplicación'),
),
body: Center(
child: Text('¡Hola mundo!',
style: TextStyle(fontSize:30)),
),
),
);
}
}

Ahora ese código que acabas de copiar, pégalo en el main.dart, y corre la aplicación.
Una vez que corras la aplicación en tu emulador, o donde sea que lo hayas corrido,
debería verse así:

Ahora, para entender el código, digámosle a nuestro querido ChatGPT que lo explique,
que de verdad, lo hace mucho mejor que yo.
Te recomiendo que vayas mirando el código a medida que vas leyendo la explicación.
ChatGPT, haz lo tuyo:
En este ejemplo, se crea un widget "MyApp" que es un “StatelessWidget”. El widget utiliza
el método "build" para construir la interfaz de usuario. Se utiliza un “MaterialApp” como
widget padre para proporcionar una estructura básica para la aplicación, y se le pasa un
título y un widget "Scaffold" como hijo.
El widget "Scaffold" se utiliza como un widget padre que envuelve un “AppBar” y un
"Center" que muestra el mensaje "¡Hola mundo!". El AppBar proporciona una barra de
navegación en la parte superior de la pantalla, mientras que el Center se utiliza para
centrar el texto en la pantalla.
Hola, soy yo de nuevo. Y me gustaría aclarar algunas cosas.
Primero, un StatelessWidget no es más que un tipo de widget que no cambia nunca. Es
decir, siempre se mantendrá exactamente igual.
Por otro lado, un método es una función. (No me maten programadores).
Y bueno, adivina quién acaba de crear su primera aplicación.
¡Tú!
Épico.
Ahora te reto a cambiar el texto del centro, y el texto que sale en la appbar.

¿Más Widgets?
Sigamos aprendiendo más sobre widgets, para que puedas crear aplicaciones más
complejas y personalizadas.
Como ya vimos, los widgets son los bloques de Lego que nos permiten construir nuestras
aplicaciones. Estos widgets se dividen en dos tipos: StatelessWidget y StatefulWidget.
Un StatelessWidget es un widget que no cambia ni su aspecto ni su comportamiento
después de haberse creado. Se suele utilizar para crear interfaces que no requieren
cambios de estado, como mostrar texto o imágenes estáticas.
Por otro lado, un StatefulWidget es un widget que puede cambiar su aspecto y/o
comportamiento después de haberse creado. Se utiliza para crear aplicaciones dinámicas
que requieren cambios, como botones que actualicen una variable, animaciones, etc.
En el último ejemplo utilizamos un StatelessWidget, así que ahora vamos a centrarnos en
los StatefulWidget.
Cuando creas un nuevo StatefulWidget, se crean dos clases. En este ejemplo, le di el
nombre de “WidgetDinamico” al StatefulWidget:

//Clase StatefulWidget: Se definen las propiedades que no cambian

//con el tiempo (de momento no es necesario que entiendas su
// contenido)

class WidgetDinamico extends StatefulWidget {

const WidgetDinamico({Key? key}) : super(key: key);
_WidgetDinamicoState createState() => _WidgetDinamicoState();
}

//Clase State: Esta clase se utiliza para almacenar y actualizar

//el estado del widget

class _WidgetDinamicoState extends State<WidgetDinamico> {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MyApp',
home: Scaffold(
body: Center(
child: Text("texto en el centro"),
),
),
);
}
}

Ahora vamos a agregar un nuevo widget llamado Column, el cual sirve para ordenar los
widget dentro de ella de manera vertical. Modificamos la clase State, y el código quedaría
así:

import 'package:flutter/material.dart';

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

class WidgetDinamico extends StatefulWidget {

const WidgetDinamico({Key? key}) : super(key: key);
_WidgetDinamicoState createState() => _WidgetDinamicoState();
}
class _WidgetDinamicoState extends State<WidgetDinamico> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MyApp',
home: Scaffold(
body: Center(
child: Column(
children: [Text("texto 1"), Text("texto 2"), Text("texto
3")],
),
)),
);
}
}

Es importante que veas que el widget Column, recibe el parámetro children (el cual es una
lista de widgets, por eso se ponen entre corchetes []), lo que hace que Column tenga más
de un solo hijo. En el ejemplo que acabamos de ver, Column tiene 3 hijos, que vendrían
siendo los 3 textos.
Y en el emulador, esto se ve así:

Los textos se ven muy pequeños, así que con el parámetro style, le otorgaremos un
TextStyle a cada texto, y cambiaremos el tamaño de la fuente con fontSize:

Text("texto 1", style: TextStyle(fontSize: 52))

Ahora nuestros textos se ven mucho más grandes:
Dentro de la lista de children de la Column, agreguemos un botón con ElevatedButton:

ElevatedButton(onPressed: () {}, child: Text("Click"))

En este caso, creamos un botón que al presionarlo (onPressed), llama a una función vacía
( () {} ), y tiene de hijo un texto que dice “Click”. Si corremos esto en el emulador:

Démosle ahora una función a este botón. Hagamos que el botón imprima en la consola
cada vez que le hacemos click. Para eso, dentro de la función de onPressed, usamos la
función print:

ElevatedButton(
onPressed: () {
print("hiciste click");
},
child: Text("Click"))

Al hacer click en el botón, ahora obtenemos el mensaje “hiciste click” en la consola. A mí

me aparece 3 veces porque lo apreté 3 veces.
¿Tu Propia Red Social?
Ahora que ya vimos lo básico de Flutter, es momento de lanzarnos a crear una aplicación más
compleja, donde introduciremos nuevos widgets que aún no hemos visto.

En este capítulo vamos a estar creando la siguiente aplicación, que es similar a la interfaz de perfil
de Instagram.

Vamos a ir paso a paso, para que entiendas todo el código que escribas.
Te recomiendo que en cada paso, guardes el código, y veas cómo la aplicación va tomando
forma.
Empecemos.
1. Lo primero que tenemos que hacer, es crear un nuevo proyecto. Si ya creaste uno,
simplemente abre el archivo “lib/main.dart”, y elimina todo el código generado
automáticamente.

Luego agrega el siguiente código:

import 'package:flutter/material.dart';
import 'instagram_user_page.dart';
 void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Instagram User Page',
home: InstagramUserPage(),
);
}
}

En este código, importamos el archivo instagram_user_page.dart, que es donde

crearemos la interfaz de usuario de Instagram. También creamos la clase MyApp,
que es el widget principal de la aplicación. En este widget, configuramos el título
de la aplicación (title) y la pantalla de inicio (home).

2. Ahora, en nuestra carpeta lib, creamos el archivo “Instagram_user_page.dart”.

Luego, hacemos el siguiente import:

import 'package:flutter/material.dart';

Esa línea importa el paquete “flutter/material.dart”, el cual nos permite acceder a

los widgets de Flutter.

3. En el archivo que acabamos de crear, creamos un StatelessWidget llamado

InstagramUserPage. Este vendrá siendo el widget encargado de la página de
usuario de Instagram.

class InstagramUserPage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
// ...
);
}
}
 Dentro de esta widget, sobrescribimos (@override) el método build y retornamos
un widget Scaffold. Este widget proporciona una estructura básica para nuestra
pantalla.

4. Agregamos un “CustomScrollView” al body de nuestro Scaffold. El widget de

CustomScrollView nos permite agregar varios elementos “scrolleables” (llamados
slivers) dentro de él.

return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
// ...
],
),
);

5. Ahora agregamos un “SliverAppBar” al “CustomScrollView”. Este widget nos

permite agregar una App Bar que se desplaza junto con el contenido.

SliverAppBar(
title: Text('Username'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
],
floating: true,
pinned: true,
snap: false,
expandedHeight: 250,
flexibleSpace: FlexibleSpaceBar(
background: Image.network(
'https://picsum.photos/seed/picsum/500/500',
fit: BoxFit.cover,
),
),
),
 En este código le ponemos el título de “Username” a nuestra SliverAppBar.
También agregamos un botón de menú en la esquina superior derecha con el
widget IconButton. Seteamos los parámetros “floating” y “pinned” en true, lo que
hará que la SliverAppBar se deslice junto con el contenido, y se mantenga fija en la
parte de superior de la pantalla.
Establecemos el “expandedHeight” en 250, lo que hará que la appbar sea más alta
de lo normal. También agregamos un “FlexibleSpaceBar” que contiene una imagen
de fondo.

Mientras corremos la aplicación, date un respiro para procesar toda esa

información. Ya va faltando poco.

6. Ahora, dentro de nuestro CustomScrollView, y después de la SliverAppBar,

agregamos un SliverList, el cual nos permitirá añadir una lista de elementos que se
desplazan con el contenido.

SliverList(
delegate: SliverChildListDelegate([
// ...
]),
),

En este código, establecemos el delegate como SliverChildListDelegate, que nos

permite agregar una lista de widgets como elementos hijos. Agregaremos varios
widgets dentro de la lista, lo que nos permitirá construir la mayor parte de nuestra
interfaz de usuario.

7. Dentro de la lista que acabamos de crear (con lista me refiero a los corchetes [] ),
agregamos un Container (básicamente una caja invisible).

Container(
margin: EdgeInsets.all(20),
//...
),

En este caso, establecemos un margen de 20 píxeles en todos los lados del

Container.

8. A este Container, le agregamos una Column como hijo. Recuerda que una Column
nos permite crear una columna vertical de widgets.
 Container(
margin: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// ...
],
),
),

En este caso, establecemos el crossAxisAlignment como CrossAxisAlignment.start,

lo que alineará todos los hijos de la columna a la izquierda.

9. Agregamos un Text widget dentro del Column para mostrar el nombre de usuario.

Text(
'Username',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),

En este código, establecemos el texto como "Username" y aplicamos un estilo en

negrita y un tamaño de fuente de 18.

10. Dentro de la misma Column, agregamos un SizedBox widget, que sirve para
agregar un pequeño espacio entre el nombre de usuario y la biografía.

SizedBox(height: 5),
En este caso, establecemos la altura de la caja en 5 píxeles.

11. Seguido de la SizedBox, añadimos otro Text para mostrar la biografía del usuario.

Text(
'User bio',
style: TextStyle(
color: Colors.grey,
 ),
),

En este código, establecemos el texto como "User bio" y le ponemos un color gris
claro.
12. Seguido del último texto, agregamos otro SizedBox para agregar un espacio antes
de la siguiente sección.

SizedBox(height: 20),

13. Después de la SizedBox, agregamos una Row (fila), la cual nos va a permitir
ordenar el número de publicaciones, seguidores, y seguidos, de forma horizontal.

Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
// ...
],
),

En este caso, establecemos el mainAxisAlignment como

MainAxisAlignment.spaceBetween, lo que distribuirá los elementos del Row
uniformemente en el espacio disponible.

14. Ahora, afírmate bien, que vamos a escribir mucho código, pero no te preocupes,
que con esto casi terminamos.

Dentro de la lista children de la Row que acabamos de crear, vamos a crear tres
elementos para mostrar los seguidores, los seguidos y el número de publicaciones.
Para cada una de estas estadísticas, vamos a agregar una Row, que contiene dos
Text: uno para mostrar la etiqueta del texto como “Posts”, “Followers” o
“Following”, y otro que muestra el número correspondiente. Para agregar un
espacio entre la etiqueta y el número, se usa una SizedBox con un ancho de 10.

Lee este código con calma, y si es necesario, vuelve a leer el párrafo de arriba.

Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
// Fila de Posts
 Row(
children: <Widget>[
// Texto etiqueta de “Posts”
Text(
'Posts',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
//Caja de ancho 10
SizedBox(
width: 10,
),
// Text para mostrar el número de Posts
Text(
'999',
style: TextStyle(
fontSize: 16,
),
),
],
),
//Fila de Followers
Row(
children: <Widget>[
Text(
'Followers',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
SizedBox(
width: 10,
),
Text(
'999',
style: TextStyle(
fontSize: 16,
),
 ),
],
),
// Fila de Following
Row(
children: <Widget>[
Text(
'Following',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
SizedBox(
width: 10,
),
Text(
'999',
style: TextStyle(
fontSize: 16,
),
),
],
),
],
),

15. Seguido de esas tres filas, agregamos una SizedBox para ganar espacio, y
agregamos un botón de seguir.

SizedBox(height: 20),
ElevatedButton(
child: Text('Follow'),
onPressed: () {},
),

16. Ahora solo nos falta mostrar las fotos en el perfil, para esto, agregamos un
GridView, fuera de la Column donde pusimos el botón de seguir, pero dentro de
los children de la SliverList.

GridView.count(
 shrinkWrap: true,
crossAxisCount: 3,
mainAxisSpacing: 2,
crossAxisSpacing: 2,
children: List.generate(9, (index) {
return Image.network(
'https://picsum.photos/id/$index/300/300',
fit: BoxFit.cover,
);
}),
),

En este código, estamos creando un GridView con una cuadrícula de 3 columnas y

un total de 9 imágenes. Establecemos shrinkWrap como true, lo que hará que el
GridView se ajuste automáticamente al contenido. También establecemos
mainAxisSpacing y crossAxisSpacing como 2 para agregar un pequeño espacio
entre las imágenes. Para cada imagen, estamos utilizando el método
Image.network para cargar una imagen de la página https://picsum.photos
utilizando el índice de iteración como identificador. Por último, establecemos el fit
como BoxFit.cover para asegurarnos de que la imagen ocupe todo el espacio
disponible sin distorsionarse.

Y finalmente, después de seguir todos esos pasos, tu aplicación debería quedar así:
El código completo:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Instagram User Page',
home: InstagramUserPage(),
debugShowCheckedModeBanner: false,
);
}
}

class InstagramUserPage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text('Username'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
],
floating: true,
pinned: true,
snap: false,
expandedHeight: 250,
flexibleSpace: FlexibleSpaceBar(
background: Image.network(
 'https://picsum.photos/seed/picsum/500/500',
fit: BoxFit.cover,
),
),
),
SliverList(
delegate: SliverChildListDelegate([
Container(
margin: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Username',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
SizedBox(height: 5),
Text(
'User bio',
style: TextStyle(
color: Colors.grey,
),
),
SizedBox(height: 20),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Text(
'Posts',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
 SizedBox(
width: 10,
),
Text(
'999',
style: TextStyle(
fontSize: 16,
),
),
],
),
Row(
children: <Widget>[
Text(
'Followers',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
SizedBox(
width: 10,
),
Text(
'999',
style: TextStyle(
fontSize: 16,
),
),
],
),
Row(
children: <Widget>[
Text(
'Following',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
SizedBox(
 width: 10,
),
Text(
'999',
style: TextStyle(
fontSize: 16,
),
),
],
),
],
),
SizedBox(height: 20),
ElevatedButton(
child: Text('Follow'),
onPressed: () {},
),
],
),
),
GridView.count(
shrinkWrap: true,
crossAxisCount: 3,
mainAxisSpacing: 2,
crossAxisSpacing: 2,
children: List.generate(9, (index) {
return Image.network(
'https://picsum.photos/id/$index/300/300',
fit: BoxFit.cover,
);
}),
),
]),
),
],
),
);
}
}
Felicidades por haber llegado a este punto de la guía, se notan mucho tus ganas de
aprender.
Si estás algo confundido, o todavía no sabes lo que estás haciendo, no te preocupes, es
normal, yo también me sentía así.
Te recomiendo que, luego de descansar, repases el contenido que viste en este libro, e
intentes seguir nuevamente este último proyecto que acabamos de crear.
Pero oye, que sepas que por el simple hecho de haber seguido esta guía, ya dejaste de ser
un completo principiante en Flutter.
Ya sabes más que el 90% de personas que desean aprender a programar pero nunca lo
intentan.

¿Y ahora qué?
Ahora mi querido aprendiz, es momento de que sigas tu camino por tu cuenta.
Nah es broma.
No te voy a dejar solo.
Quiero guiarte para que sigas aumentando tu conocimiento.
Por eso te sugiero que estés atento a tu correo, donde te voy a estar compartiendo mucha
más información para acompañarte en tu camino.
Aún queda mucho por aprender.
Espero pronto poder enseñarte a cómo monetizar tu aplicación, y a generar ingresos de
tus creaciones.
Porque oye, no empezaste a crear aplicaciones porque sí.
Por lo menos yo no.
Pero bueno, como te dije, estate atento a tu correo.
Nos vemos.