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

Flutter – Not able to set BorderRadius at bottomRIght side for Container

I want to give bottom right corner radius to Container. For that I have set right and bottom border of the Container.

However, it is not allowing me to set the bottom right corder radius.

The following is the code.

      Container(
          padding: EdgeInsets.all(8),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              bottomRight: Radius.circular(6),
            ),
            border: Border(
              right: BorderSide(
                  color: Colors.red,
                  width: 1),
              bottom: BorderSide(
                  color: Colors.red,
                  width: 1),
            ),
          ),
          child: Text(
            blockName,
            textAlign: TextAlign.left,
          ),
        )

When I ran above code on console I was getting following error.

════════ Exception caught by rendering library ═════════════════════════════════
A borderRadius can only be given for a uniform Border.
The relevant error-causing widget was
Container                                      transfer_content_screen.dart:537
════════════════════════════════════════════════════════════════════════════════
Tags:

2

Answers


  1. 0

    Please try this code

    ClipRRect(
        borderRadius: BorderRadius.only(
          bottomRight: Radius.circular(30),
        ),
        child: Container(
          padding: EdgeInsets.all(8),
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border(
              right: BorderSide(
                color: Colors.red,
                width: 2.0,
              ),
              bottom: BorderSide(
                color: Colors.red,
                width: 2.0,
              ),
            ),
          ),
          child: Text(
            "blockName",
            textAlign: TextAlign.left,
          ),
        ),
      ),

    enter image description here

    Login or Signup to reply.
  2. 0

    I found a workaround, try this

     Center(
      child: SizedBox(
        height: 40,
        width: 90,
        child: Stack(
          children: [
            Container(
              padding: const EdgeInsets.all(8),
              decoration: const BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.only(
                  bottomRight: Radius.circular(6),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(right: 1, bottom: 1),
              child: Container(
                height: double.infinity,
                width: double.infinity,
                padding: const EdgeInsets.all(8),
                decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    bottomRight: Radius.circular(6),
                  ),
                ),
                child: const Center(
                  child:  Text(
                    "blockName",
                    textAlign: TextAlign.left,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search