seong

Flutter RatingBar (리뷰 별점 ) 사용하기 본문

Flutter/중계 플랫폼 프로젝트

Flutter RatingBar (리뷰 별점 ) 사용하기

hyeonseong 2022. 12. 4. 20:21

별점 리뷰 RatingBar 사용하기 

https://pub.dev/packages/flutter_rating_bar 

 

1.  pub.dev에서 RatingBar검색

 

2. pubspec.yml에 아래 처럼 추가

 

3.아래 코드 추가

import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: RatingBar.builder(
            initialRating: 3,
            minRating: 0,
            direction: Axis.horizontal, // 가로 정렬
            allowHalfRating: true, // 0.5점 단위 : true, 1점 단위 false
            itemCount: 5, // 리뷰의 별점 갯수
            itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
            itemBuilder: (context, _) => Icon(
              Icons.star,
              color: Colors.amber,
            ),
            onRatingUpdate: (rating) {
              print(rating);
            },
          ),
        ),
      ),
    );
  }
}

실행 화면

별점에 따라서 값을 확인 할 수 있다.