Flutter - Text overflow 텍스트 길이가 길어지면 ...으로 처리 하기

이번 프로젝트에서 제목의 길이가 2줄 이상 넘어가면 ...으로 처리 해야한다.

이때 overflow의 속성을 사용해주면 ... 으로 처리해준다.

 

코드로 확인

Text안에 maxline을 2줄로 주고, 글자의 길이가 넘어가면 TextOverFlow.ellipsis로 ...처리해준다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.blue,
            child: Text(
              "overFlow가 뭐지? overFlow가 뭐지? overFlow가 뭐지? overFlow가 뭐지? overFlow가 뭐지? overFlow가 뭐지? overFlow가 뭐지? overFlow가 뭐지? overFlow가 뭐지? overFlow가 뭐지? overFlow가 뭐지? overFlow가 뭐지? overFlow가 뭐지? overFlow가 뭐지? overFlow가 뭐지? overFlow가 뭐지? overFlow가 뭐지? overFlow가 뭐지? overFlow가 뭐지? ",
              style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
              maxLines: 2, // 최대 길이는 2줄
              overflow: TextOverflow.ellipsis,// ... 으로 바꾸어주기.
            ),
          ),
        ),
      ),
    );
  }
}

결과 확인