텍스트 (Text)

플러터에서 다양한 텍스트 형태를 사용할 수 있습니다. Text 위젯은 텍스트를 효율적으로 표시하고 스타일을 적용하는데 사용되며, 고객 요구사항에 맞게 커스터마이즈할 수 있습니다.

Text

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

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

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

AgnesText

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

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

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

스타일 옵션

• displayLarge, displayMedium, displaySmall : 큰 글자가 필요한 컨텐츠에 활용할 수 있는 스타일 옵션입니다.

• headlineMedium, headlineSmall : 제목 텍스트에 활용할 수 있는 스타일 옵션입니다.

• titleLarge, titlMedium, titleSmall : 부제목 텍스트에 활용할 수 있는 스타일 옵션입니다.

• bodyLarge, bodyMedium, bodySmall : 주로 본문 텍스트에 활용하는 스타일 옵션입니다.

• labelSmall : 첨자나 라벨링 등의 텍스트에 활용할 수 있는 스타일 옵션입니다.

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

커스텀 스타일 텍스트

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

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

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

버튼 스타일 텍스트

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

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

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

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

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