Recap
On day 4 we paused building the crop management information system and discussed layout and constraints when using Row and Columns.
Overview
In this post we will refactor the Farmer Registration Form to make the code more readable.
Going deeper
The farmer registration form is show below.
AddFarmerScreen
This screen is a stateful widget with an _AddFarmerScreenController() to manage state.
class AddFarmerScreen extends StatefulWidget {
static String routeName = 'AddFarmerPage';
const AddFarmerScreen({
Key? key,
}) : super(key: key);
@override
_AddFarmerscreenController createState() => _AddFarmerscreenController();
}
_AddFarmerScreenController
We'll discuss this widget in depth when we connect the AddFarmerCommand to the Form.
_AddFarmerScreenView
This is a stateless widget that is only concerned with layout. All the logic of this screen will be handled by the _AddFarmerScreenController().
class _AddFarmerScreenView
extends WidgetView<AddFarmerScreen, _AddFarmerscreenController> {
final state;
const _AddFarmerScreenView(this.state) : super(state);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Add Farmer'),
),
body: Padding(
padding: const EdgeInsets.all(24.0),
child: Form(
key: state._formkey,
onChanged: state._hanldeOnFormChanged,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
FormHeader(title: 'Farmer Registration Form'),
Expanded(
child: ListView(children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
registrationNumberTextFormField(),
Spacer(),
nationalIdTextFormField(),
],
),
Row(
children: [
Expanded(
child: Column(
// mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizedBox(
height: 300,
width: 300,
child: Container(
color: Colors.blue,
),
),
ElevatedButton.icon(
onPressed: () {},
icon: Icon(Icons.camera_alt_outlined),
label: Text('Take Picture')),
],
),
),
SizedBox(width: 30.0),
Expanded(
child: Column(children: [
firstNameTextFormField(),
nicknameTextFormField(),
lastNameTextFormField(),
]),
)
],
),
SizedBox(
height: 15,
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
dateOfBirthDatePickerFormField(),
Spacer(),
genderDropdownFormField(),
Spacer(),
ethnicityDropdownFormField(),
Spacer(),
maritalStatusDropdownFormField(),
],
),
addressTextFormField(),
Row(
children: [
farmerCategoryDropdownFormField(),
Spacer(),
subsectorDropdownFormField(),
Spacer(),
operationScaleDropdownFormField(),
],
),
Row(
children: [
headOfHouseholdCheckBoxFormField(),
farmingPrimaryIncomeSourceCheckboxFormField(),
activeFarmerCheckboxFormField(),
],
),
SizedBox(
height: 15,
),
ElevatedButton(
onPressed: () {}, child: Text('Register Farmer'))
]),
)
],
)),
),
)
For readability the form field widgets were extracted into their own function. This makes the code leaner resulting in increase readability. This is the recommended approach by flutter, read more in this article.
Wrap UP
When your screen have multiple deeply nested widgets. Extract appropriate widgets into their own variable or functions. Extract widgets into a separate class if widgets will be reused in another part of your app. In the next post we will connect the AddFarmerCommand().run() that was created on Day 2 along with other logics to our form layout.
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.
Top comments (0)