Flutter pub.dev - 1) flutter_rating_bar 알아보기

오늘은 flutter_rating_bar에 대해 알아보겠습니다

 

프로젝트를 생성해 줍니다.

 

pub add or pub get 을 진행합니다.

 

 $ flutter pub add flutter_rating_bar

dependencies:
  flutter_rating_bar: ^4.0.1

 

이렇게 셋팅을 하면 그럼 이제 기본적인 준비는 완료되었습니다.

 

 

main.dart를 수정해 줍니다 . 기본적인 구조는 다음과 같습니다 

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({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rating bar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Rating Bar Demo Screen'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Joo 와 함께하는 rating bar:',
            ),
            RatingBarIndicator(
                rating: 2.5,
                itemCount: 5,
                itemSize: 30.0,
                itemBuilder: (context, _) => const Icon(
                  Icons.star,
                  color: Colors.red,
                ))
          ],
        ),
      ),
    );
  }
}

 

 

중요한 부분은 이 코드입니다. 

            RatingBarIndicator(
                rating: 2.5,
                itemCount: 5,
                itemSize: 30.0,
                itemBuilder: (context, _) => const Icon(
                  Icons.star,
                  color: Colors.red,
                ))

 

 

조금 더 알아보자면

• rating : 지표의 등급 값을 정의합니다.
• itemCount : 평가 막대 항목의 총 개수를 정의하며 기본값은 5입니다.
• itemSize : 막대의 각 평가 항목의 너비와 높이를 정의하며 기본값은 40.0입니다.
• itemBuilder : 항목이 사용자에게 표시되는 방법을 정의합니다. 여기서는 빨간색 별 아이콘을 사용합니다.

 

 

더 나아가 이제 RatingBar 위젯을 사용하여 사용자가 직접 평점을 입력하도록 하겠습니다.

 

이전 RatingIndicator 위젯 대신 RatingBar를 사용한다는 점에 유의해주시길 바랍니다.

RatingBarIndicator 아래에 이 코드를 추가하거나 원하는 경우 RatingBarIndicator를 다음 코드로 바꿀 수 있습니다.

 RatingBar(
              initialRating: 0,
              minRating: 0,
              maxRating: 5,
              allowHalfRating: true,
              itemSize: 30.0,
              ratingWidget: RatingWidget(
                  full: const Icon(Icons.star, color: Colors.blueAccent),
                  half: const Icon(Icons.star_half, color: Colors.blueAccent),
                  empty: const Icon(Icons.star_border, color: Colors.blueAccent),
              ),
              onRatingUpdate: (rating) {
                // Rating is updated
                log('rating update to: $rating');
              },
            ),

 

 

이러면 다음과 같이 사용자가 직접 평점을 입력 할수 있습니다.

 

 

 

여기까지 flutter_rating_bar에 대한 기초적인 사용방법을 알아봤습니다
다음 2편에서는 좀 더 다양한 rating_bar를 가져오도록 하겠습니다.
See you next time~~