[flutter 플러터] 중첩 FormField, Form onSave 작동 순서

플러터에는 Form과 FormField<T> 위젯이 있는데, 이는 다량의 정보를 입력받아 저장할 때 유용하다.

하지만 입력 받아야 하는 정보가 복잡하여 위젯이 몇 겹으로 중첩될 때, validate와 onSave의 작동 순서는 어떻게 될까?

1단계

FormField가 여러개면 어떻게 될까?

Form(
	child: Column(children:[
    	FormField(...),  //1
        FormField(...),  //2 
        FormField(...),  //3
        ElevatedButton(onPressed:()=>_formKey.currentState!.save()),
    ])
)
---
formField 1 validate
formField 2 validate
formField 3 validate
formField 1 save
formField 2 save
formField 3 save

각각 위에서 아래로, 순서대로 실행됨을 알 수 있다.

2단계

각 FormField 안에 또 FormField를 넣으면 어떻게 될까?

Form(
	child: Column(children:[
    	FormField(...
        	builder: Column(children:[
            	FormField(...), //1-1
                FormField(...), //1-2
            ]),  //1
        FormField(..., builder: 위와 동일),  //2 
        FormField(..., builder: 위와 동일),  //3
        ElevatedButton(onPressed:()=>_formKey.currentState!.save()),
    ])
)
---
formField 1 validate
formField 1-1 validate
formField 1-2 validate
formField 2 validate
formField 2-1 validate
formField 2-2 validate
formField 3 validate
formField 3-1 validate
formField 3-2 validate
formField 1 save
formField 1-1 save
formField 1-2 save
formField 2 save
formField 2-1 save
formField 2-2 save
formField 3 save
formField 3-1 save
formField 3-2 save

위에서 아래로 순서대로 작동한다.
다만 FormField 1이 1-1보다 먼저 실행되기 때문에,
Save()할 때 FormField 1에서 하위 1-1, 1-2의 값을 저장할 수가 없다.

3단계

Form이 중첩되면 어떻게 될까?
FormField 2 안에만 Form을 추가하고, FormField 3은 중첩 없이 단일로 바꿨다.

Form(
	child: Column(children:[
    	FormField(...
        	builder: Column(children:[
            	FormField(...), //1-1
                FormField(...), //1-2
            ]),  //1
        FormField(...
        	builder: Form(
            	child: Column(children:[
            		FormField(...), //2-1
                	FormField(...), //2-2
            	])
            ),  //2
        FormField(...),  //3
        ElevatedButton(onPressed:()=>_formKey.currentState!.save()),
    ])
)
---
formField 1 validate
formField 1-1 validate
formField 1-2 validate
formField 2 validate
formField 3 validate
formField 1 save
formField 1-1 save
formField 1-2 save
formField 2 save
formField 3 save

새로운 Form 아래에 있는 2-1, 2-2는 아무것도 호출되지 않았다.
따라서 Form 아래에 새로운 Form이 있을 경우 건들지 않는다는 것을 알 수 있었다.

정리

onSave할 때 FormField 1 로 하위 FormField 1-1, 1-2 의 값을 가져와 정리하여,
상위 위젯으로 결과를 넘겨주려고 했는데, 뜻대로 되지 않아서 테스트 해봤습니다.
위 결과로 깨닫게 된 것은, FormField 끼리 연계하여 무엇인가 하려는 생각은 버리고, 아무리 중첩되어도 Form과 FormField가 단순하게 연결이 되어 있다고 생각하며 개발해야겠습니다.