LoginSignup
1
0

More than 3 years have passed since last update.

FlutterでWebViewを用いた際にキーボードが入力フォームを隠してしまう問題

Posted at

概要

FlutterでWebViewを用いるにあたり、以下のプラグインが柔軟性にあふれており、便利である。

flutter_webview_plugin - pub.dev

お問い合わせフォームをWeb側で作り、FlutterからそのフォームをWebViewで呼び出す、といった使い方をよく取り入れたりする。
しかしながら、ただWebViewで呼び出しただけでは、Web側の入力フォームを仮想キーボードが隠してしまう問題に直面する。(Android版のみ)

当該の問題を解決するには、resizeToAvoidBottomInsetオプションをtrueにする必要がある。

実装

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class SampleWebView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      url: 'https://your-url',
      appBar: AppBar(
        title: Text(
          'your title',
        ),
      ),
      resizeToAvoidBottomInset: true,
    );
  }
}

あとはSampleWebViewMaterialPageRouteなりで呼び出す。
するとうまい感じにキーボードが入力フォームを隠さず、入力しやすくなる。

以上。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0