Help with Stack, to create template as example

Question

Good morning Personal!

I’m learning Flutter, and found a problem to build this model of the following image:

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: () {},
                     ),
                  ),
               ],
            ),
         ),
      ])
   ])

In my result, even putting the properties in Pisitioned widgets, I can not leave the texts and buttons where I would like. Follow my resuldado:

Answer 1

I’ll leave here an example for you to understand and then you exchange the Widgets according to what you need.

You’re making the wrong use of Stack and Positioned, so that the Positioned run it needs to be directly inside the Stack.

Follow the example:

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
                )    
              ),
              
            ]
          )
        )
      ],
        )
    );
  }
}

You can run this example on Dartpad

Answer 2

You are not using the Stack, all your widgets are within Row and not the Stack, so the Floatingactionbutton is not overlaid, all the widget are on each other’s side. And inside Positioned he said to inform his positions.

Try something like this:

_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: () {},
          ),
        ),
      ])
    ]);
  }