⚒️
Flutter でキーボードを閉じる
キーボード外をタップで閉じる
primaryFocus?.unfocus() を呼び出します。
使用例
main.dart
import 'package:flutter/material.dart';
void main() => runApp(
MaterialApp(
home: GestureDetector(
onTap: () => primaryFocus?.unfocus(),
child: const Scaffold(
body: Center(
child: TextField(
autofocus: true,
),
),
),
),
),
);
解説
Flutter v1.10.15 からこの方法が利用できます。
primaryFocus の実装をみてみると WidgetsBinding.instance.focusManager.primaryFocus を呼び出していました。
つまり、FocusManager.instance.primaryFocus?.unfocus() と動作は変わりません。
スクロールで閉じる
SingleChildScrollView や ListView などのスクロール可能な Widget には keyboardDismissBehavior というプロパティが用意されていて、それを ScrollViewKeyboardDismissBehavior.onDrag に設定します。
使用例
main.dart
import 'package:flutter/material.dart';
void main() => runApp(
const MaterialApp(
home: Scaffold(
body: SingleChildScrollView(
keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
child: SizedBox(
height: 1200,
child: Center(
child: TextField(
autofocus: true,
),
),
),
),
),
),
);
解説
ScrollView は Flutter v1.15.22 から、ListView や GridView などは v1.17.0 から利用できます。
実装をみてみると、スクロール更新時に FocusScope.of(context).unfocus() を呼び出すようにリスナーを登録していました。
if (keyboardDismissBehavior == ScrollViewKeyboardDismissBehavior.onDrag) {
scrollable = NotificationListener<ScrollUpdateNotification>(
child: scrollable,
onNotification: (ScrollUpdateNotification notification) {
final FocusScopeNode focusNode = FocusScope.of(context);
if (notification.dragDetails != null && focusNode.hasFocus) {
focusNode.unfocus();
}
return false;
},
);
}
おわりに
「primaryFocus?.unfocus() でキーボードを閉じる」と書かれている記事が見つけられず、せっかく便利なものを用意してくれているのにもったいない！と思ったので記事にしました。
少しでもみなさんのお役に立てれば幸いです。
Discussion