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