FlutterFragmentを設置したらToolbarがStatus barにめり込んだ。対処法を解説。

Androidネイティブなアプリの一部機能をFlutterで開発するために、FlutterFragmentを設置しました。そうしたらAndroidネイティブなToolbarがStatus Barにめり込んでしまいました。

解決方法

レイアウトファイルに android:fitsSystemWindows="true" 属性を設定すればめり込まなくなります。

activity_pager.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="jp.bellware.echo.view.pager.PagerActivity">

    <androidx.appcompat.widget.Toolbar
        app:layout_constraintTop_toTopOf="parent"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
        android:elevation="5dp"
        android:minHeight="?attr/actionBarSize" />
    <!-- Toolbarの下全体にFlutterFragmentを設置する -->
    <FrameLayout
        android:id="@+id/fragmentContainer"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

詳細

FlutterFragmentを設置すると window.decorView.systemUiVisibility が書き換わってしまいます。

FlutterFragmentを設置しなければ0ですが、設置すると

• SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
• SYSTEM_UI_FLAG_LAYOUT_STABLE

が設定されてしまいます。
確認にはActivityのonPauseメソッドでLogcatを使いました。

公式のFlutterFragmentの解説ではshouldAttachEngineToActivityという設定が紹介されていましたが、この設定を変更してもこの現象は変わりませんでした。

さて、 SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN と SYSTEM_UI_FLAG_LAYOUT_STABLE がなにを表しているかというと、こちらの公式の解説でStatus barの後ろにアプリのコンテンツを設置できるとありました。さらに android:fitsSystemWindows 属性をtrueにすることでシステムウィンドウを避けたpaddingを設定出来るとあったので、今回もそれで解決できました。