How to create card view with text in front of the image in flutter?

Question

I have spent a couple hours just to create a reusable widget in flutter. My expected result is gonna be like this:

but I'm stuck to fill the opacity width depending on it's parent like this:

here's the code I've tried:

Stack(
  children: <Widget>[
    Container(
      padding: const EdgeInsets.all(12),
      child: Image.network(
        "https://raw.githubusercontent.com/flutter/website/master/examples/layout/lakes/step5/images/lake.jpg",
        fit: BoxFit.cover
      )
    ),
    Positioned(
      left: 15,
      bottom: 15,
      child: Container(
        decoration: BoxDecoration(
          color: Color.fromRGBO(0, 0, 0, 0.5)
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Text("TITLE", style: new TextStyle(fontSize: 28, color: Colors.white)),
                new Text("Sub Title", style: new TextStyle(fontSize: 20, color: Colors.white))
              ],
            ),
            FlatButton(
              color: Colors.red[400],
              highlightColor: Colors.red[900],
              onPressed: (){},
              child: new Text("Book Now", style: new TextStyle(fontSize: 28, color: Colors.white)),
            )
          ],
        ),
      )
    )
  ],
)

any suggestion?

Answer 1

Short answer: You need to add right property in your Positioned widget. Like this

Positioned(
  left: 15,
  bottom: 15,
  right: 0,
  ...)

---

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("Title")),
    body: Container(
      width: 300,
      height: 300,
      child: Stack(
        alignment: Alignment.bottomLeft,
        children: <Widget>[
          Image.asset(
            "assets/images/chocolate_pic.png",
            width: 300,
            height: 300,
            fit: BoxFit.cover,
          ),
          Container(
            color: Colors.black.withOpacity(0.5),
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Text("Awesome", style: TextStyle(fontSize: 28)),
                Text("Chocolate", style: TextStyle(fontSize: 22)),
              ],
            ),
          )
        ],
      ),
    ),
  );
}

Answer 2

Instead of this

Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Text("TITLE", style: new TextStyle(fontSize: 28, color: Colors.white)),
                new Text("Sub Title", style: new TextStyle(fontSize: 20, color: Colors.white))
              ],
            ),
            FlatButton(
              color: Colors.red[400],
              highlightColor: Colors.red[900],
              onPressed: (){},
              child: new Text("Book Now", style: new TextStyle(fontSize: 28, color: Colors.white)),
            )
          ],
        ),

You can use ListTile widget inside the positioned and container which has title, subtitle and trailing(book now button can be placed here). And make the background color of container to black/white with opacity.