[Flutter] Text()위젯.ep1

플러터에서 정말 많이 쓰이는 위젯인 Text()위젯을 사용해보자

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "Flutter",
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: MyApp(),
  ));
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Container(
          width: 100,
          height: 100,
          decoration:
              BoxDecoration(border: Border.all(width: 1, color: Colors.black)),
          child: Center(child: Text("Text")),
        ),
      ),
    );
  }
}

일부로 Text를 길게 써보자

Text(
                "TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText"),
          ),

여기다가 maxLines을 넣어보자

Text(
              "TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText",
              maxLines: 1,
            ),

maxLines을 1로 넣었는데 그럴경우 라인이 최대 한줄로만 출력된다.

근데 여기서 우리는 코드를 보고있고 Text가 반복되는걸 알고있다 하지만 사용자는 그것을 모를것이다. 실제로 TextTextTextTe에서 끝나는 걸로 알수도 있다.

여기서 overflow를 넣어보자.

Text(
              "TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),

이렇게 사용자가 볼때 뒤에 더 내용이 있구나~ 이렇게 생각한다. ...말고 다른 효과도 써보자.

overflow: TextOverflow.clip

clip는 maxLine만 넣은거랑 큰 차이가 없어보임

Text(
              "TextTextTextTex",
              maxLines: 1,
              overflow: TextOverflow.fade,
              softWrap: false,
            )

여기서 softWrap를 사용하는데 softWrap는 줄바꿈을 설정하는 파라미터이다.
true로 설정하면 줄바꿈을 하고 false로 하면 줄바꿈을 하지않는다.