0

Sou novo no flutter e preciso alinhar uma row() dentro de uma colunm() que já tem outros itens. A tela que estou fazendo contém uma coluna principal que guarda todo o conteúdo da página e outros widgets, mas, em meio a esses widgets tenho row() que também possui outros wigets e quero alinhar somente a Row() na parte inferior da tela:inserir a descrição da imagem aqui

Scaffold(
     appBar: AppBar(
       title: Text("DETALHAMENTO"),
       centerTitle: true,
       backgroundColor: Colors.orange,
     ),
     body: Column(
       children: [
         Stack(
           children: [
             SizedBox(
               child: Image.asset("images/rere.jpeg") ,
             ),
             Container(
               padding: EdgeInsets.only(top: 10, left: 10),
               child: Text("RÊRÊ", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 40),),
             )
           ],
         ),
         Container(
           alignment: Alignment.topLeft,
           padding: EdgeInsets.only(left: 15,top: 15),
           color: Colors.red,
           height: 300,
           child: SingleChildScrollView(
             child: Text(""),
           ),
         ),

         Row(

           children: [IconButton(icon: Icon(Icons.remove_circle, size: 20,), onPressed:(){
           }),
             Padding(
               padding: EdgeInsets.all(5),
               child:  Container(
                 child: Text(qtd.toString(), style: TextStyle(fontSize: 25),),
               ),
             ),
             IconButton(icon: Icon(Icons.add_circle, size: 20,), onPressed:(){
             }),],
         )

       ],
     )
 );

Como podem ver, tem uns botões para adicionar e diminuir, queria que eles ficassem no canto inferior da tela. Obrigado!

1 Resposta 1

0

Basicamente, você precisa expandir o tamanho da área que a sua Row ocupa e alinhar o conteúdo dela.

Expanded(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [ ... ]
  )
)

Expanded expande o tamanho da child de uma Column ou Row, de forma a tomar todo o espaço disponível.

MainAxisAlignment se comporta de acordo com a orientação do Widget: Horizontalmente para Row e verticalmente para Column. Esse post aqui (em inglês) explica de forma fácil, com desenhos e tudo.

Esse é o resultado:

inserir a descrição da imagem aqui

E caso você queira ele beeeem lá em baixo, pode adicionar crossAxisAlignment: CrossAxisAlignment.end (que no caso da Row, faz o controle vertical):

inserir a descrição da imagem aqui

2
  • Obrigado!! Funcionou !! Commented 21/04/2021 às 12:10
  • Maravilha! Não esquece de marcar a resposta como correta ;) Commented 21/04/2021 às 17:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .