Tabela de Conteúdos

O que você vaiAprender.............................................................................3

SuaPrimeiraLinguagem:Dart.........................................................................3
VariáveisemDart:CaixinhasdeInformação...............................................4
Funciones:CreandounaRecetu m ..............................................................6
Condicionales:TomandoDecisiones .......................................................7
Laços:RepetindoTarefasemDart...........................................................9
Flutter: CriandoAplicações ...............................................................10
ComoFuncionaoFlutter?......................................................................11
SuaPrimeiraAplicação............................................................................12
MaisWidgets?......................................................................................14
SuaPrópriaRedeSocial?...........................................................................18
E agora o que?
Lo que vas a Aprender
Você consegue imaginar ser capaz de tornar todas essas ideias de aplicativo que surgem em sua mente uma realidade?
a cabeça?
Pois se você está lendo este livro, você está no caminho certo, porque você está prestes a ser capaz
de creartus próprias aplicações.
E acredita que se seguir este livro passo a passo, você será capaz de criar seu primeiro aplicativo.
HOJE dia mesmo.
Seguindo os passos nesta guia, você se sentirá confortável lendo código e programando.
deixará de parecer algo extremamente complicado.
Tentei explicar todos os conceitos neste livro da maneira mais intuitiva e simples que
pude, para que você possa aprender a programar e a criar aplicativos o mais rápido possível.

Este é o começo do seu caminho na programação e na criação de aplicativos.

móveis.
Quero que você pense em todas essas ideias de aplicativo que vieram à sua cabeça, e
que o desejo de realizá-las seja a gasolina que te ajude a continuar aprendendo para
torná-las realidade.
Se realmente te interessa aprender, recomendo que te unasalDiscord da comunidade,
onde você poderá conhecer pessoas iguais a você.

Ah, e às vezes também há pessoas que compartilham seu código.

Outro dia alguém enviou o código de um bot para o Instagram.

Mas bem, vamos começar.

Sua Primeira Linguagem: Dart

Nesta guia, aprenderemos sobre a linguagem de programação Dart, criada pelo Google, e
para isso, precisaremos de um lugar onde testar nosso código. Para isso, utilizaremos
Dart Pad.
Dart Pad es una herramienta en línea gratuita que te permite experimentar y practicar con
a linguagem de programação Dart. Com o Dart Pad, você pode escrever e executar código Dart sem
ter que instalar nada no seu computador.
Para utilizar o Dart Pad, simplesmente abra a página da web ([Link]) em um
navegador e comece a escrever código. Dart Pad oferece uma interface intuitiva e 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.
Eu recomendo fortemente que você use o Dart Pad à medida que lê este guia. Experimente os
códigos de exemplo em cada capítulo, e experimente criar seus próprios tipos de
programas. Se você fizer isso, vai aprender muito mais rápido.

Variáveis em Dart: Caixinhas de Informação

As variáveis são um dos elementos mais importantes em qualquer linguagem de
programação. São como caixas onde guardamos informações e as etiquetamos com
nomes para poder acessá-las mais tarde.
Dart é uma linguagem tipada, o que significa que devemos especificar o tipo de dados que
vamos a guardar na variável antes de atribuir um valor. Os tipos de dados comuns em
Dart inclui int (inteiro), float (decimal), strings (cadeias de texto), booleanos e listas.
Para criar uma variável em Dart, devemos escrever o tipo da variável seguido de seu nome.
e o valor que queremos atribuir, dentro da função main(). Por exemplo:

Nota: Sempre adicionamos “;” após cada linha de código que escrevemos.
Neste exemplo, criamos uma variável chamada "idade" do tipo inteiro e atribuímos a ela
valor 27 dentro da função main(). Depois, usamos a função print() para imprimir o
valor da variável no console.
Além de atribuir valores às variáveis no momento de sua criação, também é
possível mudar seu valor a qualquer momento durante a execução do 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 tipoStringy le asignamos
o valor de "¡Hola, mundo!". Ao executar este código no Dart Pad, você verá que é impresso
Olá, mundo!
É importante ter em mente que Dart é uma linguagem fortemente tipada, o que significa que
não é possível atribuir um valor de um tipo diferente do especificado na criação da
variável. Por exemplo, se tentarmos atribuir uma String a uma variável do tipo int,
teremos um erro.

Vamos agora ver como criar listas em Dart, as quais você precisa entender para depois montar
sua aplicação.
En este ejemplo, creamos una lista llamada“numeros”que contiene los números enteros
de 1 a 5. A lista é definida como uma lista de inteiros usando o tipo List<int>.
As listas são uma coleção de elementos ordenados. Esses elementos podem ser
qualquer tipo de dados como inteiros, strings, etc.
Para criar uma lista, nós a criamos como qualquer outra variável, indicando o tipo de dado
List, y usando los corchetes []. Dentro de los corchetes agregamos nuestros elementos y
os separamos por vírgulas.
Agora que já sabemos como criar e trabalhar com variáveis em Dart, estamos prontos para
profundizar na criação de programas mais avançados.

Funções: Criando uma Receita

As funções são uma das ferramentas mais importantes em qualquer linguagem de
programação, e Dart não é a exceção. Uma função é como uma receita que descreve os
passos para realizar uma tarefa específica. Em Dart, podemos criar nossos próprios
funções para realizar tarefas repetitivas, organizar nosso código e torná-lo mais fácil de
manter.
Imagina que você quer preparar uma xícara de café. A receita para fazer café é uma função.
que descreve os passos para preparar um café. Da mesma maneira, uma função em Dart
describe los pasos que deben seguirse para realizar una tarea específica.
Para criar uma função em Dart, devemos especificar o tipo de valor que a função
regresará (o void si la función no regresa ningún valor), seguido del nombre de la función,
os argumentos que a função requerem e o corpo da função, que contém os passos
que devem ser seguidas para realizar a tarefa.

Aqui está um exemplo de uma função que pega dois números e retorna sua soma:
Neste exemplo, a função chamada soma recebe dois argumentos do tipo inteiro chamados
ayby retorna a soma desses dois números como um inteiro. A palavra clavereturn
indica o valor que a função retornará.
Para chamar uma função em Dart, basta escrever seu nome seguido de
argumentos entre parênteses. Por exemplo:

Neste exemplo, estamos chamando a função soma com os argumentos 3 e 4 e

assignando o resultado à variableresultado. Em seguida, usamos a funçãoprintpara
imprimir el valor deresultadoen la consola.
Em resumo, as funções em Dart são uma ferramenta essencial para organizar e
simplificar nosso código. Ao criar funções, podemos reutilizar código, fazer com 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-nos concentrar em resolver um problema de cada vez.

Condicionais: Tomando Decisões

Na vida diária, tomamos decisões constantemente baseadas em certas condições. Por
ejemplo, si está lloviendo, decidimos llevar un paraguas; si no está lloviendo, decidimos no
levá-lo. Da mesma forma, na programação, os condicionais nos permitem tomar
decisões com base em certas condições.
Em Dart, podemos usar a estrutura if para executar um bloco de código apenas se a condição for atendida.
uma certa condição. Aqui está um exemplo de uma estrutura if que imprime "O"
número é menor que 10" se o número for menor que 10:
También podemos usar la estructuraif-elsepara ejecutar un bloque de código si se
cumpre uma determinada condição e outro bloco de código se não for cumprida. Aqui está um
exemplo de uma estrutura if-else que imprime "O número é menor que 10" se o número for
menor a 10 y "El número es mayor o igual a 10" si no:

Em Dart, temos vários operadores que podemos usar em nossas condições, como >
(mayor que),<(menor que),>=(mayor o igual que),<=(menor o igual que),==(igual a) y
!=(não igual a). Aqui está um exemplo de uma estrutura if que usa o operador !=

Além disso, podemos usar a estrutura else if para verificar múltiplas condições. Neste
ejemplo, se imprime "El número es negativo" si el número es negativo, "El número es
cero" se o número é zero e "O número é positivo" se o número é positivo:
Laços: Repetindo Tarefas em Dart
Você já esteve fazendo tarefas repetitivas, como arrumar seu quarto ou fazer
tareas del colegio? Seguro que has pensado en que sería genial tener un robot que hiciera
essas tarefas por você, não é? Pois bem, os loops em programação são um pouco como
ter um robô que faça tarefas repetitivas por você.
Em Dart, podemos usar os loops for e while para repetir uma ação várias vezes.
O loop possui a seguinte estrutura:

A inicialização é onde se estabelece uma variável de controle, que será utilizada para
controlar quantas vezes o loop será executado. A condição é a que é avaliada em cada
iteraçãodobuclee determine se deve continuar executando ou não. Aatualizaçãoé
donde se modifica la variable de control para que el bucle pueda continuar.
Por exemplo, este seria um loop que imprime os números de 1 a 5:

Neste caso, a variável de inicialização seria do tipo ponto, enquanto a condição para
que o loop continue rodando é que a variável seja menor ou igual a 5. Finalmente, depois de
a cada iteração, aumenta-se o valor de 1.
Por outro lado, o loop while tem a seguinte estrutura:
Em um loop while, a condição é avaliada no início de cada iteração e
determina se deve continuar a execução ou não.
Neste caso, temos um loop while que imprime os números de 1 a 5:

Ahora te estarás preguntando, ¿cuál es la diferencia entre un loopfory un buclewhile?

Em poucas palavras, o loop é útil quando sabemos quantas vezes queremos repetir.
uma determinada ação, enquanto o loop while é adequado quando queremos
repetir la acción mientras se cumpla cierta condición.

Flutter: CriandoAplicações
Agora que já aprendemos o básico da linguagem de programação Dart, é momento de
saltar para o mais emocionante, criar aplicações.
Para criar aplicativos, vamos utilizar o Flutter.
Flutter é uma ferramenta incrível que te permite dar vida às suas ideias e criar
aplicaciones de calidad en poco tiempo.
Além disso, com o Flutter você pode desenvolver aplicativos móveis para Android e iOS com um
somente código, ou seja, você cria um aplicativo e ele funciona em todos os celulares, sem precisar
escrever o código duas vezes.
Para instalar o Flutter na sua máquina, você pode seguir os passos na página deinstalação de
Flutter.
Mas se você é preguiçoso (como eu) e dá preguiça instalá-lo, também pode usar Flutter de
maneira online indo para a página [Link].

Escolha uma dessas duas opções para que você possa começar a criar seu primeiro aplicativo.

Se você escolher instalar o Flutter no seu PC, recomendo que siga meucurso GRATIS em
YouTube.
Se você escolher usar o Flutlab, basta criar uma conta e criar um novo projeto.
Como Funciona o Flutter?
Quando você cria seu primeiro projeto em Flutter, tudo parece chinês. Ou assim eu me sentia.

Ao ver tanto código que não entendia, pensava que seria impossível chegar a entender tudo
isso.
Mas tudo se tornou mais claro quando entendi como o Flutter funcionava em linhas gerais.

No Flutter, tudo o que é usado para construir a interface de um aplicativo móvel são widgets.
Agora, o que é um widget? Os widgets são como peças de Lego que você pode montar.
combinando para construir seu aplicativo.

Os widgets são organizados em uma árvore de widgets, onde cada widget pode ter um
pai ou um filho. Pense nisso como uma árvore genealógica.

Agora vamos ver alguns exemplos para que você entenda bem, porque talvez eu continue
sonando como chino.
Neste exemplo, estamos criando um botão, com um texto filho:

O widget ElevatedButton é usado para criar um botão e recebe os parâmetros

"onPressed" (which is a function, like the ones we saw before, except that it does not have
nome), e "filho"(child), que é um Widget.
Neste caso, o ElevatedButton seria o pai do Text, e o Text seria o filho do
BotãoElevado.
Aqui vai outro exemplo onde criamos umContainer (basicamente uma caixa), e lhe atribuímos
um texto:

Como vemos, o Container tem propriedades de largura, altura e filho.

vendría sendo o filho.
Neste caso, o Container é o pai do Text, e o Text é o filho do Container.

Sua PrimeiraAplicação
Se você ainda não criou um projeto em Flutter, preciso que você faça isso, porque estamos a
ponto de criar seu primeiro aplicativo móvel, e você vai conseguir em menos de 5 minutos.
Apenas crie um novo projeto em Flutter, deve ter sido criada uma pasta chamada
lib, dentro da qual há um arquivo chamado [Link].

Nesse arquivo, quero que apague tudo.

Sim, sério, apague tudo.
Ahora, quiero que copies el siguiente código, que lo escribí como texto, así que puedes
copiarlo directamente.

importar 'pacote:flutter/[Link]';

voidmain() {
runApp(MyApp());
}

class MinhaAplicação estende StatelessWidget {

@sobrescrever
Widgetbuild(BuildContextcontext) {
 returnMaterialApp(
title:'App',
home:Scaffold(
appBar:AppBar(
title:Text('Mi aplicación'),
),
body:Center(
child:Text('¡Hola mundo!',
estilo:TextStyle(tamanhoFonte:30))
),
),
);
}
}

Agora cole esse código que você acabou de copiar no [Link] e execute o aplicativo.
Uma vez que você execute o aplicativo em seu emulador, ou onde quer que o tenha executado,
deveria parecer assim:

Agora, para entender o código, vamos pedir ao nosso querido ChatGPT que o explique,
que de verdade, ele faz muito melhor do que eu.

Eu recomendo que você vá olhando o código à medida que lê a explicação.

ChatGPT, faça o que você faz:

Neste exemplo, é criado um widget "MyApp" que é um "StatelessWidget". O widget utiliza

o método "build" para construir a interface do usuário. É utilizado um "MaterialApp" como
widget pai para fornecer uma estrutura básica para o aplicativo, e é passado um
título y un widget "Scaffold" como hijo.
O widget "Scaffold" é utilizado como um widget pai que envolve um "AppBar" e um
"Centro" que mostra a mensagem "Olá mundo!". O AppBar fornece uma barra de
navegação na parte superior da tela, enquanto o Centerse é utilizado para
centrar o texto na tela.
Olá, sou eu de novo. E eu gostaria de esclarecer algumas coisas.

Primeiro, um StatelessWidget não é mais do que um tipo de widget que nunca muda. É
dizer, sempre permanecerá exatamente igual.
Por outro lado, um método é uma função. (Não me matem programadores).
E bem, adivinha quem acabou de criar seu primeiro aplicativo.
Você!
Épico.
Ahora te reto a cambiar el texto del centro, y el texto que sale en la appbar.

Mais Widgets?
Sigamos aprendendo mais sobre widgets, para que você possa criar aplicações mais
complexas e personalizadas.
Como já vimos, os widgets são os blocos de Lego que nos permitem construir nossas
aplicativos. Esses widgets são divididos em dois tipos: StatelessWidget e StatefulWidget.
Um StatelessWidget é um widget que não muda nem sua aparência nem seu comportamento.
depois de ter sido criado. Geralmente é utilizado para criar interfaces que não requerem
cambios de estado, como mostrar texto o imágenes estáticas.
Por outro lado, um StatefulWidget é um widget que pode mudar sua aparência e/ou
comportamento após ter sido criado. É utilizado para criar aplicações dinâmicas
que requerem mudanças, como botões que atualizem uma variável, animações, etc.
En el último ejemplo utilizamos un StatelessWidget, así que ahora vamos a centrarnos en
os StatefulWidget.
Quando você cria um novo StatefulWidget, duas classes são criadas. Neste exemplo, eu dei a ele o
nome de “WidgetDinamico” ao StatefulWidget:

//Classe StatefulWidget: As propriedades que não mudam são definidas

//com o tempo (de momento não é necessário que entendas seu
// conteúdo)

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

//Classe Estado: Esta classe é utilizada para armazenar e atualizar

//el estado del widget

class_WidgetDinamicoStateextendsState<WidgetDinamico> {
@sobrepor
Widgetbuild(BuildContextcontext) {
retornarMaterialApp(
title:'MyApp',
home:Scaffold(
body:Center(
child:Text("texto en el centro"),
),
),
);
}
}

Agora vamos adicionar um novo widget chamado Coluna, que serve para ordenar os
widget dentro de ela de maneira vertical. Modificamos a classe State, e o código ficaria
assim:

importar 'package:flutter/[Link]';

voidmain() {
runApp(WidgetDinamico());
}

class WidgetDinamico extends StatefulWidget {

constWidgetDinamico({Key?key}) :super(key:key);
_WidgetDinamicoState createState()=>_WidgetDinamicoState();
}
class_WidgetDinamicoStateextendsState<WidgetDinamico> {
@sobrescrever
Widgetbuild(BuildContextcontext) {
returnMaterialApp(
title:'MyApp',
home:Scaffold(
body:Center(
child:Column(
children: [Text("texto 1"),Text("texto 2"),Text("texto
3")],
),
)),
);
}
}

É importante que você veja que o widgetColumn recebe o parâmetro children (o qual é uma
lista de widgets, por eso se ponen entre corchetes []), lo que hace que Column tenga más
de um único filho. No exemplo que acabamos de ver, a Coluna tem 3 filhos, que viriam
siendo los 3 textos.
E no emulador, isso se parece assim:

Os textos parecem muito pequenos, então com o parâmetro style, vamos atribuir um
TextStylea cada texto, y cambiaremos el tamaño de la fuente con fontSize:

Text("texto 1",style:TextStyle(fontSize:52))
Agora nossos textos estão muito maiores:
Dentro da lista de children da Column, vamos adicionar um botão com ElevatedButton:

BotãoElevado(onPressed: () {},child:Texto("Clique"))
Neste caso, criamos um botão que ao ser pressionado (onPressed), chama uma função vazia.
( () {} ), e tem como filho um texto que diz “Clique”. Se executarmos isso no emulador:

Démosle ahora una función a este botón. Hagamos que el botón imprima en la consola
cada vez que clicamos. Para isso, dentro da função onPressed, usamos a
funçãoimprimir:

ElevatedButton(
onPressed: () {
print("você clicou");
},
child:Text("Click"))

Ao clicar no botão, agora obtemos a mensagem “você clicou” no console. A mim

me aparece 3 vezes porque eu apertei 3 vezes.
Sua Própria Rede Social?
Ahora que ya vimos lo básico de Flutter, es momento de lanzarnos a crear una aplicación más
complexa, onde introduziremos novos widgets que ainda não vimos.

Neste capítulo, vamos criar o seguinte aplicativo, que é semelhante à interface de perfil.
do Instagram.

Vamos a ir paso a paso, para que entiendas todo el código que escribas.
Eu recomendo que em cada passo, você salve o código e veja como a aplicação vai tomando forma.
forma.
Empecemos.
1. A primeira coisa que precisamos fazer é criar um novo projeto. Se você já criou um,
simplesmente abra o arquivo “lib/[Link]” e exclua todo o código gerado
automaticamente.

Depois adicione o seguinte código:

importar 'package:flutter/[Link]';
importar 'instagram_user_page.dart';
 voidmain() {
executarApp(MeuApp());
}

class MeuApp estende StatelessWidget {

@sobrescrever
Widgetbuild(BuildContextcontext) {
returnMaterialApp(
title:'Instagram User Page',
home:InstagramUserPage(),
);
}
}

Neste código, importamos o arquivo instagram_user_page.dart, que é onde

crearemos la interfaz de usuario de Instagram. También creamos la claseMyApp,
que é o widget principal da aplicação. Neste widget, configuramos o título
do aplicativo (título) e da tela inicial (início).

[Link], na nossa pasta lib, criamos o arquivo “Instagram_user_page.dart”.

Em seguida, fazemos a seguinte importação:

importar 'pacote:flutter/[Link]';

Essa linha importa o pacote "flutter/[Link]", o qual nos permite acessar

os widgets do Flutter.

3. No arquivo que acabamos de criar, criamos um StatelessWidget chamado

InstagramUserPage. Este será o widget responsável pela página de
usuário de Instagram.

classPaginaUsuarioInstagramestendeWidgetSemEstado{
@sobrescrever
Widgetbuild(BuildContext context) {
retornarEstrutura()
// ...
);
}
}
 Dentro deste widget, sobrescrevemos (@override) o método build e retornamos
um widgetScaffold. Este widget fornece uma estrutura básica para nossa
tela.

[Link] um “CustomScrollView” ao corpo do nosso Scaffold. O widget de

CustomScrollView nos permite agregar vários elementos “roláveis” (chamados
slivers) dentro de él.

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

[Link] agregamos un “SliverAppBar” al “CustomScrollView”. Este widget nos

permite agregar uma App Bar que se desloca junto com o conteúdo.

SliverAppBar
title:Text('Username'),
actions: <Widget>[
BotãoÍcone(
icon:Icon([Link]),
onPressed: () {},
),
],
floating:true,
pinned:true,
snap:false,
expandedHeight:250,
flexibleSpace:FlexibleSpaceBar(
fundo:[Link](
'[Link]
fit:[Link],
),
),
),
 Neste código, damos ao nosso SliverAppBar o título de 'Nome de usuário'.
Também adicionamos um botão de menu no canto superior direito com o
widget IconButton. Definimos os parâmetros "flutuante" e "fixado" como verdadeiro, o que
fará com que a SliverAppBar desça junto com o conteúdo, e se mantenha fixa na
parte superior da tela.
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 fundo.

Enquanto executamos o aplicativo, faça uma pausa para processar tudo isso.
informação. Já está faltando pouco.

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

agregamos um SliverList, o qual nos permitirá adicionar uma lista de elementos que se
deslocam com o conteúdo.

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

Neste código, definimos o delegate como SliverChildListDelegate, que nos

permite agregar una lista de widgets como elementos hijos. Agregaremos varios
widgets dentro da lista, o que nos permitirá construir a maior parte da nossa
interface de usuário.

7. Dentro da lista que acabamos de criar (com lista refiro-me aos colchetes [])
agregamos um Container (basicamente uma caixa invisível).

Container(
margem: [Link](20),
//...
),

Neste caso, estabelecemos uma margem de 20 pixels em todos os lados do

Container.

8. A este Container, le agregamos una Column como hijo. Recuerda que una Column
nos permite criar uma coluna vertical de widgets.
 Contêiner(
margem: [Link](20)
child:Column(
crossAxisAlignment:[Link],
children: <Widget>[
// ...
],
),
),

En este caso, establecemos elcrossAxisAlignmentcomo [Link],

o que alinhará todos os filhos da coluna à esquerda.

9. Agregamos unTextwidget dentro delColumnpara mostrar el nombre de usuario.

Texto(
Nome de usuário
estilo:TextoEstilo(
fontWeight:[Link],
fontSize:18,
),
),

Neste código, definimos o texto como "Nome de usuário" e aplicamos um estilo em

negrita e um tamanho de fonte de 18.

10. Dentro da mesma coluna, adicionamos um widget SizedBox, que serve para
agregar um pequeno espaço entre o nome de usuário e a biografia.

SizedBox(height:5),
Neste caso, estabelecemos a altura da caixa em 5 pixels.

11. Seguido da SizedBox, adicionamos outro Text para mostrar a biografia do usuário.

Text(
Bio do usuário
estilo:TextStyle(
color:[Link],
 ),
),

En este código, establecemos el texto como "User bio" y le ponemos un color gris
claro.
12. Seguido del último texto, agregamos otroSizedBoxpara agregar un espacio antes
da seção seguinte.

SizedBox(height:20)

13. Depois do SizedBox, adicionamos uma Row (linha), que nos permitirá
ordenar el número de publicaciones, seguidores, y seguidos, de forma horizontal.

Linha(
mainAxisAlignment:[Link],
children: <Widget>[
// ...
],
),

Em este caso estabelecemos o alinhamentoPrincipal como

[Link], o que distribuirá os elementos do Row
uniformemente no espaço disponível.

14. Agora, segure-se bem, porque vamos escrever muito código, mas não se preocupe,
que com isso quase terminamos.

Dentro da lista children daRow que acabamos de criar, vamos criar três
elementos para mostrar los seguidores, los seguidos y el número de publicaciones.
Para cada uma dessas estatísticas, vamos adicionar uma linha, que contém duas
um para mostrar o rótulo do texto como "Publicações", "Seguidores" ou
“Seguindo”, e outro que mostra o número correspondente. Para adicionar um
espaço entre a etiqueta e o número, usa-se uma SizedBox com uma largura de 10.

Leia este código com calma e, se necessário, releia o parágrafo acima.

Linha(
mainAxisAlignment:[Link],
children: <Widget>[
// Fila de Posts
 Linha(
children: <Widget>[
// Texto etiqueta de “Posts”
Text(
Publicações
style:TextStyle(
fontWeight:[Link],
),
),
//Caja de largura 10
SizedBox(
width:10,
),
// Texto para mostrar o número de Posts
Text(
999
style:TextStyle(
fontSize:16,
),
),
],
),
//Fila de Seguidores
Linha(
children: <Widget>[
Texto(
Seguidores
style:TextStyle(
fontWeight:[Link],
),
),
SizedBox(
width:10,
),
Text(
999
estilo:TextoEstilo(
fontSize:16,
),
 ),
],
),
// Fila de Seguidores
Fila(
children: <Widget>[
Texto(
Seguindo
estilo:TextStyle(
fontWeight:[Link],
),
),
SizedBox(
width:10,
),
Texto(
999
estilo:TextStyle(
fontSize:16,
),
),
],
),
],
),

15. Seguido de esas três filas, agregamos uma SizedBox para ganhar espaço, e
adicionamos um botão de seguir.

SizedBox(altura: 20)
BotãoElevado(
child:Text('Follow'),
onPressed: () {},
),

16. Agora só falta mostrar as fotos no perfil, para isso, adicionamos um

GridView, fora da coluna onde colocamos o botão de seguir, mas dentro de
os filhos da SliverList.

[Link](
 shrinkWrap:true,
crossAxisCount:3,
mainAxisSpacing:2,
crossAxisSpacing:2,
children:[Link](9, (index) {
[Link](
[Link]
fit:[Link],
);
}),
),

Neste código, estamos criando um GridView com uma grade de 3 colunas e

um total de 9 imagens. Estabelecemos shrinkWrap como true, o que fará com que o
GridView se ajuste automáticamente al contenido. También establecemos
mainAxisSpacing y crossAxisSpacing como 2 para agregar un pequeño espacio
entre as imagens. Para cada imagem, estamos utilizando o método
[Link] cargar una imagen de la página [Link]
utilizando el índice de iteración como identificador. Por último, establecemos el fit
como [Link] para asegurarnos de que la imagen ocupe todo el espacio
disponível sem se distorcer.

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

importar 'package:flutter/[Link]';

voidmain() {
executarApp(MinhaApp());
}

class MeuApp estende StatelessWidget {

@sobrescrever
Widgetbuild(BuildContextcontext) {
retornarMaterialApp(
title:'Instagram User Page',
home:InstagramUserPage(),
debugShowCheckedModeBanner:false,
);
}
}

classPáginaDeUsuárioDoInstagramestendeWidgetSemEstado{
@sobrescrever
Widgetbuild(BuildContextcontext) {
retornarScaffold(
body:CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title:Text('Username'),
actions: <Widget>[
BotãoÍcone(
icon:Icon([Link]),
onPressed: () {},
),
],
floating:true,
pinned:true,
snap:false,
expandedHeight:250,
flexibleSpace:FlexibleSpaceBar(
background:[Link](
 '[Link]
fit:[Link],
),
),
),
SliverList(
delegate:SliverChildListDelegate([
Container
margem: [Link](20),
child:Column(
crossAxisAlignment:[Link],
children: <Widget>[
Text(
Nome de usuário
style:TextStyle(
fontWeight:[Link],
fontSize:18,
),
),
SizedBox(height: 5)
Text(
Biografia do usuário

estilo:TextStyle(
color:[Link],
),
),
SizedBox(height:20),
Linha(
mainAxisAlignment:
[Link]
children: <Widget>[
Linha(
children: <Widget>[
Text(
Postagens
estilo: EstiloDeTexto(
fontWeight:[Link],
),
),
 SizedBox(
width:10,
),
Text(
999
estilo:TextoEstilo(
fontSize:16,
),
),
],
),
Linha(
children: <Widget>[
Text(
'Followers',
estilo:TextoEstilo(
fontWeight:[Link],
),
),
SizedBox(
width:10,
),
Text(
999
estilo:TextStyle(
fontSize:16,
),
),
],
),
Linha(
children: <Widget>[
Texto(
Seguindo
estilo:TextStyle(
fontWeight:[Link],
),
),
SizedBox(
 width:10,
),
Texto(
999
style:TextStyle(
fontSize:16,
),
),
],
),
],
),
SizedBox(height:20)
BotãoElevado
child:Text('Follow'),
onPressed: () {},
),
],
),
),
[Link](
shrinkWrap:true,
crossAxisCount:3,
mainAxisSpacing:2,
crossAxisSpacing:2,
children:[Link](9, (index) {
[Link](
'[Link]
fit: [Link],
);
}),
),
]),
),
],
),
);
}
}
Parabéns por ter chegado a este ponto do guia, suas ganas de se destacam muito.
aprender.
Se você está um pouco confuso, ou ainda não sabe o que está fazendo, não se preocupe, é
normal, eu também me sentia assim.
Te recomendo que, depois de descansar, revise o conteúdo que viu neste livro, e
tente novamente seguir este último projeto que acabamos de criar.
Mas ouça, saiba que apenas por ter seguido este guia, você já deixou de ser
um completo iniciante em Flutter.
Ya sabes más que el 90% de personas que desean aprender a programar pero nunca lo
tentam.

E agora o que?
Agora meu querido aprendiz, é hora de você seguir seu caminho por conta própria.
Nah, é brincadeira.

Não vou te deixar sozinho.

Quero te guiar para que continue aumentando seu conhecimento.

Por isso, sugiro que você fique atento ao seu e-mail, onde estarei compartilhando muito.
mais informações para te acompanhar no seu caminho.

Ainda há muito a aprender.

Espero pronto poder ensiná-lo a como monetizar seu aplicativo e a gerar receitas de
suas criações.
Porque, ouça, você não começou a criar aplicativos à toa.
Pelo menos eu não.
Mas bem, como te disse, fique atento ao seu e-mail.
Nos vemos.