[내일배움] Flutter TextField 사용시 빈화면 클릭할때 키보드 비활성화

플러터에서 사용자로부터 입력을 받을때 TextField를 사용하는경우가 많을것이다. 

 

TextField를 누르면 보통 유저에게 키보드가 나타나게 되는데

플러터에서는 입력을 마치고 빈화면을 누를때 키보드가 자동으로 사라지지 않는다!

 

이를 해결하기 위해 다음과 같이 코드를 짜야한다 

 

코드는 아래와 같다 

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusScope.of(context).unfocus();
      },
      child: Scaffold(
        appBar: AppBar(
          title: TextField(),
        ),
        body: Center(
          child: Text('This is the home page'),
        ),
      ),
    );
  }
}

 

잘 보면 Scaffold를 GestureDetector로 감싸서 앱이 클릭되었을때 기능이 실행되게 하고 

클릭되었을때는 현재 포커스를 잡고있는 컨텍스트를 풀어주는 것을 확인 할 수 있다. 

 

사소하지만 필수적으로 구현되어야 하는 기능이다.