[flutter] 사용자 입력 키보드 숨기기

플러터에서 사용자 입력 키보드를 슉 숨기는 방법

TextField 위젯은 사용자 입력을 받기 위해 자주 사용되는데요. TextField 입력란을 누르면 화면에 키보드가 나타나게 되고, 이를 닫기 위해선 안드로이드의 경우 뒤로가기 버튼이나 ios에선 완료 버튼을 눌러야만 키보드가 사라지는 것을 확인하실 수 있을 거예요.

 

"잉...? 우리가 평소 사용하던 앱에서는 키보드 밖에 영역을 터치하거나 누르면 키보드가 스르륵 사라지던데..."

 

키보드를 닫으려고 항상 작은 버튼을 누르는 것은 사용자에게 불편한 경험을 제공하는 거라 생각해요. 그래서 작은 버튼을 누르지 않고 키보드를 숨기는 간단한 방법에 대해 알아볼게요.

 

1단계: 사용자 탭 감지하기

우선 사용자가 TextField 외부 영역을 탭 했는지 감지하기 위해 GestureDetector 위젯을 사용할 거예요. 저는 앱의 모든 페이지에서 탭을 감지하고 키보드를 숨기는 이벤트를 적용하려고 MaterialApp 위젯 상위에 적용했어요.

GestureDetector(
  onTap: () {},
  child: MaterialApp(
    title: 'keyboard unfocus',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: MyHomePage(),
  ),
);

 

2단계: 키보드 숨기기

이제 FocusManager를 사용해서 TextField의 현재 포커스를 제거하면 됩니다.

GestureDetector(
  onTap: () {
    FocusManager.instance.primaryFocus?.unfocus(); // 키보드 닫기 이벤트
  },
  child: MaterialApp(
    title: 'keyboard unfocus',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: MyHomePage(),
  ),
);

 

전체 코드

// main.dart
import 'package/flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector( // 사용자 탭 감지
      onTap: () {
        FocusManager.instance.primaryFocus?.unfocus(); // 키보드 닫기 이벤트
      },
      child: MaterialApp(
        title: 'keyboard unfocus',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

 

이제 다음과 같이 키보드를 간편하게 닫을 수 있을 거예요!

 

참고로 플러터 입문하시는 분이나 비개발자분들이 좀 더 즐겁고 쉽게 플러터를 활용하셨으면 좋겠다는 취지로 글을 작성하다 보니 부족함이 많을 수 있다는 점 양해 부탁드릴게요!

 

독자님도 저도 꾸준히 공부해서 성장해가는 플러터 개발자가 되었으면 좋겠어요!

오늘도 저의 글을 읽어주셔서 감사합니다~😊