inthisfucking.world

💩🌎

FlutterFire Authenticationの黒いバーを消す

Androidにおいて、FlutterFire Authenticationを使ってGoogleアカウントでサインインした直後に、黒いバーがスクリーンの上から下に落ちるのが見えます。これを直す方法を記載します。

黒いバー

まずその黒いバーを見てみましょう。

A black bar falls from top to bottom when using FlutterFire Auth

Googleアカウントを使ってサインインした直後に、黒いバーがスクリーンの上から下に落ちていくのが見えるでしょうか。恐らく、Googleアカウントを使ってサインインする時になんらかしらのUIのコンポーネントが上に被さるように表示されていて、そのUIコンポーネントから元のUIのコンポーネントに移る時にアニメーションが適応されてしまっているのだと思います。そして、そのUIのコンポーネントのAppBar相応の部分が黒色なのでしょう。

当該のUIのコンポーネントのバーの色を透明にする

論理的には、この黒いバーを透明にしてしまえば、黒いバーが上から下に落ちていくのは見えなくなり、見た目は良くなります。色々調べてみたのですが、Flutterを使っていない場合でも、透明にすることをworkaroundとしているようでした。

まず、バーが透明なUIのコンポーネントの定義をします。<flutter app folder>/android/app/src/main/res/styles.xmlresourcesタグの中に以下のコードを追加します。

<style name="FlutterGoogleSignIn" parent="android:Theme.Translucent.NoTitleBar">
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>

続いて、上記で定義したスタイルをFlutterFire Authenticationが使っているUIのコンポーネントに適応します。<flutter app folder>/android/app/src/main/AndroidManifest.xmlapplicationタグの中に以下のコードを追加します。

<activity
    android:name="com.google.android.gms.auth.api.signin.internal.SignInHubActivity"
    android:theme="@style/FlutterGoogleSignIn"
    tools:replace="android:theme" />

com.google.android.gms.auth.api.signin.internal.SignInHubActivityが、この黒いバーを持ったUIのコンポーネントなのでしょう。tools:replaceは定義されていないとエラーが出るので、同じファイルのmanifestタグに対して、以下のようにxmlns:tools属性を追加します。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="<your.flutter.package.name">

これで完了です。再度appをビルドしてみると、先程の黒いバーは見えなくなっていることが確認できます。

No more black bar when using FlutterFire Auth

結論

デフォルトでここまでちゃんとドキュメンテーションに書いていて欲しいものです。