Flutter text over flow 적용안될때

개발을 하다 보면 text가 밀릴 때가 발생한다.

1. TextScale을 설정하지 않았을 때
   1. TextScale을 고정시키게 되면 시스템에 설정된 폰트 크기가 적용되지 않는다. 이는 눈이 침침해서 작은 글씨가 잘 안보이시는 어르신들이 사용하는 앱 같은 경우에는 글자가 잘 안 보이는 불편함을 야기시키기 때문에 대체적으로 눈이 침침하신 어르신들이 사용하는 앱을 개발하는 경우에는 안 하는 것이 좋다고 생각한다.
2. 작은 width를 가진 스마트폰으로 발생하는 overflow
3. text의 길이가 초과될 때

그래서 이를 해결하기 위해 나는 아래와 같은 코드 블록을 사용했었다. 하지만 overflow가 적용되지 않았다.

Text 길이가 길어짐에 따라 Text 위젯은 확장된다 이로 인해 Text위젯 옆에 있는 위젯을 밀어버려 overflow가 발생하기 때문이다.

Text(
  'Hello World! Hello World! Hello World!  Hello World!  Hello World!',
  overflow: TextOverflow.ellipsis,
),

이를 방지하기 위해 Text에 크기를 정해줄수 있는 위젯으로 Wrap 해줘야 한다. Container, SizedBox, Flexible,... 등이 있을 것이다.

---

왼쪽 사진 코드

Widget build(BuildContext context) {
  return Center(
    child: Row(
      children: [
        Container(
          decoration: BoxDecoration(border: Border.all(color: Colors.black,width: 1)),
          child: Icon(Icons.home,size: 100,),
        ),
        Flexible(child: Text('Hello World! Hello World! Hello World!')),
        Container(
          decoration: BoxDecoration(border: Border.all(color: Colors.black,width: 1)),
          child: Icon(Icons.home,size: 100,),
        ),
      ],
    ),
  );
}

오른쪽 사진 코드

  Flexible(
    child: Text(
      'Hello World! Hello World! Hello World!',
      overflow: TextOverflow.ellipsis,
    ),
  ),

이런식으로 Width를 부여해주면 된다.

---

Full Source Code(더보기 클릭)

import 'package:flutter/material.dart';

void main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextOverFlow Demo'),
        ),
        body: TextOverFlowScreen(),
      ),
    );
  }
}

class TextOverFlowScreen extends StatefulWidget {
  const TextOverFlowScreen({Key? key}) : super(key: key);

  @override
  State<TextOverFlowScreen> createState() => _TextOverFlowScreenState();
}

class _TextOverFlowScreenState extends State<TextOverFlowScreen> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Container(
            decoration: BoxDecoration(border: Border.all(color: Colors.black, width: 1)),
            child: Icon(
              Icons.home,
              size: 100,
            ),
          ),
          Flexible(
            child: Text(
              'Hello World! Hello World! Hello World!',
              overflow: TextOverflow.ellipsis,
            ),
          ),
          Container(
            decoration: BoxDecoration(border: Border.all(color: Colors.black, width: 1)),
            child: Icon(
              Icons.home,
              size: 100,
            ),
          ),
        ],
      ),
    );
  }
}