# 텍스트 (Text)

## Text 

텍스트를 간단하게 표시하기 위해 ***`Text`*** 위젯을 사용합니다. 이를 통해 기본 텍스트를 표시하고 스타일을 적용할 수 있습니다. 아래는 기본 ***`Text`*** 위젯 사용 예제입니다.

```dart
Text(
  "text",
  textAlign: TextAlign.left,
  style: TextStyle(fontWeight: FontWeight.w300),
);
```

위 코드에서는 ***`Text`*** 위젯을 사용하여 텍스트를 표시하고, ***`textAlign`*** 속성을 통해 텍스트의 정렬을 지정하고, ***`style`*** 속성을 사용하여 텍스트의 스타일을 설정하고 있습니다.  

## AgnesText 

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FmGm8MrfrygjGOh4atOcy%2Fimage.png?alt=media\&token=430a6804-d63a-4e56-a778-d6498baf79e6)             

Flutter는 테마를 활용하여 앱 전체적으로 일관된 스타일을 적용할 수 있습니다. 아래 예제에서는 테마에서 정의된 텍스트 스타일을 적용하는 방법을 보여줍니다. 

```dart
AgnesText(
  "text",
  style: Theme.of(context).textTheme.displayLarge,
);
```

위 코드에서는 ***`AgnesText`*** 위젯을 사용하여 테마에서 정의된 ***`displayLarge`*** 스타일을 텍스트에 적용하고 있습니다. 이렇게 하면 앱 전체에서 일관된 스타일을 유지할 수 있습니다.

### 스타일 옵션

* **displayLarge**, **displayMedium**, **displaySmall** : 큰 글자가 필요한 컨텐츠에 활용할 수 있는 스타일 옵션입니다. 
* **headlineMedium**, **headlineSmall** : 제목 텍스트에 활용할 수 있는 스타일 옵션입니다. 
* **titleLarge**, **titlMedium**, **titleSmall** : 부제목 텍스트에 활용할 수 있는 스타일 옵션입니다. 
* **bodyLarge**, **bodyMedium**, **bodySmall** : 주로 본문 텍스트에 활용하는 스타일 옵션입니다. 
* **labelSmall** : 첨자나 라벨링 등의 텍스트에 활용할 수 있는 스타일 옵션입니다. 

위에서 정의된 다양한 텍스트 스타일을 통해 앱 전체에서 일관된 스타일을 유지할 수 있습니다. 

### 커스텀 스타일 텍스트

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2F40AG1Vv5ynw4KXzc0RRO%2Fimage.png?alt=media\&token=9a4e4ed3-96bc-47f7-a399-ee7a3700c711)

Flutter에서는 사용자 정의 스타일을 적용하여 텍스트를 디자인할 수 있습니다. 아래 예제는 텍스트의 색상과 글꼴 크기를 직접 지정하는 방법입니다. 

```dart
AgnesText(
  'text',
  style: TextStyle(color: Colors.red, fontSize: 20),
);
```

위 코드에서는 ***`color`***와 ***`fontSize`*** 속성을 사용하여 텍스트의 색상과 글꼴 크기를 직접 지정하고 있습니다.

### 버튼 스타일 텍스트 

Text 위젯은 버튼처럼 동작하도록 구성할 수도 있습니다. 아래 예제는 텍스트를 클릭 가능한 버튼으로 만드는 방법입니다.

```dart
AgnesText(
  '기본 버튼',
  onClick: () {
    // 버튼 클릭 시 수행할 동작 정의
  },
  style: TextStyle(height: 1.0),
);

AgnesText(
                  '패딩 없는 버튼',
                  onClick: () => {},
                  usePadding: false,
                  style: TextStyle(height: 1.0),
                );
```

위 코드에서는 ***`onClick`*** 속성을 사용하여 텍스트를 클릭할 때 수행할 동작을 정의할 수 있습니다. ***`usePadding`*** 속성을 사용하여 패딩 없는 버튼을 만드는 방법도 있습니다.

Flutter의 Text 위젯을 활용하면 텍스트를 다양한 스타일과 형태로 표시할 수 있습니다. 이러한 다양한 옵션을 사용하여 앱의 사용자 인터페이스를 디자인하고 향상시킬 수 있습니다. 텍스트 위젯은 Flutter 개발에서 핵심 역할을 하므로 위에서 설명한 내용을 참고하여 Flutter 앱에서 Text 위젯을 사용하여 다양한 스타일과 형태를 통해 원하는 디자인을 구현해 보세요.