Flutter 반응형 양식을 사용한 별점 평가

Reactive Forms은 텍스트 입력, 드롭다운, 슬라이더 및 스위치와 같은 양식의 일반 위젯에만 국한되지 않습니다. 양방향으로 FormControls에 바인딩되는 사용자 지정 위젯을 쉽게 만들고 자신만의 Reactive Widgets 세트를 만들 수 있습니다.

이 게시물에서는 Reactive Forms를 사용하여 Reactive Star Rating 위젯을 구현하는 방법을 알아보고 별점 막대를 사용하여 정보를 수집할 수 있는 풍부한 양식을 만들 수 있습니다.

Reactive Forms에 대해 자세히 알아보려면 이전 게시물을 읽거나 github 및 pub repo을 방문하십시오. 위키 페이지Custom Reactive Widgets를 읽을 수도 있습니다.

이것이 우리가 이 게시물의 끝에서 달성할 것입니다.



0부터 Star Rating Bar를 생성하지 않고 대신 기존 위젯을 사용하여 Reactive Widget으로 변환할 것입니다.

우수한 플러그인flutter_rating_bar을 사용하고 FormControl과 양방향 바인딩 기능을 제공합니다.

덜 말하고 더 많은 코딩;)

# import plugin in pubspec.yaml
dependencies:
  flutter_rating_bar: ^3.0.1+1

flutter_rating_bar: ^3.0.1+1 was the last version at the time of the post.

반응형 위젯을 만들고 ReactiveStarRating을 선언하고 ReactiveFormField에서 확장합니다.

/// A reactive star rating widget that two-way binds 
/// to a FormControl<double>.
class ReactiveStarRating extends ReactiveFormField<double> {
  //...

  @override
  ReactiveFormFieldState<double> createState() =>
      ReactiveFormFieldState<double>();
}

그런 다음 부모 클래스에 formControlName 및 빌더 함수를 제공합니다.

/// A reactive star rating widget that two-way binds 
/// to a FormControl<double>.
class ReactiveStarRating extends ReactiveFormField<double> {
  /// Constructs an instance of [ReactiveStarRating].
  ///
  /// The argument [formControlName] must not be null.
  ReactiveStarRating({
    @required String formControlName,
  }) : super(
          formControlName: formControlName,
          builder: (ReactiveFormFieldState<double> field) {
            // RatingBar inner widget
            return RatingBar(
              // set UI value when control changes
              initialRating: field.value,
              // set control value when UI changes
              onRatingUpdate: field.didChange,
              itemBuilder: (context, _) => Icon(Icons.star),
            );
          },
        );

  @override
  ReactiveFormFieldState<double> createState() =>
      ReactiveFormFieldState<double>();
}

완료, 새로운 반응형 위젯 ReactiveStarRating을 소개합니다.

와우 근데 잠깐만, 방금 여기서 무슨 일이 있었는지, 그게 다야? 예, 반응형 위젯이 끝났습니다. 하지만 사용을 시작하기 전에 위의 코드에 대해 조금 설명하겠습니다.

단계는 다음과 같습니다.

1- ReactiveFormField에서 확장합니다. 이것은 상태를 유지하고 FormControl과 바인딩되는 StatefulWidget입니다.
2- 부모의 생성자(super)에 빌더 기능을 제공합니다. 이 함수는 내부 위젯(이 경우 RatingBar 위젯)을 반환합니다. 빌더 함수는 FormControl이 값을 변경할 때마다 호출됩니다.
3- didChange 메서드를 사용하여 FormControl의 값을 업데이트합니다. FormControl의 값을 업데이트할 때마다 새 값을 전달하는 ReactiveFormField의 didChange 메서드를 호출합니다.

어떻게 사용합니까?

거의 끝났습니다. 이제 새로운 ReactiveStarRating을 사용하겠습니다. 또한 FormControl의 변경 사항을 수신 대기하는 다른 반응형 위젯을 추가하여 새로운 ReactiveStarRating과 동기화 상태를 유지하는 방법을 시각화합니다.

class StarRatingSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ReactiveFormBuilder(
        // define a form with a FormControl<double> field.
        form: () => fb.group({'rating': 0.0}),
        builder: (context, form, child) {
          return Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                // listen for changes in `rating` and show value
                ReactiveValueListenableBuilder<double>(
                  formControlName: 'rating',
                  builder: (context, control, child) {
                    return Text(
                      control.value.toStringAsFixed(1),
                      style: TextStyle(fontSize: 40.0),
                    );
                  },
                ),
                SizedBox(height: 20.0),
                // Bind our custom widget with `rating` control
                // just by provinding the control name.
                ReactiveStarRating(
                  formControlName: 'rating',
                ),
                SizedBox(height: 20.0),
                // Bind also a slider
                ReactiveSlider(
                  formControlName: 'rating',
                  divisions: 5,
                  min: 0,
                  max: 5,
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

그리고 그게 다야. 이것은 매우 간단한 예였습니다. 별의 배경색을 변경하고 별 반개로 평가할 수 있도록 위젯을 더 구성 가능하게 만들 것을 촉구합니다.

게시물을 즐기셨기를 바랍니다.

감사.