Title text cut out in Android Notch Phone in flutter

Question

I am developing on flutter based hybrid mobile app on which I am using Google Pixel XL API 28 emulator. The application works fine but my title on the application is cut due to notch of the screen. I have tried to add a safe area too but could not get success. Anyone have any idea of this. Thanks in advance.

Image:

hey, Can you show us the code. how you used safeArea? – Sahdeep Singh Nov 13 '19 at 08:32 — Sahdeep Singh, Nov 13 '19 at 08:32

score 2 · Accepted Answer · answered Nov 13 '19 at 12:49

Finally!! I found the solutions.

Create one folder inside Android res's folder with the name of "values-v28" Copy the code from Values folder's styles.xml file and paste it into new folder or replace the below code inside the new folder's styles.xml file. Force quit terminal which you used.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>
</resources>

It works for me. thanks for your valuable respose.

score 1 · Answer 2 · answered Nov 13 '19 at 11:42

1

You can use "SafeArea" Like Below Code:-

return Scaffold(
      body: SafeArea(
          child: Container()),
);

answered Nov 13 '19 at 11:42

Dhaval Patel

369
1
8

score 1 · Answer 3 · answered Nov 13 '19 at 11:51

1

you can put Scaffold into safe area

 return SafeArea(    
 child: Scaffold  ( ),
 );

answered Nov 13 '19 at 11:51

nordine enn

78
1
8

Title text cut out in Android Notch Phone in flutter

3 Answers3