<div id="readability-page-1" class="page"><article id="mainContent">
                <div>
                  <p><a href="/m/category/%EA%B0%9C%EB%B0%9C%28%ED%95%A9%EB%8B%88%EB%8B%A4%29/Flutter%26android%26ios"><span>개발(합니다)/Flutter&amp;android&amp;ios</span></a></p><h3>[Flutter] Keyboard 밖에 누르면 TextField 없애는 방법</h3>
                </div>
                <p><cite>otrodevym</cite>
                  <span> 2021. 12. 1. 00:00</span>
                </p>
                                <div>
                                <figure data-ke-mobilestyle="widthOrigin" data-origin-width="803" data-origin-height="159">
    <span data-url="https://k.kakaocdn.net/dn/cHlPeO/btrlQ1x1fKa/PHiKRPZpDZYOkfft2A1pB0/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/cHlPeO/btrlQ1x1fKa/PHiKRPZpDZYOkfft2A1pB0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="803" data-origin-height="159">
    </span>
    
</figure>

<p data-ke-size="size16">TextField를 사용하다보면 Keyboard 밖에를 누르면 Keyboard가 내려가야 하는데 유지되는 경우가 있습니다.</p>
<p data-ke-size="size16">닫아주는걸 명시해주어야 하는데 아래 사이트에서 관련 정보를 확인할 수 있습니다.</p>

<p data-ke-size="size16"><a href="https://www.woolha.com/tutorials/flutter-hide-keyboard-on-tap-outside-text-field" target="_blank" rel="noopener">https://www.woolha.com/tutorials/flutter-hide-keyboard-on-tap-outside-text-field</a></p>
<figure id="og_1637582565322" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="Flutter - Hide Keyboard on Tap Outside Text Field" data-og-description="Examples of how to dismiss keyboard when the user taps outside a text field in Flutter, using GestureDetector and Listener." data-og-host="www.woolha.com" data-og-source-url="https://www.woolha.com/tutorials/flutter-hide-keyboard-on-tap-outside-text-field" data-og-url="https://www.woolha.com/tutorials/flutter-hide-keyboard-on-tap-outside-text-field" data-og-image="https://scrap.kakaocdn.net/dn/Zf4U6/hyMsblP8x8/wrUxulMN5AW7cQK1tEv5z1/img.jpg?width=1200&amp;height=627&amp;face=0_0_1200_627,https://scrap.kakaocdn.net/dn/54BIW/hyMqT79zLG/MAugYY5uNaIkKv65ihwfhk/img.jpg?width=1200&amp;height=627&amp;face=0_0_1200_627"><a href="https://www.woolha.com/tutorials/flutter-hide-keyboard-on-tap-outside-text-field" target="_blank" rel="noopener" data-source-url="https://www.woolha.com/tutorials/flutter-hide-keyboard-on-tap-outside-text-field">

<div>
<p data-ke-size="size16">Flutter - Hide Keyboard on Tap Outside Text Field</p>
<p data-ke-size="size16">Examples of how to dismiss keyboard when the user taps outside a text field in Flutter, using GestureDetector and Listener.</p>
<p data-ke-size="size16">www.woolha.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/Zf4U6/hyMsblP8x8/wrUxulMN5AW7cQK1tEv5z1/img.jpg?width=1200&amp;height=627&amp;face=0_0_1200_627,https://scrap.kakaocdn.net/dn/54BIW/hyMqT79zLG/MAugYY5uNaIkKv65ihwfhk/img.jpg?width=1200&amp;height=627&amp;face=0_0_1200_627"></figure>

<p data-ke-size="size16">방법은 최상단 위젯에 GestureDetector와 FocusManager를 사용하여 해결합니다.</p>

<pre id="code_1637582693216" data-ke-language="javascript" data-ke-type="codeblock"><code> GestureDetector(
    onTap: () =&gt; FocusManager.instance.primaryFocus?.unfocus(),
    child: Scaffold(
      appBar: AppBar(
        title: const Text('Woolha.com Flutter Tutorial'),
      ),
      body: Padding(
        padding: EdgeInsets.all(15),
        child: Center(
          child: _buildForm(),
        ),
      ),
    ),
  )</code></pre>


            
            
                </div>
                

              </article></div>

미니 블로그 : 메모하는 습관

otrodevym

TextField를 사용하다보면 Keyboard 밖에를 누르면 Keyboard가 내려가야 하는데 유지되는 경우가 있습니다.
닫아주는걸 명시해주어야 하는데 아래 사이트에서 관련 정보를 확인할 수 있습니다.
 
https://www.woolha.com/tutorials/flutter-hide-keyboard-on-tap-outside-text-field
 
방법은 최상단 위젯에 GestureDetector와 FocusManager를 사용하여 해결합니다.
 
 GestureDetector(
    onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
    child: Scaffold(
      appBar: AppBar(
        title: const Text('Woolha.com Flutter Tutorial'),
      ),
      body: Padding(
        padding: EdgeInsets.all(15),
        child: Center(
          child: _buildForm(),
        ),
      ),
    ),
  )

[Flutter] Keyboard 밖에 누르면 TextField 없애는 방법

댓글