[flutter] Error 키보드 origin_client_hide_soft_input reason hide_soft_input_by_insets_api

문제 상황

텍스트필드를 눌렀을때 , 키보드가 왔다갔다 거리면서 제대로 위치를 잡지 못하는 오류가 지속적으로 생겼다.

I/ImeTracker: onRequestHide at ORIGIN_CLIENT_HIDE_SOFT_INPUT reason HIDE_SOFT_INPUT_BY_INSETS_API
I/InputMethodManager_LC: notifyImeHidden: IInputMethodManagerGlobalInvoker.hideSoftInput
I/ViewRootImpl: Resizing android.view.ViewRootImpl frame=[0,0][1080,2340]

1. 키보드가 열릴때 : 화면 레이아웃이 재조정되며 화면이 다시 랜더링 되는 문제

2. 키보드가 닫힐때 : 레이아웃이 충돌하여 UI가 흔들

처음 구조는 SafeArea > Scaffold 구조로 구성하고 아래의 코드와 같이 구성했었다.

하지만 계속 origin_client_hide_soft_input reason hide_soft_input_by_insets_api 의 메세지가 나타나면서 에러는 아니지만, 텍스트 필드를 클릭시 키보드가 올라왔다가 바로 내려가는 현상이 나타남

import 'package:flutter/material.dart';
import 'components/customForm.dart';
import 'package:flutter_clone_coding/size.dart';
import 'package:flutter_clone_coding/theme.dart';
import '/screens/Login/components/logo.dart';

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.arrow_back_ios),
            onPressed: () {},
          ),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: ListView(
            children: [
              Text(
                '로그인',
                style: customTextTheme(context).displayLarge,
              ),
              SizedBox(height: 20),
              Stack(children: [
                Container(
                  width: getParentWith(context),
                  height: 150,
                ),
                Positioned(
                  left: -45,
                  child: Logo(),
                ),
              ]),
              Text(
                '안녕하세요 \n스타벅스 입니다.',
                style: customTextTheme(context).displaySmall,
              ),
              Text(
                '회원 서비스 이용을 위해 로그인 해주세요.',
                style: customTextTheme(context).bodyMedium,
              ),
              SizedBox(height: 30),
              Customform(),
            ],
          ),
        ),
      ),
    );
  }
}

해결 방법

첫번째 방법

1. 1. resizeToAvoidBottomInset: false 설정
   키보드가 열릴 때 Scaffold가 레이아웃을 자동으로 조정하지 않도록 설정합니다.
2. GestureDetector로 키보드 숨기기
   화면을 터치하면 키보드를 닫아 UI 동작을 매끄럽게 만듭니다.
3. SingleChildScrollView와 Padding 조합
   키보드 높이를 고려하여 입력 필드가 잘리는 것을 방지합니다.

import 'package:flutter/material.dart';
import 'package:applus_market/theme.dart'; // 테마 관련 설정
import 'package:applus_market/screens/Login/components/login_form.dart'; // 로그인 폼
import 'package:applus_market/screens/components/logo.dart'; // 로고 위젯

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(),
        resizeToAvoidBottomInset: false, // 키보드와 bottomNavigationBar 충돌 방지
        body: GestureDetector(
          onTap: () => FocusScope.of(context).unfocus(), // 화면 터치 시 키보드 닫기
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '로그인',
                    style: Theme.of(context).textTheme.headlineLarge,
                  ),
                  const SizedBox(height: 10),
                  Text(
                    '안녕하세요 \n APPLUS 마켓 입니다.',
                    style: Theme.of(context).textTheme.headlineMedium,
                  ),
                  Logo(),
                  const SizedBox(height: 20),
                  LoginForm(), // 사용자 입력 폼
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      TextButton(
                          style: TextButton.styleFrom(
                              backgroundColor: APlusTheme.systemBackground,
                              foregroundColor: Colors.grey,
                              padding: const EdgeInsets.symmetric(
                                  vertical: 0, horizontal: 10)),
                          onPressed: () {
                            // 아이디 찾기 동작
                          },
                          child: const Text('아이디찾기')),
                      Container(height: 15, width: 1, color: Colors.grey),
                      TextButton(
                        onPressed: () {
                          // 비밀번호 찾기 동작
                        },
                        child: const Text('비밀번호찾기'),
                        style: TextButton.styleFrom(
                            backgroundColor: APlusTheme.systemBackground,
                            foregroundColor: Colors.grey,
                            padding: const EdgeInsets.symmetric(
                                vertical: 0, horizontal: 10)),
                      ),
                      Container(height: 15, width: 1, color: Colors.grey),
                      TextButton(
                        onPressed: () {
                          // 회원가입 동작
                        },
                        child: const Text('회원가입'),
                        style: TextButton.styleFrom(
                            backgroundColor: APlusTheme.systemBackground,
                            foregroundColor: Colors.grey,
                            padding: const EdgeInsets.symmetric(
                                vertical: 0, horizontal: 10)),
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
        ),
        bottomNavigationBar: Padding(
          padding: const EdgeInsets.all(8.0),
          child: SizedBox(
            height: 50,
            child: ElevatedButton(
              onPressed: () {
                // 로그인 동작
              },
              child: const Text('로그인'),
            ),
          ),
        ),
      ),
    );
  }
}

여러 방법을 시도해본 결과 이 GestureDetector로 문제를 해결할 수 있었고, 해당 문제를 겪는 사람들도 잘 해결되시길 바랍니다.

두번째 방법