별점을 표시하는 앱을 개발할 때, 효율적으로 UI를 구성하고 싶을 것입니다. Flutter에서 Column을 사용하여 간단하게 별점을 표시하는 방법을 알아보겠습니다.

1. 별점 아이콘 추가

우선, 별점을 표현할 수 있는 아이콘을 추가해야 합니다. 이를 위해 flutter_rating_bar 패키지를 사용할 수 있습니다. 해당 패키지를 설치하고, Flutter 프로젝트에서 이를 import 합니다.

import 'package:flutter_rating_bar/flutter_rating_bar.dart';

2. Column을 이용한 별점 표시

Column은 세로 방향으로 위젯을 배치하는 Flutter 위젯입니다. 여러 아이콘을 세로로 배치하여 별점을 표시해야 하므로 Column을 사용하겠습니다.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    RatingBar.builder(
      initialRating: 3,
      minRating: 1,
      direction: Axis.horizontal,
      allowHalfRating: true,
      itemCount: 5,
      itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
      itemBuilder: (context, _) => Icon(
        Icons.star,
        color: Colors.amber,
      ),
      onRatingUpdate: (rating) {
        print(rating);
      },
    ),
  ],
)

위 코드에서 RatingBar.builder는 별점을 표시하는 위젯입니다. initialRating으로 초기값을 설정하고, itemBuilder에서는 각 별점 아이콘을 정의합니다.

3. 별점 표시 수정

위 코드를 통해 간단하게 Column을 사용하여 별점을 효과적으로 표시할 수 있습니다. 또한 align 속성 등을 이용하여 원하는 위치에 별점을 표시할 수 있습니다.

이제 별점 표시에 대한 기본적인 사용 방법을 숙지했으니, 여러 가지 옵션을 조합하여 별점 표시를 개선할 수 있습니다.

위의 방법을 활용하여 별점 기능을 가진 효과적인 UI를 구성해 보세요!