Flutter의 Text 컨트롤

Text 속성

new Text(
         'You have pushed the button this many times:',
          textAlign: TextAlign.center,
          textDirection: TextDirection.ltr, 
          softWrap: false,
          overflow: TextOverflow.ellipsis,
          textScaleFactor: 2.0, 
          maxLines: 10,
         )

데이터, Text 컨트롤의 첫 번째 속성, Text의 텍스트

를 가리킨다

textAlign: 텍스트 정렬 방식: TextAlign.left 텍스트의 왼쪽 정렬 TextAlign.right 텍스트의 오른쪽 정렬 TextAlign.center 텍스트 가운데 TextAlign.justify 텍스트의 양 끝을 TextAlign에 맞춰 정렬합니다.start와 TextAlign.left TextAlign.end와 TextAlign.right

textDirection 텍스트 방향, 각각 TextDirection.ltr 왼쪽에서 오른쪽으로 TextDirection.rtl 오른쪽에서 왼쪽으로

softWrap의 줄 바꿈 처리 여부, 예를 들어false, 화면을 초과하여 차단 처리

오버플로우 텍스트가 화면을 넘어선 후의 처리 방식인 Text Overflow.clip 절단 처리 TextOverflow.fade가 투명화 Text Overflow를 초과했습니다.ellipsis 생략 처리

textScaleFactor 글꼴 크기 조절

maxLines 제한 줄 수

스타일 속성

      style: TextStyle(
                inherit: true,
                color: const Color(0xff000000),
                backgroundColor: Colors.white,
                fontSize: 32, 
                fontWeight: FontWeight.w900, 
                fontStyle: FontStyle.italic, 
                letterSpacing: 4.0, 
                wordSpacing: 6.0, 
                textBaseline: TextBaseline.ideographic,
                height: 1,
                locale:const Locale('en', 'US'),
               // foreground: paint,
               // background:paint,
                shadows:[BoxShadow(color: Colors.grey, offset: Offset(-1, -1), blurRadius: 5)],
                decoration:TextDecoration.lineThrough,
                decorationColor:Colors.blue,
                 decorationStyle:TextDecorationStyle.double,
                decorationThickness:2.0,
                debugLabel:"label",
                fontFamily:"DIN_Medium.ttf",
                //fontFamilyFallback:,
                package:"assets/fonts",
              ),

inherit에서 속성이 부모 노드 스타일을 계승하는지 설정하지 않음

color 글꼴 색상

backgroundColor 배경색

fontSize 글꼴 크기, 단위는 pt 또는 sp, 기본 14sp

fontWeight 글씨체의 굵기, 정상(FontWeight.w400)과 굵기

fontStyle 글꼴 스타일, 정상 및 기울임꼴

letterSpacing 문자 사이의 간격 배수

wordSpacing 단어 간격

textBaseline 정렬된 의사 문자의 수평선

height 글씨체의 배수

locale 다국적 언어 설정

foreground는 Paint를 통해 글꼴의 색을 설정하고,color와foreground는 동시에 설정할 수 없음

background는 Paint를 통해 글꼴의 배경색을 설정하고 backgroundColor와 background는 동시에 설정할 수 없음

shadows 텍스트 그림자

decoration TextDecoration.none에 TextDecoration이 없습니다.underline 밑줄 TextDecoration.overline 밑줄 TextDecoration.lineThrough 중간선(삭제선)

decorationColor 밑줄 색상

decorationStyle 선을 긋는 스타일TextDecorationStyle.Solid 실선 TextDecorationStyle.더블은 두 줄을 그립니다. TextDecoration Style.dotted 점선 (점마다 점씩) TextDecoration Style.TextDecorationStyle.wavy 정현 곡선

decorationThickness 밑줄 굵기의 너비

debugLabel 디버그 레이블

fontFamily 글꼴 이름

fontFamilyFallback 텍스트 글꼴 목록, 앞에 있는 fontFamily가 제공되면 fontFamily를 기준으로 제공하지 않으면 이 목록의 첫 번째 요소를 글꼴로 사용하고 제공하지 않으면 기본 글꼴

을 사용합니다

package 텍스트 글꼴 경로

Text.rich 속성

Text보다 textSpan 더 많음

new TextSpan(
                text: 'Hello Flutter',
                style: new TextStyle(
                  color: Colors.black,
                  fontSize: 15.0,
                  decoration: TextDecoration.none,
                ),
                children: [
                  new TextSpan(
                    text: 'TextSpan',
                    style: new TextStyle(
                      color: Colors.blue,
                    ),
                    recognizer:new TapGestureRecognizer()..onTap = () {
                      // 
                      print("TapGestureRecognizer");
                    }
                  ),
                ],
              ),

여기 뭔가...Dart 문법
Cascade notation (..)(캐스케이드 연산자)
캐스케이드 연산자(..)같은 대상에서 여러 함수와 구성원 변수를 연속으로 호출할 수 있습니다.캐스케이드 연산자를 사용하면 임시 변수가 생성되는 것을 피할 수 있습니다.

Text 클릭 이벤트

Text 클릭 이벤트는 GestureDetector를 사용해야 합니다.

new GestureDetector(
              child: new Text(
                '$_counter',
                textAlign: TextAlign.justify,// 
                textDirection:TextDirection.ltr,
                style: Theme.of(context).textTheme.display1,
              ),
              onTap: ()  {
                print("Text");
              },
            )

이렇게 하면 온탭에서 클릭 이벤트를 처리할 수 있고 온더블 탭과 온롱 프레스 등 제스처 조작 이벤트도 있다.