1

Bom dia Pessoal!

Estou aprendendo Flutter, e encontrei um problema para construir este modelo da imagem a seguir:

inserir a descrição da imagem aqui

Row(children: [
      Stack(children: [
         Container(
            width: 400.0,
            height: 200.0,
            decoration: BoxDecoration(
               color: Colors.black12,
            ),
            child: Row(
               children: [
                  Padding(
                     padding: const EdgeInsets.all(5.0),
                     child: Image.network(
                        'https://cdn.awsli.com.br/600x450/44/44273/produto/29984101/9437f2984e.jpg',
                        width: 180,
                     ),
                  ),
                  Positioned(
                     child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                           Text("Camiseta"),
                           Text("Roupas"),
                           Text("R\$25,00"),
                        ],
                     ),
                  ),
                  Positioned(
                     child: FloatingActionButton(
                        foregroundColor: Colors.white,
                        backgroundColor: Colors.red[600],
                        child: Icon(Icons.plus_one), onPressed: () {},
                     ),
                  ),
               ],
            ),
         ),
      ])
   ])

No meu resultado, mesmo colocando as propriedades nas widgets Pisitioned, não consigo deixar os textos e botões onde gostaria. Segue meu resuldado:

inserir a descrição da imagem aqui

2 Respostas 2

2

Vou deixar aqui um exemplo para você entender e daí você troca os Widgets de acordo com o que precisa.

Você está fazendo o uso errado do Stack e Positioned, para que o Positioned funcione ele precisa estar diretamente dentro do Stack.

Segue o exemplo:

Exemplo

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      height: 200,
      child: Row(
      children: [
        Container(
          width: 150,
          height: 200,
          child: Stack(
            children: [
              Container(
                margin: EdgeInsets.only(right: 20),
                color: Colors.grey[100],
                child: Center(
                  child: Icon(Icons.picture_in_picture_alt, size: 50, color: Colors.grey)
                )
              ),
              Positioned(
                right: 0,
                bottom: 20,
                child: Container(
                  height: 50,
                  width: 50,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.red
                  ),
                  child: Center(
                    child: Icon(Icons.add)
                  )
                )
              )
            ]
          ),
        ),
        Container(
          child: Column(
            children: [
              Text("Moletom",
                style: TextStyle(
                  color: Colors.black
                )
              ),
              Text("Roupas",
                style: TextStyle(
                  color: Colors.black
                )
              ),
              Text("R\$ 50,00",
                style: TextStyle(
                  color: Colors.red
                )    
              ),
              
            ]
          )
        )
      ],
        )
    );
  }
}

Você pode rodar esse exemplo no DartPad

0

Você não está usando a Stack, todos os seus widgets estão dentro de Row e não da Stack, por isso o FloatingActionButton não esta sobreposto, todos os widget estão um do lado do outro. E dentro do Positioned falou informar as posicões dele.

Tente algo mais ou menos assim:

_body() {
    return Row(children: [
      Stack(children: [
        Container(
          width: 400.0,
          height: 200.0,
          decoration: BoxDecoration(
            color: Colors.black12,
          ),
          child: Row(
            children: [
              Padding(
                padding: const EdgeInsets.all(5.0),
                child: Image.network(
                  'https://cdn.awsli.com.br/600x450/44/44273/produto/29984101/9437f2984e.jpg',
                  width: 180,
                ),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("Camiseta"),
                  Text("Roupas"),
                  Text("R\$25,00"),
                ],
              ),
            ],
          ),
        ),
        Positioned(
          bottom: MediaQuery.of(context).size.height / 2, // para posicionar em relacao a tela
          left: MediaQuery.of(context).size.width / 2, // para posicionar em relacao a tela
          child: FloatingActionButton(
            foregroundColor: Colors.white,
            backgroundColor: Colors.red[600],
            child: Icon(Icons.plus_one),
            onPressed: () {},
          ),
        ),
      ])
    ]);
  }
2
  • Não consegui executar seu exemplo. Acho que são os MediaQuery que estão incorretos.
    – rbz
    Commented 25/09/2020 às 18:25
  • Talvez por causa do context, eu fiz em uma StateFullWidget mas se for StatelessWidget por ter que passar por parametro Commented 25/09/2020 às 21:53

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 .