CODEWITHSUNDEEP
flutter
Siddhant
Siddhant

Reputation: 113

Is there a way to put relative sizes of radius of RoundedRectangleBorder in Flutter?

I want to assign relative value to the borderRadius of RoundedRectangleBorder as it is the shape of a FlatButton which is a child of FractionallySizedBox. For example: 0.2*size of the box

I also want to do the same for other things like Text size.

Is there an easy way to do so?

Upvotes: 1

Views: 504

Answers (1)

dumazy
dumazy

Reputation: 14445

You could use a LayoutBuilder for that and use the BoxConstraints to calculate the required radius.

SizedBox(
  width: 400,
  height: 400,
  child: FractionallySizedBox(
    heightFactor: 0.2,
    child: LayoutBuilder(
      builder: (context, BoxConstraints constraints) {
        final borderRadius = constraints.maxHeight / 5;
        return FlatButton(
          onPressed: () {},
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(borderRadius),
          ),
          child: Text("Button"),
        );
      }
    ),
  )
);

Check out the LayoutBuilder documentation for more info.

On the other hand, since you want to change the fontSize as well, you might just want to scale it down with a FittedBox:

SizedBox(
  width: 400,
  height: 400,
  child: FractionallySizedBox(
    heightFactor: 0.1,
    child: FittedBox(
      fit: BoxFit.scaleDown,
      child: Container(
        width: 200,
        height: 100,
        child: FlatButton(
          onPressed: () {},
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(40),
          ),
          child: Text(
            "Button",
            style: TextStyle(
              fontSize: 28,
            ),
          ),
        ),
      ),
    ),
  ),
);

Check out the FittedBox documentation for more info.

I suggest to try both these approaches, maybe in a simple DartPad, and play around with the values.

Upvotes: 2

Related Questions