Flutter에서 RatingBar 표시기를 사용하는 방법은 무엇입니까?

사용자의 콘텐츠는 이름에서 알 수 있듯이 등급 표시줄을 사용하여 등급을 매길 수 있습니다. 소프트웨어에 대한 사용자 의견을 관리하거나 애플리케이션이 호스팅하는 콘텐츠에 대한 등급을 얻기 위해 모든 애플리케이션에서 주로 사용됩니다. IMDB와 같은 애플리케이션은 이를 사용하여 영화 및 TV 쇼를 평가하고 Uber는 이를 사용하여 서비스에 대한 고객 의견을 얻습니다.

RatingBar는 별점을 표시하는 SeekBar 및 ProgressBar 확장입니다.

아래는 RatingBar의 생성자입니다.

RatingBar(
{required RatingWidget ratingWidget,
required ValueChanged<double> onRatingUpdate,
Color? glowColor,
double? maxRating,
TextDirection? textDirection,
Color? unratedColor,
bool allowHalfRating = false,
Axis direction = Axis.horizontal,
bool glow = true,
double glowRadius = 2,
bool ignoreGestures = false,
double initialRating = 0.0,
int itemCount = 5,
EdgeInsetsGeometry itemPadding = EdgeInsets.zero,
double itemSize = 40.0,
double minRating = 0,
bool tapOnlyMode = false,
bool updateOnDrag = false,
WrapAlignment wrapAlignment = WrapAlignment.start}
)

RatingBar 위젯의 속성을 살펴보겠습니다.

레이팅 위젯 :

등급 표시줄의 항목으로 사용될 위젯을 정의합니다.

onRatingUpdate :

기본 값이 변경되었을 때 신호를 보내는 콜백 서명.

글로우색상 :

글로우의 색상을 정의합니다.

최대 등급:

등급 막대의 최대 등급을 설정합니다.

텍스트방향 :

텍스트가 오른쪽에서 왼쪽으로 이동하도록 설정하는 데 사용됩니다.

등급 없음색상 :

등급이 지정되지 않은 구성 요소에 사용되며 색상을 정의합니다.

allowHalfRating :

절반 등급 지원은 true로 설정하면 활성화됩니다.

방향 :

등급 막대의 방향을 지정하는 데 사용됩니다.(가로 또는 세로)

글로우 :

값이 true인 경우 터치하면 등급 막대 항목이 빛납니다.

글로우 반경 :

이 속성은 광선의 반경을 정의하는 데 사용됩니다.

무시제스처 :

true인 경우 등급 표시줄 위로 제스처가 허용되지 않습니다.

initialRating :

등급 표시줄에 설정할 초기 등급을 정의합니다.

아이템 개수 :

등급 표시줄 항목의 총 개수가 정의됩니다.

아이템패딩 :

각 등급 항목을 삽입할 공간의 양을 정의합니다.

항목 크기:

막대에서 각 등급 항목의 차원을 정의합니다.

최소 평가:

등급 표시줄에 설정된 최소 등급입니다.

tapOnlyMode :

true로 설정하면 드래그하여 평가 기능이 비활성화됩니다. 이 모드가 활성화되면 Half-Rating 기능이 비활성화됩니다.

업데이트온드래그 :

드래그할 때 onRatingUpdate가 업데이트되는지 여부를 정의합니다.

wrapAlignment :

기본 축에 RatingBar 항목을 배치하는 데 사용됩니다.

RattingBar 애플리케이션을 개발하려면 다음 조치를 취하십시오.

pubspec.yaml 파일에 종속성을 포함합니다.

flutter_rating_bar

main.dart에 종속성을 추가합니다.

StatefulWidget을 사용하여 애플리케이션 구조를 제공합니다.

거기에 세로 등급 막대를 넣으십시오.

RTL(오른쪽에서 왼쪽으로) 등급 막대의 정렬을 전환하는 스위치를 추가합니다(RTL)

등급 막대의 정렬을 수평에서 수직으로 전환하는 스위치를 포함합니다.

UI 아이콘을 변경하는 3가지 모드를 포함합니다.

Flutter Agency의 Flutter 개발자
##예시 :

import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  double? _rating;
  IconData? _selectedIcon;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Builder(
        builder: (context) => Scaffold(
          appBar: AppBar(
            title: const Text('Rating Bar'),
            backgroundColor: Colors.green,
          ),
          body: Center(
            child: Container(
              padding: const EdgeInsets.symmetric(vertical: 20),
              child: RatingBar.builder(
                initialRating: _rating ?? 0.0,
                minRating: 1,
                direction: Axis.horizontal,
                allowHalfRating: false,
                itemCount: 5,
                itemSize: 50,
                itemPadding: const EdgeInsets.symmetric(horizontal: 8),
                itemBuilder: (context, _) => Icon(
                  _selectedIcon ?? Icons.star,
                  color: Colors.amber,
                ),
                onRatingUpdate: (rating) {
                  _rating = rating;
                  setState(() {});
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

산출:

결론:

이것은 정말 기본적인 그림이었습니다. 별의 배경색을 변경하고 별점 반점을 줄 수 있도록 위젯의 구성 가능성을 높이시기 바랍니다. 이 기사를 읽고 마음에 드셨기를 바랍니다.

Flutter를 사용하여 교차 플랫폼에서 애플리케이션을 개발하려는 경우 원활하게 실행되는 최고의 앱을 제공할 숙련된 Flutter 개발자와 상담하세요.

자주 묻는 질문(FAQ)

1. Flutter에서 평가 막대를 사용하는 방법은 무엇입니까?
먼저 레이아웃 요소 탭에서 열 위젯을 드래그하거나 위젯 트리에서 직접 포함합니다. 그런 다음 교차축 정렬을 시작하도록 설정합니다. 아이콘 및 높이 속성을 200으로 설정합니다. 나중에 텍스트 위젯을 포함한 열 내부.

2. Flutter의 진행률 표시줄은 무엇인가요?

진행률 표시줄은 다운로드, 설치, 파일 전송 등과 같은 작업의 진행률을 보는 데 사용되는 그래픽 제어 요소입니다. 여기에서 진행률 표시줄에 대한 자세한 내용을 읽어보세요.

3. Flutter에서 Stateful 위젯 정의

상태 저장 위젯은 다른 위젯의 성상을 개발하고 사용자 인터페이스를 보다 구체적으로 표현하여 사용자 인터페이스의 일부를 설명합니다.