Flutter Text Type - 온더테크

Contents

Flutter Text 종류

Flutter에서 텍스트를 표시할 수 있는 다양한 위젯들이 있습니다. 아래는 주요 텍스트 위젯들과 각각의 예제입니다.

1. Text

가장 기본적인 텍스트 위젯입니다. 단순한 텍스트를 표시할 때 사용합니다.

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
);

2. RichText

텍스트의 일부에 다른 스타일을 적용하거나 여러 스타일을 혼합할 때 사용합니다

RichText(
  text: TextSpan(
    text: 'Hello, ',
    style: TextStyle(fontSize: 24, color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: 'Flutter',
        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
      ),
      TextSpan(
        text: '!',
        style: TextStyle(fontStyle: FontStyle.italic, color: Colors.red),
      ),
    ],
  ),
);

3. DefaultTextStyle

하위 텍스트 위젯들에 기본 텍스트 스타일을 적용할 때 사용합니다.

DefaultTextStyle(
  style: TextStyle(
    fontSize: 20,
    color: Colors.green,
  ),
  child: Column(
    children: <Widget>[
      Text('This is green and 20px'),
      Text('This is also green and 20px'),
    ],
  ),
);

4. TextField

사용자로부터 텍스트 입력을 받을 때 사용합니다.

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Enter your name',
  ),
);

5. TextFormField

폼(validation)과 함께 사용하는 텍스트 입력 필드입니다.

TextFormField(
  decoration: InputDecoration(
    labelText: 'Email',
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter some text';
    }
    return null;
  },
);

6. SelectableText

사용자가 텍스트를 선택할 수 있도록 하는 위젯입니다.

SelectableText(
  'You can select this text',
  style: TextStyle(fontSize: 18),
);

각 위젯들은 특정 용도에 맞게 설계되어 있으며, 다양한 스타일링 옵션과 함께 사용될 수 있습니다. 이 예제들을 통해 각 텍스트 위젯의 사용법과 특징을 이해할 수 있습니다.

Post Views: 300