37
loading...
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.
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;
FarmerFormScreen({
this.farmerModel,
required this.formType,
Key? key,
}) : super(key: key);
_FarmerFormScreenController createState() => _FarmerFormScreenController();
}This widget accepts an optional
final FarmerServiceModel? farmerModel; that will be used to update the farmer document.class _FarmerFormScreenController extends State<FarmerFormScreen> {
Widget build(BuildContext context) => _FarmerFormScreenView(this);
late TextEditingController dateOfBirthController;
void initState() {
super.initState();
dateOfBirthController = TextEditingController();
if (widget.formType == FormType.update) {
dateOfBirthController = TextEditingController(
text: DateFormat.yMMMd().format(widget.farmerModel!.dateOfBirth!));
} else {
dateOfBirthController = TextEditingController();
}
}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.
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,
textInputAction: TextInputAction.next,
autovalidateMode: AutovalidateMode.onUserInteraction,
validator: state.farmer.validateRequiredField,
onSaved: state.farmer.saveLastName,
initialValue: state.widget.formType == FormType.update
? state.widget.farmerModel!.lastName
: null,
);
}
}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. In this post, we discussed how to reuse our farmer form screen widget to add and update a farmer document.
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.
37