CODEWITHSUNDEEP
flutter
Tomer
Tomer

Reputation: 17930

Flutter: giving border radius to a container

I have a ListView builder that has containers as children and I'd like each of these containers to have rounded corners, So i wrapped it in ClipRRect and gave it a borderRadius, but the only thing affected is the shadow.

here is the result:

enter image description here

ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: items.length,
      itemBuilder: (BuildContext ctx, int index) {
        return ClipRRect(
          borderRadius: BorderRadius.circular(20),
          child: Container(
            height: 20,
            padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
            margin: EdgeInsets.symmetric(horizontal: 12),
            decoration: BoxDecoration(
                color: Theme.of(context).primaryColor,
                boxShadow: [
                  BoxShadow(
                      color: Theme.of(context).primaryColor,
                      offset: Offset(0, -5),
                      blurRadius: 10.0)
                ]),
            child: Text(
              items[index],
              style: TextStyle(fontSize: 12.0, color: Colors.white),
            ),
          ),
        );
      }),

What am I missing? (I know I can use the borderRadius on the BoxDecoration, but I'm wondering why this does not work as well)

Upvotes: 0

Views: 6616

Answers (1)

user321553125
user321553125

Reputation: 3216

Remove the ClipRRect and give radius directly to the container.

If you want the shadows to stay then don't remove ClipRRect and just add the radius property to the inner container.

Container(
  height: 20,
  padding:
      EdgeInsets.symmetric(horizontal: 12, vertical: 6),
  margin: EdgeInsets.symmetric(horizontal: 12),
  decoration: BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(10)), //here
      color: Theme.of(context).primaryColor,
      boxShadow: [
        BoxShadow(
            color: Theme.of(context).primaryColor,
            offset: Offset(0, -5),
            blurRadius: 10.0)
      ]),
  child: Text(
    items[index],
    style: TextStyle(fontSize: 12.0, color: Colors.white),
  ),
),

Edit: The rounded shadow you are getting is because of the offset that you have used for the inner container.

Edit: This might be helpful:

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: 10,
  itemBuilder: (context, index) {
    return Container(
      width: 50,
      padding: const EdgeInsets.all(10),
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(10)),
        child: Container(
          height: 10,
          color: Colors.red,
        ),
      ),
    );
  },
),

Upvotes: 3

Related Questions