2

How do I determine the corner radius of a widget using the formula radius = hight/2 on a button that resizes after its child?

The child in this case is a Text that can be as long as the the passed string is.

This is what I got. I set the hight and maxWidth to zero in order to wrap the texts size, but I cant figure out a way to measure the width when applying the corner radius.

ButtonTheme(
  height: 0,
  minWidth: 0,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(width/2)), //how can i calculate width?
  child: RaisedButton(
    onPressed: onPress,
    child: Text('Some String of variable length'),
  ),
);

I've searched the web but nothing comes up.

Joel Broström
  • 3,530
  • 1
  • 34
  • 61
  • I've moved it from the button to collect all variables in the same widget. It does not make a difference either way. – Joel Broström Oct 16 '19 at 11:54
  • 1
    see `StadiumBorder` implementation – pskink Oct 16 '19 at 12:00
  • Thank you. It does what I need, but not how I wanted it. Really hoped i could get the size of the child somehow. – Joel Broström Oct 16 '19 at 12:17
  • wrap RaisedButton with LayoutBuilder and you will have `constraints` parameter with size –  Oct 16 '19 at 12:20
  • I did that but the constraint maxWidth and maxHeight showed what I assume to be its parents container. In this case the card it was in. – Joel Broström Oct 16 '19 at 12:27
  • so what do you see if you use this: `Container( height: 400, child: Column( children: [ Container(height: 40, color: Colors.red), Expanded(child: LayoutBuilder( builder: (context, constraints) { print(constraints); return Container(color: Colors.green); } )), Container(height: 40, color: Colors.blue), ], ), ),` - here you have master parent box with height = 400 and two fixed child boxes (both with height = 40) and one expanded child with unknown height - you know it should be 400 - 40 - 40 = 320 but what do you see in the logs? – pskink Oct 16 '19 at 14:51
  • You're right. But it's no the same problem as the code above. Here you hav no child with unknown hight and width that should determine the size of the parent. Giving the parent a fixed size and then specify the height of all the children except one is no problem to calculate. Try copy paste the code above and you'll see that i mean :) – Joel Broström Oct 17 '19 at 12:10

1 Answers1

4

As @pskink mentioned, you could use StadiumBorder:

A border that fits a stadium-shaped border (a box with semicircles on the ends) within the rectangle of the widget it is applied to.

Here is an example, write multiple lines on the TextField to see the result:

Center(
  child: Container(
    decoration: ShapeDecoration(
      shape: StadiumBorder(
        side: BorderSide(width: 2.0),
      ),
    ),
    child: TextField(
      textAlign: TextAlign.center,
      minLines: 1,
      maxLines: 100,
    ),
  ),
)
Pablo Barrera
  • 10,387
  • 3
  • 28
  • 49