CODEWITHSUNDEEP
flutterflutter-layout
JSharma
JSharma

Reputation: 113

Border radius is not working container widget with tab view widget. i want out like shown in image

Please post your code how i can make container layout rounded from top-right and top left please for more see image.enter image description here

Upvotes: 0

Views: 1154

Answers (2)

Mangaldeep Pannu
Mangaldeep Pannu

Reputation: 3987

Add BoxDecoration to your code

decoration: new BoxDecoration(
  borderRadius: new BorderRadius.only(
    topLeft: const Radius.circular(20.0),   //use radius you want instead of 20.0
    topRight: const Radius.circular(20.0)   //use radius you want instead of 20.0
  )
),

So overall your code will be

Container(
  decoration: new BoxDecoration(
    borderRadius: BorderRadius.only(
      topLeft: const Radius.circular(20.0),   //use radius you want instead of 20.0
      topRight: const Radius.circular(20.0)   //use radius you want instead of 20.0
    )20.
  ),
  child: //Child widget
),

Upvotes: 1

Egor
Egor

Reputation: 10344

You can either use Container with BoxDecoration, or ClipRRect widget instead.

Container with border radius simply draws rounded box as its background and is best in terms of device performance.

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.only(topLeft: Radius.circular(24), topRight: Radius.circular(24)),
  ),
  child: // ...,
),

ClipRRect on the other hand looks better as it clips itself & entire subtree to the form of a rounded box. However, in terms of performance it is rather expensive for the device to draw & maintain it.

ClipRRect(
  borderRadius: BorderRadius.only(topLeft: Radius.circular(24), topRight: Radius.circular(24)),
  child: // ...,
),

For more information check out this answer.

Let me know if this helped.

Upvotes: 1

Related Questions