DEV Community

Curtly Critchlow
Curtly Critchlow

Posted on

How to reuse form field widget to add and update cloud firestore documents - #100DaysOfCode - Day 17


This post is part of my 100DaysOfCode series. In this series, I write about what I am learning on this challenge. For this challenge, I will be learning flutter and firebase by building an Agriculture Management Information System.


On Day 16 we discussed how to reuse a screen widget to personalize our app for the currently signed-in user.


In this post, we'll discuss how to use our farmer form screen to add and update cloud firestore documents. We have already implemented the Add functionality so we will focus on the update functionality.

Location Filter Enum

The first step is to create a Farm Type enum. enum FarmType { add, update }. This enum value will be passed to the FarmerFormScreen() widget to modify the screen into an add farmer form and an update farmer form.

class FarmerFormScreen extends StatefulWidget {
  static String routeName = 'AddFarmerScreen';
  final FarmerServiceModel? farmerModel;
  final FormType formType;
    required this.formType,
    Key? key,
  }) : super(key: key);

  _FarmerFormScreenController createState() => _FarmerFormScreenController();
Enter fullscreen mode Exit fullscreen mode

This widget accepts an optional final FarmerServiceModel? farmerModel; that will be used to update the farmer document.

Text Form Field widget with Controller

class _FarmerFormScreenController extends State<FarmerFormScreen> {
  Widget build(BuildContext context) => _FarmerFormScreenView(this);
  late TextEditingController dateOfBirthController;

  void initState() {

    dateOfBirthController = TextEditingController();
    if (widget.formType == FormType.update) {
      dateOfBirthController = TextEditingController(
          text: DateFormat.yMMMd().format(widget.farmerModel!.dateOfBirth!));
    } else {
      dateOfBirthController = TextEditingController();
Enter fullscreen mode Exit fullscreen mode

The date of birth text form field initial value will be null when adding a farmer and the farmer date of birth when updating a farmer document.

Text Form Field widget without controller

 class LastNameTextFormField extends StatelessWidget {
  const LastNameTextFormField({
    Key? key,
    required this.state,
  }) : super(key: key);

  final _FarmerFormScreenController state;

  Widget build(BuildContext context) {
    return TextFormField(
      decoration: FormStyles.textFieldDecoration(labelText: 'Last Name'),
      focusNode: state.lastNameFocusNode,
      autovalidateMode: AutovalidateMode.onUserInteraction,
      validator: state.farmer.validateRequiredField,
      onSaved: state.farmer.saveLastName,
      initialValue: state.widget.formType == FormType.update
          ? state.widget.farmerModel!.lastName
          : null,
Enter fullscreen mode Exit fullscreen mode

The initialValue is assigned the farmer document lastname value if state.widget.formType == FormType.update and null otherwise. This same methodology was repeated for all other form field widgets.

Wrap Up

In this post, we discussed how to reuse our farmer form screen widget to add and update a farmer document.

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 and Twitter. You can also buy me a book to show your support.

Discussion (0)