How to choose a variable depending on the width and height of the element?-CodePudding

I have two variables displaying text vertically or horizontally

 final String buttonTextHorizontal = 'TEXT';

 final String buttonTextVertical = 'TEXT';
    verticalText(buttonTextVertical){
      List<String>verticalTextButton = buttonTextVertical.trim().split('');
      final String newbuttonTextVertical = verticalTextButton.join("\n");
      return newbuttonTextVertical;
    }

I want to pass these variables to ElevatedButton

ElevatedButton(
          onPressed: () {
            setState(() {});
          },
            child: Text(
              // buttonTextHorizontal,
              // verticalText(buttonTextVertical),
            ),
        ),

I would like the text to be vertical if the height of the button is greater than the width and vice versa. The size of the button is randomly generated

final String buttonTextHorizontal = 'TEXT';
    
     final String buttonTextVertical = 'TEXT';
        verticalText(buttonTextVertical){
          List<String>verticalTextButton = buttonTextVertical.trim().split('');
          final String newbuttonTextVertical = verticalTextButton.join("\n");
          return newbuttonTextVertical;
        }

    return Positioned(
      height: randomHeight.toDouble(),
      width: randomWidth.toDouble(),
      child: SizedBox(
        child: ElevatedButton(
          onPressed: () {
            setState(() {});
          },
            child: Text(
              // buttonTextHorizontal,
              // verticalText(buttonTextVertical),
            ),
        ),
      ),
    );

The size of the button is randomly generated and when you click on it, the button changes its initial size (the width may become greater than the height and vice versa)

CodePudding user response：

You can use LayoutBuilder to get parent size.

ElevatedButton(
    onPressed: () {},
    child: LayoutBuilder(
      builder: (context, constraints) {
        //ignoring ==
        final bool isHeightGreater = constraints.maxHeight > constraints.maxWidth;
        return Text(isHeightGreater ? "Height is larger"
            : "width is larger",
           style:TextStyle(...)
          );
      },
    )),

Also make sure ElevatedButton is getting proper size.

CodePudding user response：

Use the LayoutBuilder:

Builds a widget tree that can depend on the parent widget's size.

Similar to the Builder widget except that the framework calls the builder function at layout time and provides the parent widget's constraints. This is useful when the parent constrains the child's size and doesn't depend on the child's intrinsic size. The LayoutBuilder's final size will match its child's size.

Maybe something like this:

  child: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          if (constraints.maxWidth > constraints.maxHeight) {
            return HorizontalText();
          } else {
            return VerticalText();
          }
        },
      ),