Flutter Simple 그림판 (5) - 텍스트 컨테이너 줄바꿈 감지, 맞추기(word-character-breaking)(4)

• List를 사용하는 방법

Map myFunction() {
  String myString = "Hello";
  int myInt = 42;
  return {"myString": myString, "myInt": myInt}; // Return both values in a map
}

void main() {
  var result = myFunction();
  String resultString = result["myString"];
  int resultInt = result["myInt"];
  print('String: $resultString, Int: $resultInt');
}

1. Map을 사용하는 방법

Map myFunction() {
  String myString = "Hello";
  int myInt = 42;
  return {"myString": myString, "myInt": myInt}; // Return both values in a map
}

void main() {
  var result = myFunction();
  String resultString = result["myString"];
  int resultInt = result["myInt"];
  print('String: $resultString, Int: $resultInt');
}

1. Tuple을 사용하는 방법

import 'package:tuple/tuple.dart';

Tuple2 myFunction() {
  String myString = "Hello";
  int myInt = 42;
  return Tuple2(myString, myInt); // Return both values in a tuple
}

void main() {
  var result = myFunction();
  String resultString = result.item1;
  int resultInt = result.item2;
  print('String: $resultString, Int: $resultInt');
}

1. 커스텀 Class를 사용하는 방법

class MyResult {
  String myString;
  int myInt;
  MyResult(this.myString, this.myInt);
}

MyResult myFunction() {
  String myString = "Hello";
  int myInt = 42;
  return MyResult(myString, myInt); // Return both values in a custom class
}

void main() {
  var result = myFunction();
  print('String: ${result.myString}, Int: ${result.myInt}');
}

여기서 잦은 호출에 의한 계산 부하를 최소화할 수 있는 방법은 커스텀 Class를 사용하는 방법이라고 한다.

줄 바꿈 횟수(lineBreakCount)를 세어서 함께 리턴하는 클래스를 만들었다.

class BreakTextResult {
  final String text;
  final int lineBreakCount;

  BreakTextResult(this.text, this.lineBreakCount);
}

class TextBreaker {
  final String input;
  final TextStyle textStyle;
  final double containerWidth;
  final double containerHeight;
  final TextAlign textAlign;

  TextBreaker({
    required this.input,
    required this.textStyle,
    required this.containerWidth,
    required this.containerHeight,
    this.textAlign = TextAlign.left,
  });

  BreakTextResult breakCharacterWithMeasurement() {
    List lines = [];
    TextPainter textPainter = TextPainter(
      textDirection: TextDirection.ltr,
      textAlign: textAlign,
    );
    List words = input.split(' '); // Split the input into words.
    String currentLine = '';
    double textWidth;
    double textWidthPadding = textStyle.fontSize! * 0.5;
    int linesCount = calculateLinesCount(textStyle, containerHeight);
    int currentLineCount = 0;

    print("containerWidth: $containerWidth");
    print("containerHeight: $containerHeight");

    for (String word in words) {
      // Handle each word
      bool isFirstCharacterOfWord = true;
      for (int i = 0; i  containerWidth) {
          if (!isFirstCharacterOfWord || currentLine.isNotEmpty) {
            // If the line is not empty, or if it's not the first character of the word, add the current line to the lines list
            lines.add(currentLine);
            currentLineCount++;
            if (currentLineCount >= linesCount) break; // Stop if the maximum number of lines is reached
            currentLine = character; // Start a new line with the current character
          } else {
            // If it's the first character of the word and the line is empty
            currentLine = character; // Add the character to the current line
          }
          isFirstCharacterOfWord = false;
        } else {
          // If the character fits, add it to the current line
          currentLine = testLine;
          isFirstCharacterOfWord = false;
        }
      }
      // After processing a word, add a space if it's not the end of a line
      if (currentLineCount = linesCount) break;
    }

    // Add any remaining text in the currentLine to lines, if there's space
    if (!currentLine.isEmpty && currentLineCount  styleHeight ? measuredHeight : styleHeight;
    print("lineHeight: $lineHeight");

    // Calculate the number of lines that can fit in the container.
    int linesCount = containerHeight ~/ lineHeight;
    return linesCount;
  }
}

class SquareDetailsScreen extends StatefulWidget {
  final double width;
  final double height;

  SquareDetailsScreen({Key? key, required this.width, required this.height})
      : super(key: key);

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

class _SquareDetailsScreenState extends State {
  final TextEditingController _textController = TextEditingController();
  String formattedText = ""; // State variable for holding formatted text
  int maxLength = 1; // State variable for holding the maximum length of the text

  final double fontSizeDefault = 20;
  final FontWeight fontWeightDefault = FontWeight.bold;

  // Initialize textStyle using the default font size and weight
  late TextStyle textStyle;
  final TextAlign textAlignment = TextAlign.center;

  @override
  void initState() {
    super.initState();
    // Initialize textStyle here to use it in textChanged
    textStyle = TextStyle(
      fontSize: fontSizeDefault,
      fontWeight: fontWeightDefault,
      height: 1.0,
    );

    _textController.addListener(textChanged);
  }

  @override
  void dispose() {
    _textController.removeListener(textChanged);
    _textController.dispose();
    super.dispose();
  }

  void textChanged() {
    final String currentText = _textController.text;
    // Format the text to fit the container
    TextBreaker textBreaker = TextBreaker(
      input: currentText, // Specify the input text
      textStyle: textStyle, // Specify the text style
      containerWidth: widget.width, // Specify container width
      containerHeight: widget.height, // Specify container height
      textAlign: textAlignment, // Specify text alignment
    );
    BreakTextResult result = textBreaker.breakCharacterWithMeasurement();
    formattedText = result.text;

    // Update the state to display formatted text
    setState(() {
      this.maxLength = formattedText.length> 0 ? formattedText.length - result.lineBreakCount : maxLength;
      this.formattedText = formattedText;
    });
  }



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Square Details')),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Divider(),
            Text(
              'Text Sticker',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            // button to capture the green container as an image
            ButtonBar(
              alignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    // Capture the green container as an image
                    print('Capture the green container as an image');
                  },
                  // Text to display in the button and width, height of the green container
                  child: Text('Capture Image, ${widget.width}x${widget.height}'),
                ),
              ],
            ),

            Container(
              width: widget.width,
              height: widget.height,
              color: Colors.green,
              alignment: Alignment.center,
              child: Text(
                formattedText, // Display the formatted text here
                style: textStyle,
                textAlign: textAlignment,
              ),
            ),
            Divider(),
            Text(
              'Formatted Text:',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            Container(
              width: double.infinity,
              child: Text(formattedText, style: textStyle,textAlign: textAlignment),
            ),
            Divider(),
            Padding(
              padding: EdgeInsets.all(16.0),
              child: TextField(
                controller: _textController,
                maxLength: maxLength,
                // To allow for unlimited lines, set maxLines to null.
                // If you want to limit the number of lines, set maxLines to an integer value greater than 1.
                maxLines: null,
                keyboardType: TextInputType.multiline, // Set the keyboard type to multiline
                textInputAction: TextInputAction.newline, // Set the input action to support newline for multiline input
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Enter your comments',
                ),
                style: textStyle, // Apply the specified textStyle to the TextField
                // Optional: Remove the maxLength restriction while typing (but still show the counter)
                maxLengthEnforcement: MaxLengthEnforcement.none,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

[영상]

그런데 inputfield에서 직접 enter(줄바꿈)하는 것에 대한 처리에 버그가 있음 ㅎㅎㅎㅎ

[영상]