Flutter: How to create an Image inside a boxDecoration with borderRadius with Text

Question

I use the code below, how do I make the image appear in the boxDecoration that follows the borderRadius pattern?

Flexible(
  child: GestureDetector(
    onTap: () {
      print("Menu 1");
    },
    child: Container(
      height: 150,
      width: double.infinity,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Colors.white
      ),
      child: Column(
          children: [
            Image.asset(
              "assets/images/new_images/korean_food.jpg",
              fit: BoxFit.cover,
            ),
            SizedBox(height: 10,),
            Text(
              'Paket Korea',
              style: TextStyle(
                fontFamily: "Khand",
                fontSize: 16,
                fontWeight: FontWeight.w500,
              ),
            ),
            Text(
              'Rp 30.000',
              style: TextStyle(
                fontFamily: "Khand",
                fontSize: 14,
                color: Color.fromRGBO(2, 161, 113, 1),
                fontWeight: FontWeight.w300,
              ),
            ),
          ],
        ),
    ),
  ),
),

this is what the design should look like following the borderRadius image

and this is the result of the code after I run it

can anyone help me solve this problem?

Answer 1

New Answer: use clipBehaviour container property:

Container(
      margin: const EdgeInsets.all(8.0),
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10), color: Colors.green),
      child: Column(children: ...),
    )

Old Answer: remove borderRadius from Container and Wrap the Container with ClipRRect Widget:

ClipRRect(
        borderRadius: BorderRadius.circular(12.0),
        child: Container(
          color: Colors.green,
          child: Column(
            children: [
              Container(
                height: 100,
                color: Colors.orange,
                alignment: Alignment.center,
                child: const Text("Image"),
              ),
              const SizedBox(height: 8),
              const Text("Title"),
              const SizedBox(height: 8),
              const Text("Price"),
              const SizedBox(height: 8),
            ],
          ),
        ),
      )