Is there any possibility to have a rounded Container with multiple colors?

Fritz A 0
Viewed 25

I have a Container in Flutter, which has 3 different Container with different colors as a child. The Main Container doesn't have rounded corners. Any ideas?

                Container(
                  decoration: const BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(20.0)),
                  ),
                  height: 8,
                  width: 300,
                  child: Row(children: [
                    Container(
                      decoration: BoxDecoration(color: Colors.lightGreen),
                      width: 300 * 0.37,
                    ),
                    Container(
                      decoration: BoxDecoration(color: Colors.grey[300]),
                      width: 300 * 0.15,
                    ),
                    Expanded(
                      child: Container(
                        decoration: BoxDecoration(color: Colors.redAccent),
                      ),
                    ),
                  ]),
                ),
rounded-corners colors containers dart flutter
2 Answers

Wrap your outer container with ClipRRect and give it a border radius:

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Container(
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(20.0)),
    ),
    height: 100,
    width: 300,
    child: Row(children: [
      Container(
        decoration: BoxDecoration(color: Colors.lightGreen),
        width: 300 * 0.37,
      ),
      Container(
        decoration: BoxDecoration(color: Colors.grey[300]),
        width: 300 * 0.15,
      ),
      Expanded(
        child: Container(
          decoration: BoxDecoration(color: Colors.redAccent),
        ),
      ),
    ]),
  ),
),
TripleNine0

You can give different border and color for each container like that

Container(child : Widget(),
decoration: BoxDecoration(
    border: Border.all(
      color: Colors.anyColor,
    ),
    borderRadius: BorderRadius.all(Radius.circular(anyValue))
  ))
Faizan Darwesh0
Related