앱에서 아이콘은 사용자에게 기능을 시각적으로 전달하는 중요한 수단입니다. 때로는 아이콘만으로는 기능이 명확히 전달되지 않을 때가 있습니다. 이때 아이콘에 텍스트를 추가하여 기능을 명확하게 전달할 수 있습니다.

아이콘에 텍스트 추가하기

Flutter에서 아이콘에 텍스트를 추가하는 방법은 매우 간단합니다. Text 위젯을 사용하여 아이콘과 텍스트를 함께 표시할 수 있습니다. 예를 들어, Row 또는 Column 위젯 내에 Icon 위젯과 Text 위젯을 함께 배치하여 아이콘과 텍스트를 표시할 수 있습니다.

다음은 예시 코드입니다.

Row(
  children: <Widget>[
    Icon(Icons.shopping_cart),
    Text('장바구니'),
  ],
)

위 예시 코드에서는 shopping_cart 아이콘과 “장바구니” 텍스트가 함께 표시됩니다.

아이콘 버튼에 텍스트 추가하기

때로는 아이콘 버튼에 텍스트를 추가하여 버튼의 기능을 명확히 전달해야 할 때가 있습니다. Flutter에서는 IconButton 위젯과 Column 또는 Row을 함께 사용하여 아이콘 버튼에 텍스트를 추가할 수 있습니다.

다음은 예시 코드입니다.

Column(
  children: <Widget>[
    IconButton(
      icon: Icon(Icons.favorite),
      onPressed: () {
        // 버튼 클릭 시 동작
      },
    ),
    Text('좋아요'),
  ],
)

위 예시 코드에서는 favorite 아이콘과 “좋아요” 텍스트가 함께 표시되며, 아이콘 버튼이 클릭되면 지정된 동작이 수행됩니다.

Flutter를 사용하면 아이콘과 텍스트를 조합하여 기능을 명확하게 표현할 수 있습니다.

결론

아이콘에 텍스트를 추가하여 기능을 명확하게 전달하는 것은 사용자 경험을 향상시키는 중요한 요소입니다. Flutter를 사용하면 간단하게 아이콘과 텍스트를 조합하여 명확한 기능 전달을 구현할 수 있습니다.

참조: Flutter 공식 문서