Home / Questions / 366286
Accepted
Richard
Asked: 2020-06-18 10:04:30 +0800 CST 2020-06-18 10:04:30 +0800 CST

How to position a Container as low as possible from a Card?

  • 772

I'm trying to learn to use better layouts with Cardwhich I've seen one that I like but it seems to have a type Containerplaced at the bottom of the Cardwith a different color, which gives it another layout

What I want

enter image description here

What I have

enter image description here

I tried using a Positionedbut it doesn't move or anything, I still tried putting the Positionedinside a Stackbut in that case I simply lost the Container.

What I have. ListView.builderwhere the los is shown Cardwith the help of aWrap

ListView.builder(
        itemCount: 1,
        itemBuilder: (BuildContext context, int index) {
          return Wrap(
            // mainAxisAlignment: MainAxisAlignment.spaceAround,
            alignment: WrapAlignment.center,
            spacing: 10.0,
            runSpacing: 10.0,
            children: List<Widget>.generate(10, (index) => _card('produto $index',0.0,'$index descripción')),
          );
        },
      ),


        Widget _card(String title, double precio, String descripcion) {
        return Container(
          // margin: EdgeInsets.all(4.0),
          width: 150,
          height: 180,
          child: Card(
            color: Color(0xff00bc9b),
            child: Column(
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Text(
                  'Producto 1',
                  style: TextStyle(color: Color(0xffEDFAF8), fontWeight: FontWeight.bold),
                  textAlign: TextAlign.start,
                ),
                ClipRRect(
                    borderRadius: BorderRadius.circular(5.0),
                    child: Image.asset(
                      'assets/img/no-image.png',
                      height: 70,
                      fit: BoxFit.fill,
                    )),
                Positioned(
                  bottom: 10.0,
                  child: Container(
                    // height: 55,
                    decoration: BoxDecoration(
                        color: Colors.blue/* Color(0xffEDFAF8) */, 
                        borderRadius: BorderRadius.only(topRight: Radius.circular(10))),
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                'Producto de alta calidad para el consumo de todos, o solo texto largo',
                                overflow: TextOverflow.ellipsis,
                                // style: TextStyle(color: Colors.white),
                              ),
                              Text(
                                '\$4.50',
                              ),
                            ],
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            color: Colors.black,
                            child: IconButton(
                                icon: Icon(
                                  Icons.add,
                                  color: Colors.white,
                                ),
                                onPressed: () {}),
                          ),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        );
      }
flutter

1 Answers

  1. Best Answer

    What you lacked for the content to be contracted was only mainAxisSize: MainAxisSize.minin the Columnand well a Row.

    I prepared an example so you can imitate the image you put, here it is:

    @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.brown[100],
      body: SafeArea(
        child: GridView.builder(
          padding: const EdgeInsets.symmetric(horizontal: 10),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2, crossAxisSpacing: 10, mainAxisSpacing: 10, childAspectRatio: 1 / 1.2),
          itemCount: 3,
          itemBuilder: (BuildContext context, int index) {
            return _card('produto $index', 0.0, '$index descripción');
          },
        ),
      ),
    );
  }

  Widget _card(String title, double price, String description) {
    return Card(
      clipBehavior: Clip.hardEdge,
      color: Colors.green[100],
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(25),
        ),
      ),
      child: Column(
        children: <Widget>[
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Image.network(
                'https://assets.bose.com/content/dam/Bose_DAM/Web/consumer_electronics/global/products/headphones/noise_cancelling_headphones_700/product_silo_images/noise_cancelling_headphones_700_blk_EC_hero.psd/_jcr_content/renditions/cq5dam.web.320.320.png',
                fit: BoxFit.cover,
              ),
            ),
          ),
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(15),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(title),
                        Text(
                          price.toString(),
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.black87,
                      borderRadius: BorderRadius.all(
                        Radius.circular(10),
                      ),
                    ),
                    child: IconButton(
                      onPressed: () {},
                      icon: Icon(
                        Icons.add,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

    Result

    enter image description here

    • 2