Flutter에서 자식에서 부모로 데이터 전달 - #100DaysOfCode - Day 14

소개

이 게시물은 100DaysOfCode 시리즈의 일부입니다. 이 시리즈에서는 100DaysOfCode 여정에 대해 씁니다. 이 도전의 목표는 농업 관리 정보 시스템을 구축하여 플러터와 파이어베이스에 능숙해지는 것입니다.

요약

Flutter에서 동적 드롭다운 양식 필드를 만드는 방법에 대해 설명합니다.

개요

이 포스트에서는 자식 위젯에서 부모 위젯으로 데이터를 전달하는 방법에 대해 설명합니다. 지역 및 지역 드롭다운 양식 필드는 다른 양식에서 재사용되므로 재사용을 위해 자체 위젯으로 추출됩니다.

자식에서 부모로 데이터 전달

  void _getRegionAndDistrictValue(String region, String district) {
    farmer.saveRegion(region);
    farmer.saveDistrict(district);
  }

위 메소드는 RegionDistrictDropdownFormField 위젯(자식 위젯)에 전달됩니다.

지역 지구 드롭다운 FormField

class RegionDistrictDropdownFormField extends StatefulWidget with Validation {
  final Function getDistrictAndRegionValue;

  const RegionDistrictDropdownFormField({
    required this.getDistrictAndRegionValue,
    Key? key,
  }) : super(key: key);

  @override
  _RegionDistrictDropdownFormFieldState createState() =>
      _RegionDistrictDropdownFormFieldState();
}

class _RegionDistrictDropdownFormFieldState
    extends State<RegionDistrictDropdownFormField> {
  late FocusNode regionFocusNode;
  late FocusNode districtFocusNode;
  List<DropdownMenuItem<String>>? districtDropdownMenuItems;
  String? districtValue;
  String? regionValue;

  @override
  void initState() {
    regionFocusNode = FocusNode();
    districtFocusNode = FocusNode();
    super.initState();
  }

  @override
  void dispose() {
    regionFocusNode.dispose();
    districtFocusNode.dispose();
    super.dispose();
  }

  void _handleDropdownOnChanged(FocusNode focusNode) {
    focusNode.requestFocus();
  }

  List<DropdownMenuItem<String>>? _getDistrictItems(String region) {
    late List<DropdownMenuItem<String>> items;

    items = District.byRegion(region)
        .map((e) => DropdownMenuItem(
              child: Text(e),
              value: e,
            ))
        .toList();

    return items;
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 5,
          child: DropdownButtonFormField(
            focusNode: regionFocusNode,
            decoration: FormStyles.textFieldDecoration(labelText: 'Region'),
            onChanged: (String? value) {
              setState(() {
                districtDropdownMenuItems = _getDistrictItems(value!);
                regionValue = value;
                districtValue = districtDropdownMenuItems!.first.value;
              });
            },
            validator: widget.validateRequiredField,
            items: Region.all
                .map((e) => DropdownMenuItem(
                      child: Text(e),
                      value: e,
                    ))
                .toList(),
          ),
        ),
        Spacer(),
        Expanded(
          flex: 5,
          child: DropdownButtonFormField(
            focusNode: districtFocusNode,
            decoration: FormStyles.textFieldDecoration(labelText: 'District'),
            onChanged: (String? value) {
              _handleDropdownOnChanged(districtFocusNode);
              districtValue = value;
              widget.getDistrictAndRegionValue(regionValue, districtValue);
            },
            validator: widget.validateRequiredField,
            value: districtValue,
            items: districtDropdownMenuItems,
          ),
        )
      ],
    );
  }
}

사용자가 지역을 선택하면 widget.getDistrictAndRegionValue(regionValue, districtValue) 메서드가 호출됩니다. 이렇게 하면 상위 위젯이 사용자가 선택한 지역 및 지역 값을 가져올 수 있습니다.

마무리

이 게시물에서 우리는 자식에서 부모에게 데이터를 전달하는 방법에 대해 논의했습니다. 이는 지구 및 지역 드롭다운 양식 필드 위젯을 재사용할 수 있도록 하기 위해 수행되었습니다.

나와 연결

내 게시물을 읽어 주셔서 감사합니다. 아래에서 구독하여 #100DaysOfCodeChallenge에 참여하거나 및 에서 저와 연결하십시오. 당신은 또한 buy me a book 당신의 지원을 표시할 수 있습니다.