How to align text over image in flutter?

Question

I want to align the text over the image to the bottomLeft corner, but even aligning it to the bottomLeft it still stays at topLeft corner. So, help me to know what's wrong or missing in my code to acheive the following image text layout.

My output

SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: <Widget>[
                Container(
                  width: 300,
                  height: 220,
                  alignment: Alignment.bottomLeft,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('assets/image1.png'),
                        fit: BoxFit.cover),
                  ),
                  child: Column(
                    children: <Widget>[
                      Text(
                        "Jerusalem",
                        style: TextStyle(
                            fontFamily: 'AirbnbCerealBold',
                            fontSize: 28,
                            fontWeight: FontWeight.bold,
                            color: Colors.white),
                      ),
                      Text("1,243 Place", style: TextStyle(
                          fontFamily: 'AirbnbCerealBook',
                          fontSize: 14,
                          color: Colors.white),
                      ),
                    ],
                  ),
                ),
                Container(
                  width: 300,
                  height: 220,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('assets/image3.png'),
                        fit: BoxFit.cover),
                  ),
                ),
              ],
            ),
          ),

Answer 1

Use a stack with fixed height and width, then use a Positioned/Align/ any absolute positioning widgets to place anywhere in the box. Beware the stack order is last child is first on screen

The Stack widget will place widgets on top of each other with no responsiveness to each other only to the parent Stack - like Absolute child to relative parent in CSS/HTML

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: <Widget>[
      Container(
        width: 300,
        height: 220,
        child: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Image(
              fit: BoxFit.cover,
              image: AssetImage('assets/image1.png'),
            ),
            Positioned(
              bottom: 0,
              left: 0,
              child: Column(
                children: <Widget>[
                  Text(
                    "Jerusalem",
                    style: TextStyle(
                        fontFamily: 'AirbnbCerealBold',
                        fontSize: 28,
                        fontWeight: FontWeight.bold,
                        color: Colors.white),
                  ),
                  Text(
                    "1,243 Place",
                    style: TextStyle(
                        fontFamily: 'AirbnbCerealBook',
                        fontSize: 14,
                        color: Colors.white),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ],
  ),
)