#1 Primeiro App com Flutter (parte 2)
Agora que já estamos com a base do app pronta vamos iniciar a criaçåo da tela, primeiro vamos criar um texto, dentro do arquivo home.dart, para isso vamos adicionar um Text(), e dentro dele vamos adicionar um style, como pode ser visto na imagem, o fontWeigth bold e para deixar o peso do texto mais grosso, o color e a cor do texto, e o decoration e para remover as linhas amarelas que estava na parte de baixo do texto.
Agora vamos criar o layout final do app vamos selecionar o widget de texto e vamos adicionar ele dentro de uma Row, e adicionar essa Row dentro de uma Column, fica como esta ai na imagem, como parâmetro tanto o Row quanto o Column vão receber o mainAxisAlignment que e para deixar o texto centralizado.
O que nos acabamos de montar foi basicamente isso que esta na figura ao lado nos criamos um container em coluna que se chama Column, e dentro dele criamos um outro container chamado Row e ambos estão centralizados através do atributo mainAxisAlignment, ou seja um widget encima de outro em uma Stack
O código gera na tela o texto centralizado na cor branca.
Agora vamos adicionar um background para nosso app, para isso sera necessário baixar a imagem que eu deixei no link abaixo:
depois de baixar a imagem vamos no nosso projeto e vamos criar uma pasta chamada img, depois vamos abrir o arquivo pubspec.yaml, e vamos percorrer ele até a linha 44 onde tem escrito assets.
Na linha 44 vamos remover o # na frente da palavra assests e tambem da linha 45, agora vamos substituir onde esta escrito imagens por img e no lugar de a_dot_burr.jpeg pelo nome da nossa imagem, no meu caso ficou img/restaurante.jpg, após fazermos esse procedimentos vamos voltar ao arquivo home.dart, antes do widget da Column, vamos adicionar um novo widget
chamado de Image.asset e como atributo vamos adicionar entre aspas dupla o caminho da nossa imagem no caso se voce segui tudo, esta em “img/restaurante.jpg”, o outro atributo e o fit que serve para dizer como vamos posicionar a nossa imagem e nesse caso o BoxFit.cover quer dizer que a imagem será ajustada de acordo co dispositivo acessado, e o parametro do height e para dizer o tamanho da imagem.
Agora abaixo da Row de texto , vamos criar uma nova Row agora para adicionar os botões que vão ser usados no app, primeiro criamos a row depois colocamos um children e dentro do children colocamos um widget de padding para adicionar um espaçamento no
botão, como atributo temos o padding: EdgeInsets.all(10.0) que será o tamanho do espaçamento, e dentro dele temos o flatButton como child do Row que por sua vez tem tem dois atributos o child, que no nosso caso e um texto e o onPressed que recebe a funcionalidade do botão no nosso casso ainda não temos nenhuma. Depois de fazer isso selecione do padding ate o fim dele e copie e cole para fazer o outro botão que lugar do texto +1 será -1 o restante permanece o mesmo.
Depois de adicionar os botões vamos adicionar a última, row do nosso app que se trata de mais uma row de texto apenas incrementamos o tamanho do texto com a propriedade textSize, porém o restante já tínhamos visto anteriormente.
Na próxima parte e última deste tutorial vamos adicionar funcionalidades aos botões.
