Flutter Text Widget

Flutter를 이용하면서 가장 많이 사용하게 될 Text에 대해서 알아보자.

 

https://api.flutter.dev/flutter/widgets/Text-class.html

Text class - widgets library - Dart API

 

 

단순 화면에 표시만 한다면 Text('내용')을 통해서 쉽게 표현할 수 있다.

Text(
  'Hello, How are you?',
)

 

 

Text Widget의 자주 사용하는 속성들을 일부 살펴보자.
아래 내용은 flutter.dev 홈페이지 내용을 일부 발췌한 것이다.

Text( 
    'Hello, $_name! How are you?', 
    textAlign: TextAlign.center, // 정렬 
    overflow: TextOverflow.ellipsis, // 화면을 넘어서는 text처리 
    style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 40, ), //Text style 
)

 

여러 특징을 적용한 Text

const Text.rich(  
  TextSpan(  
    text: 'Hello', // default text style  
    children: <TextSpan>[  
// italic을 적용한 text
      TextSpan(  
          text: ' beautiful ',  
          style: TextStyle(fontStyle: FontStyle.italic)),  

// bold를 적용한 text 
      TextSpan(  
          text: 'world',  
          style: TextStyle(fontWeight: FontWeight.bold)),  
    ],  
  ),  
),

 

---

 

폰트 변경

지원하는 font 확장자는 다음과 같다. 
.ttc
.ttf
.otf

 

프로젝트 루트 디렉터리에 assets폴더를 만들고 안에 fonts 폴더를 만들어서 적용할 font파일을 복사한다.

복사한 외부 font파일을 불러올 수 있게 pubspec.yaml파일에 해당 내용을 적용한다.

일반적인 이미지 폴더 세팅과 같다. 

fonts:  
  - family: Raleway  
    fonts:  
      - asset: assets/fonts/Raleway-Regular.ttf  
      - asset: packages/my_package/fonts/Raleway-Medium.ttf  
        weight: 500

 

 

전체 테마 적용을 통해서 font를 지정할 때에는

MaterialApp(CupertinoApp)의 속성인 theme을 통해서 설정할 수 있다. 

theme: ThemeData(
        fontFamily: 'Raleway',
   )

 

 

일부 텍스트 적용

Text(
'test 테스트1',
    style: TextStyle(fontFamily: 'Raleway'),
),

 

---

 

TextStyle

https://api.flutter.dev/flutter/painting/TextStyle-class.html

TextStyle class - painting library - Dart API

 

outlineText

 

Stack(  
  children: <Widget>[  
    // Stroked text as border.  
    Text(  
      'Greetings, planet!',  
      style: TextStyle(  
        fontSize: 40,  
        foreground: Paint()  
          ..style = PaintingStyle.stroke  
          ..strokeWidth = 6  
          ..color = Colors.blue[700]!,  
      ),  
    ),  
    // Solid text as fill.  
    Text(  
      'Greetings, planet!',  
      style: TextStyle(  
        fontSize: 40,  
        color: Colors.grey[300],  
      ),  
    ),  
  ],  
)

 

 

 

gradientsText

import 'dart:ui' as ui;

Text(  
  'Greetings, planet!',  
  style: TextStyle(  
      fontSize: 40,  
      foreground: Paint()  
        ..shader = ui.Gradient.linear(  
          const Offset(0, 20),  
          const Offset(150, 20),  
          <Color>[  
            Colors.red,  
            Colors.yellow,  
          ],  
        )  
  ),