Flutter-text위젯

Text widget

말 그래로 화면에 text를 보여주는 위젯이다

여러 가지 속성들이 있는데 text 위젯으로 들어가면 사용할 수 있는 속성들이 아래 사진처럼 보인다

너무 속성들이 다양해서 대체적으로 많이 쓰이는 속성 몇가지만 써본다

 

style

폰트 사이즈, 색상, 폰트, 등등 text의 스타일을 적용

스타일에도 여러가지 속성이 있으니 들어가서 확인하고 써준다

폰트 적용

https://cpcp127-app-dev.tistory.com/6

Flutter - fontFamily 적용

textAlign

container등에 있는 텍스트들을 정렬해준다

ex) start, end, center

 

maxLines

디바이스의 width보다 텍스트의 길이가 크면 maxLines만큼만 텍스트가 보인다

 

overflow

위 처럼 maxLines보다 더 길어서 글씨가 잘리면 뒤에... 등 글씨가 더 있다는 걸 보여줄 수 있다

ex) 

TextOverflow.ellipsis

 

예시)

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text(
            'style',
            style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.red,
                fontFamily: 'Retrosans',),
          ),
          Container(
              width: 360,
              child: const Text('text align', textAlign: TextAlign.start)),
          Container(
              width: 360,
              child: const Text('text align', textAlign: TextAlign.end)),
          Text(
            '111112313213213214142141242132121321321321321312421421412414dfdsfdsfwefwefdsfdsfsdfsdfsfdssdfdsfdsfawefdsfdsfdsfdsfdsfdsfdsfdsfsafewwfewqfdsfsafewfsdfsdfsfsafesdfdsfsdfsdfsdafsfssdfdsfsdadsafsdfsda',
            maxLines: 3,
            overflow: TextOverflow.ellipsis,
          ),
        ],
      ),
    );
  }
}