Change FocusScope

 

대부분의 앱은 키보드를 치다 다른 부분을 누르면 키보드가 사라지길 바라는 경우가 있다.

하지만 flutter의경우 다른 설정없이 키보드가 뜨게 되면 아무리 다른 부분을 눌러도 키보드가 알아서 사라지지 않는다.

이경우 사용하는 방법중 하나인 focusscope.of(context).requestfocus(new focusnode()); 이다.

 

1. Start Code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Change focus position'),
      ),
      body: ListView(
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[],
          ),
        ],
      ),
    );
  }
}

 

위의 코드의 결과는 당연히 빈화면이 나오게 될것이다.

 

 

 

2. Second code

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Change focus position'),
      ),
      body: ListView(
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text('input'),
                  Expanded(
                    child: TextField(
                      keyboardType: TextInputType.text,
                    ),
                  )
                ],
              )
            ],
          ),
        ],
      ),
    );
  }
}

 

_MyHomePageState부분을 다음처럼 Row를 추가하고 input이란 text와 TextField를 추가하게 되면 다음과 같은 형식이 나오게 된다. 하지만 아무리 화면의 빈부분을 눌러도 키보드는 사라지지가 않게 된다.

 

 

3. Third code

 이때 이용하는것이 앞서 말한 focusscope.of(context).requestfocus(new focusnode()); 이다. 이것을 사용하기 위해서 전체 부분을 GestureDetector로 감싼후 onTap이 됐을때 focusscope.of(context).requestfocus(new focusnode()); 이 실행될수 있도록 하면 되는 것이다. 코드는 다음과 같다.

 

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Change focus position'),
      ),
      body: GestureDetector(
        onTap: () {
          FocusScope.of(context).requestFocus(new FocusNode());
        },
        child: ListView(
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text('input'),
                    Expanded(
                      child: TextField(
                        keyboardType: TextInputType.text,
                      ),
                    )
                  ],
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 

위에서 보듯 화면의 빈부분을 눌러도 키보드가 사라지는것을 볼수가 있다.