Flutter キーボードの高さを取得するサンプル

環境
Windows11 pro 64bit
Flutter 3.3.7

構文
MediaQuery.of(context).viewInsets.bottom;
「MediaQuery.of(context).viewInsets.bottom」の値を取得します。
キーボードの高さを取得するには、MediaQueryを使います。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@override
Widget build(BuildContext context) {
final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text('Keyboardの高さ: $keyboardHeight'),
Padding(
padding: const EdgeInsets.all(25.0),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
),
),
),
],
),
);
}
@override Widget build(BuildContext context) { final keyboardHeight = MediaQuery.of(context).viewInsets.bottom; return Scaffold( body: Column( mainAxisAlignment: MainAxisAlignment.end, children: [ Text('Keyboardの高さ: $keyboardHeight'), Padding( padding: const EdgeInsets.all(25.0), child: TextField( decoration: InputDecoration( border: OutlineInputBorder(), ), ), ), ], ), ); }
@override
 Widget build(BuildContext context) {
   final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;

   return Scaffold(
     body: Column(
       mainAxisAlignment: MainAxisAlignment.end,
       children: [
         Text('Keyboardの高さ: $keyboardHeight'),
         Padding(
           padding: const EdgeInsets.all(25.0),
           child: TextField(
             decoration: InputDecoration(
               border: OutlineInputBorder(),
             ),
           ),
         ),
       ],
     ),
   );
 }

 

Flutter

Posted by arkgame