Passing Data From Child To Parent in Flutter- #100DaysOfCode - Day 14
Tags: 100daysofcode, flutter, dart
Published: 2021-07-09 01:35:10

## Introduction

This post is part of my 100DaysOfCode series. In this series, I write about my 100DaysOfCode journey. My aim for this challenge is become proficient in flutter and firebase by building an Agriculture Management Information System.

## Recap

On [Day 13](https://dev.to/curtlycritchlow/creating-a-dynamic-dropdown-form-field-in-flutter-100daysofcode-day-13-4pl1) we discuss how to create a dynamic dropdown form field in flutter.

##Overview

In this post, we will discuss how to pass data from a child widget to a parent widget. The region and district dropdown form field will be reused in other forms so they were extracted into its own widget for reusability. 

## Passing data from child to parent

```Dart
  void _getRegionAndDistrictValue(String region, String district) {
    farmer.saveRegion(region);
    farmer.saveDistrict(district);
  }
```
The above method will be passed to the `RegionDistrictDropdownFormField` widget (child widget). 

### Region District Dropdown FormField
```Dart
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,
          ),
        )
      ],
    );
  }
}
```
When the user selects a district the `widget.getDistrictAndRegionValue(regionValue, districtValue)` method will be called. This will allow the parent widget to get the region and district values selected by the user.

##Wrap Up

In this post, we discussed how to pass data from a child to its parents. This was done to make the district and region dropdown form field widget reusable.

## Connect with me

Thank you for reading my post. Feel free to subscribe below to join me on the #100DaysOfCodeChallenge or connect with me on [LinkedIn](https://www.linkedin.com/in/curtlycritchlow/) and [Twitter](https://twitter.com/CritchlowCurtly). You can also [buy me a book](https://www.buymeacoffee.com/curtlycritchlow) to show your support.