Responsive container round corners in dart

1k views Asked by At

I was thinking, in Dart/Flutter, can you insert a responsive value for a radius instead of this fixed value in below line

topLeft: Radius.circular(20.0)

I wish I can just do somthing like :

topLeft: Radius.circular(SOME SECRET CODE HERE JUST LIKE MEDIAQUERY THING THAT GETS RATIO FROM SCREEN SIZE)

I have used MediaQuery in

 body: Container(
        width: MediaQuery.of(context).size.height * 0.4,
        height: MediaQuery.of(context).size.height * 0.6,
),

and it perfectly gave me these ratios of the drawn container in respect to screen size, so I need the round corners to inherit specific ratios just like the width and height.

1

There are 1 answers

2
Jorge Vieira On BEST ANSWER

You can create some variables that holds the calculated value of the corners then use a setState to rebuild the screen. So the container will be rebuild with the new value.

double leftCornerRadius = 0.0;
//calculate the corner and setstate
setState(){
  leftCornerRadius = 15.0;
}
//and on the container user the variable
topLeft: Radius.circular(leftCornerRadius)

So everytime you recalculate the radius using setState will change the radius on the widget. Hope i could help.