Flutter Question posted in
The official Flutter documentation can be found here.

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

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

enter image description here

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

enter image description here

can anyone help me solve this problem?

Tags:

2

Answers


  1. 0

    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),
            ],
          ),
        ),
      )
    Login or Signup to reply.
  2. 0

    To achieve the desired design where the image follows the border radius pattern of the Container, you can use a combination of ClipRRect and BoxDecoration. Here’s how you can modify your code:

    Flexible(
  child: GestureDetector(
    onTap: () {
      print("Menu 1");
    },
    child: Container(
      height: 150,
      width: double.infinity,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Colors.white,
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(10),
        child: Image.asset(
          "assets/images/new_images/korean_food.jpg",
          fit: BoxFit.cover,
        ),
      ),
      padding: EdgeInsets.all(10), // Add padding if needed
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          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,
            ),
          ),
        ],
      ),
    ),
  ),
),

    In this modification, I wrapped the Image.asset widget with a ClipRRect widget, which clips the image to the specified border radius. The ClipRRect uses the same BorderRadius.circular(10) as the Container’s BoxDecoration, ensuring that the image follows the rounded corners of the container.

    You may need to adjust the padding or layout as per your design requirements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search