how to calculate font size base on container height and width using textpainter in flutter

81 views Asked by At

in this code i have create container base on the fontsize but when resize container and increase the container width and height base on width and height how to calculate fontsize using of the text painter in flutter.

if get container height and width base on the font size so how to get font size using of container height and width?

class MovableTextBox extends StatefulWidget {
  late final _MovableTextBoxState currentWidget;
  int index;

  MovableTextBox({required this.index});

  @override
  _MovableTextBoxState createState() {
    _MovableTextBoxState currentState = _MovableTextBoxState();
    this.currentWidget = currentState;
    return currentWidget;
  }
}

const ballDiameter = 15.0;

class _MovableTextBoxState extends State<MovableTextBox> {
  double width = 95.0;
  double height = 30.0;
  double aspectRatio = 3.16 / 1;
  bool _isSelected = true;
  double fontSize = 15;
  double top = 100;
  double left = 100;
  double oneFontWidth = 15 ;
  String _displayText = "Enter Text";

  @override
  void initState() {
    super.initState();
    aspectRatio = width / height;
  }

  void updateIsSelected(bool isSelected) {
    setState(() {
      _isSelected = isSelected;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
     
      Positioned(
        top: top,
        left: left,
        child: GestureDetector(
          onTap: () {
           
            for (var i = 0; i < GlobalState.movableTextWidgets.length; i++) {
              GlobalState.movableTextWidgets[i].currentWidget
                  .updateIsSelected(false);
            }
            setState(() {
              _isSelected = true;
              GlobalState.selectedIndex = widget.index;
            });
          },
          onPanDown: (details) {
            for (var i = 0; i < GlobalState.movableTextWidgets.length; i++) {
              print("_addMovableTextBox $i");
              GlobalState.movableTextWidgets[i].currentWidget
                  .updateIsSelected(false);
            }
            setState(() {
              FocusScope.of(context).unfocus();
              _isSelected = true;
            });
          },
          onPanUpdate: (details) {
            setState(() {
              top += details.delta.dy;
              left += details.delta.dx;
            });
          },

          child: GestureDetector(
            onDoubleTap: () {
              _editText();
            },
            child: Container(
              height: height,
              width: width,
              alignment: Alignment.center,
              decoration: _isSelected
                  ? BoxDecoration(
                      color: Colors.transparent,
                      border: Border.all(
                        width: 2,
                        color: Colors.black,
                      ),
                    )
                  : null,
           
              child: Text(
                 _displayText,
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.black,
                  fontSize: fontSize,
                ),
              ),
              
            ),
          ),
        ),
      ),
      // top left
      if (_isSelected)
        Positioned(
          top: top - ballDiameter / 2,
          left: left - ballDiameter / 2,
          child: ManipulatingBall(
            onDrag: (dx, dy) {
              
              var newWidth = width - (2 * dx);
              var newHeight = height - (2 * dx / aspectRatio);
              setState(() {
                if (newHeight > 10 && newWidth > 10) {
                 
                  height = newHeight;
                  width = newWidth;
                  top = top + (dx / aspectRatio);
                  left = left + dx;

                  // here how to calculate the font size base on the container height and width

                  //fontSize = height / 2;
                  //int fontCount = _displayText.length;
                  //var newOneFontWidth = width / fontCount ;
                  //oneFontWidth = newOneFontWidth;
                 
                }
              });
            },
            handlerWidget: HandlerWidget.VERTICAL,
          ),
        ),
    ]);
  }

  void updateDimensions() {
        TextSpan span = TextSpan(
      style: TextStyle(fontSize: fontSize),
      text: _displayText,
    );
    TextPainter tp = TextPainter(
      text: span,
      textDirection: TextDirection.ltr,
    );
    tp.layout();
    
    tp.size;
    int fontCount = _displayText.length;
 
    double newWidth = oneFontWidth * fontCount; // Add padding or adjust as needed
    double newHeight = tp.height + (fontSize * 0.5); // Add padding or adjust as needed

    setState(() {
      width = newWidth;
      height = height;
      top = top - (height - height) / 2; // Adjust the top position
      left = left - (newWidth - width) / 2; // Adjust the left position
    });
  }
}


in this code i have create container base on the fontsize but when resize container and increase the container width and height base on width and height how to calculate fontsize using of the text painter in flutter.

if get container height and width base on the font size so how to get font size using of container height and width?

class ManipulatingBall extends StatefulWidget {
  ManipulatingBall(
      {Key? key, required this.onDrag, required this.handlerWidget});

  final Function onDrag;
  final HandlerWidget handlerWidget;

  @override
  _ManipulatingBallState createState() => _ManipulatingBallState();
}

enum HandlerWidget { HORIZONTAL, VERTICAL }

class _ManipulatingBallState extends State<ManipulatingBall> {
  late double initX;
  late double initY;

  _handleDrag(details) {
    setState(() {
      initX = details.globalPosition.dx;
      initY = details.globalPosition.dy;
    });
  }

  _handleUpdate(details) {
    var dx = details.globalPosition.dx - initX;
    var dy = details.globalPosition.dy - initY;
    initX = details.globalPosition.dx;
    initY = details.globalPosition.dy;
    widget.onDrag(dx, dy);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanStart: _handleDrag,
      onPanUpdate: _handleUpdate,
      child: Container(
        width: ballDiameter,
        height: ballDiameter,
        decoration: BoxDecoration(
          color: Colors.black,
          shape: this.widget.handlerWidget == HandlerWidget.VERTICAL
              ? BoxShape.circle
              : BoxShape.rectangle,
        ),
      ),
    );
  }
}
0

There are 0 answers