FlutterFire Authenticationの黒いバーを消す
Androidにおいて、FlutterFire Authenticationを使ってGoogleアカウントでサインインした直後に、黒いバーがスクリーンの上から下に落ちるのが見えます。これを直す方法を記載します。
黒いバー
まずその黒いバーを見てみましょう。
Googleアカウントを使ってサインインした直後に、黒いバーがスクリーンの上から下に落ちていくのが見えるでしょうか。恐らく、Googleアカウントを使ってサインインする時になんらかしらのUIのコンポーネントが上に被さるように表示されていて、そのUIコンポーネントから元のUIのコンポーネントに移る時にアニメーションが適応されてしまっているのだと思います。そして、そのUIのコンポーネントのAppBar相応の部分が黒色なのでしょう。
当該のUIのコンポーネントのバーの色を透明にする
論理的には、この黒いバーを透明にしてしまえば、黒いバーが上から下に落ちていくのは見えなくなり、見た目は良くなります。色々調べてみたのですが、Flutterを使っていない場合でも、透明にすることをworkaroundとしているようでした。
まず、バーが透明なUIのコンポーネントの定義をします。<flutter app folder>/android/app/src/main/res/styles.xml
のresources
タグの中に以下のコードを追加します。
<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.xml
のapplication
タグの中に以下のコードを追加します。
<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をビルドしてみると、先程の黒いバーは見えなくなっていることが確認できます。
結論
デフォルトでここまでちゃんとドキュメンテーションに書いていて欲しいものです。