guricode

[flutter]자취의 정석 -4,bottomSheet에 TextFormField 입력시 hassized문제 본문

앱/Flutter&Dart

[flutter]자취의 정석 -4,bottomSheet에 TextFormField 입력시 hassized문제

agentrakugaki 2025. 9. 19. 11:44

bottomsheet에 댓글입력창을 달려고하는데 hassize문제가 생긴다

 

분명 텍스트 폼 필드에 Expanded로 감쌋는데도 오류가 생겻다

bottomSheet: Padding(
        // 키보드 올라오면 같이 올림
        padding: EdgeInsets.only(
          bottom: MediaQuery.of(context).viewInsets.bottom,
        ),
        child: Material(
          elevation: 8,
          color: Colors.white,
          child: SafeArea(
            top: false,
            child: Padding(
              padding: const EdgeInsets.all(25),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  SizedBox(
                    height: 36,
                    width: 36,
                    child: Image.asset('assets/images/m_profile/m_black.png'),
                  ),
                  SizedBox(width: 8),
                  Row(
                    children: [
                      Expanded(
                        // TextFormField 필수
                        child: SizedBox(
                          height: 40,
                          child: TextFormField(
                            controller: commentController,
                            minLines: 1,
                            maxLines: 6, // 자동 줄 증가
                            decoration: InputDecoration(
                              hintText: '댓글을 입력하세요',
                              isDense: true,
                              contentPadding: const EdgeInsets.symmetric(
                                horizontal: 12,
                                vertical: 10,
                              ),
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(12),
                              ),
                            ),
                          ),
                        ),
                      ),
                      SizedBox(
                        height: 36,
                        width: 64,
                        child: ElevatedButton(
                          onPressed: submit,
                          child: const Text('확인'),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),

 

 

 

그래서 ConstrainedBox 크기 제한을 시도해봤는데도 똑같았다

ConstrainedBox(
              constraints: BoxConstraints(minHeight: 56, maxHeight: 180),

 

원인은 텍스트폼필드를 감싸고 있는 Row에 있었다

 

Row는 가로사이즈만 제약을 가지고있었다

 

그래서 TextFormField가 새로제약이 존재하지 않기때문에 hassize문제가 생긴 것이었다