플러터 Text, TextField 오버플로우 오류, 멀티라인, 줄바꿈

Flexible(
    child: Text(title,
      style: TextStyle(fontSize:  23, overflow:TextOverflow.ellipsis,fontWeight: FontWeight.bold, color: Colors.black,
      ),
      maxLines: 1,),//1줄까지 보여주기
)

Flexible 위젯으로 감싸면 텍스트가 픽셀범위를 초과하지않고 다음줄로 알아서 잘 줄바꿈이 됩니다. 여기서 만약

오버플로우 해결!

이렇게 약자로 ... 형식을 통해 요약하고 싶다면 다음과 같은 방시기을 사용합니다.

style에서 TextStyle의 overflow:TextOverflow.ellipsis 사용

이제 몇줄까지 보여주고 저렇게 요약할건지는 maxLines 이용

에러 해결!

다음과 같이 overflow오류가 뜬다면 당황하지 말고

Text(title, style: GoogleFonts.kanit(
  fontSize: 25.0,
  color:Colors.black87,
  textStyle: TextStyle(fontWeight: FontWeight.bold,)
)),

다음과 같은 코드를 간단히

Flexible(
  child: Text(title, style: GoogleFonts.kanit(
    fontSize: 25.0,
    color:Colors.black87,
    textStyle: TextStyle(fontWeight: FontWeight.bold,)
  )),
),

Flexible이나 Expanded 위젯으로 감싸주면 됩니다.

 

다음과 같이 TextField에서 나는 overflow오류는

FieldText오버플로우 해결 단계 123

크기가 재조정되는것을 막아주고 고정 해줍니다.

resizeToAvoidBottomInset:false,

Widget build(BuildContext context) {
  return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        resizeToAvoidBottomInset:false,
        appBar: EmptyAppBar(),
        body: Padding(
            padding: EdgeInsets.all(5.0),
            child: Container(

이렇게 Scaffold 밑에 넣어주면 됩니다.

그런데 오른쪽 사진과 같이 내용입력이 내려가게됩니다. 해결하기위해

SingleChildScrollView(
    child: Flexible(
      child: Column(
        children: [
          TextField(
            onChanged: (text){
              setState(() {
                inputContent = text;
              });
            },
            keyboardType: TextInputType.multiline,
            maxLines: null,
            controller: _controller2,
            decoration: InputDecoration(
                labelText: '내용 입력하세요',
                border: InputBorder.none,
                contentPadding: EdgeInsets.all(3)
            ),
          ),
        ],
      ),
    ),
  ),

FieldText를 SingleChildScrollView로 감싸서 화면크기를 맞춰줍니다.

 

TextField를 bottomsheet에 사용할때 오버플로우가 발생하는 오류가 있는데

아래의 댓글 창이 다음과 같이 FieldText가 없어집니다.

이런 오류의 해결법은

Container(
  color: Colors.white,
  width: 280,
  child: SingleChildScrollView(
    child: Flexible(
      child: TextField(
        onChanged: (text) {
          setState(() {
              inputContent = text;
          });
        },
        keyboardType: TextInputType.multiline,
        maxLines: null,
        controller: _CommentController,
        decoration: InputDecoration(
            labelText: '댓글을 입력하세요',
            border: InputBorder.none,
            contentPadding: EdgeInsets.all(3)
        ),
      ),
    ),
  ),
),

Container 또는 Sizedbox위젯으로 감싸서 크기를 지정해주면 됩니다.