poc: floating app bar & translucent nav bar

android/app/src/main/AndroidManifest.xml

@@ -10,17 +10,13 @@
         <activity
             android:name=".MainActivity"
             android:launchMode="singleTop"
-            android:theme="@style/LaunchTheme"
+            android:theme="@style/AppTheme"
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
             android:hardwareAccelerated="true"
             android:windowSoftInputMode="adjustResize">
-            <!-- This keeps the window background of the activity showing
-                 until Flutter renders its first frame. It can be removed if
-                 there is no splash screen (such as the default splash screen
-                 defined in @style/LaunchTheme). -->
             <meta-data
                 android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
-                android:value="true" />
+                android:value="false" />
             <intent-filter>
                 <action android:name="android.intent.action.MAIN"/>
                 <category android:name="android.intent.category.LAUNCHER"/>

android/app/src/main/res/values-land/flags.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <bool name="translucentNavBar">false</bool>
+</resources>

android/app/src/main/res/values/flags.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <bool name="translucentNavBar">true</bool>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -1,8 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
+    <style name="AppTheme" parent="@android:style/Theme.Black.NoTitleBar">
-        <!-- Show a splash screen on the activity. Automatically removed when
+        <item name="android:windowTranslucentNavigation">@bool/translucentNavBar</item> <!-- API19+, tinted background & request the SYSTEM_UI_FLAG_LAYOUT_STABLE and SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN flags -->
-             Flutter draws its first frame -->
-        <item name="android:windowBackground">@drawable/launch_background</item>
     </style>
 </resources>

lib/common/fake_app_bar.dart

@@ -0,0 +1,11 @@
+import 'package:flutter/widgets.dart';
+
+class FakeAppBar extends StatelessWidget with PreferredSizeWidget {
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(child: SizedBox.shrink());
+  }
+
+  @override
+  Size get preferredSize => Size.zero;
+}

lib/main.dart

@@ -1,3 +1,4 @@
+import 'package:aves/common/fake_app_bar.dart';
 import 'package:aves/model/image_fetcher.dart';
 import 'package:aves/thumbnail_collection.dart';
 import 'package:flutter/material.dart';
@@ -14,18 +15,14 @@ class MyApp extends StatelessWidget {
       title: 'Aves',
       theme: ThemeData(
         brightness: Brightness.dark,
-        primarySwatch: Colors.blue,
+        accentColor: Colors.amberAccent,
       ),
-      home: HomePage(title: 'Home'),
+      home: HomePage(),
     );
   }
 }
 
 class HomePage extends StatefulWidget {
-  HomePage({Key key, this.title}) : super(key: key);
-
-  final String title;
-
   @override
   _HomePageState createState() => _HomePageState();
 }
@@ -47,15 +44,21 @@ class _HomePageState extends State<HomePage> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    debugPrint('MediaQuery.of(context).viewInsets.bottom=${MediaQuery.of(context).viewInsets.bottom}');
-      appBar: AppBar(
+
-        title: Text(widget.title),
+    return MediaQuery.removeViewInsets(
-      ),
+      context: context,
+      // remove bottom view insets to paint underneath the translucent navigation bar
+      removeBottom: true,
+      child: Scaffold(
+        // fake app bar so that content is safe from status bar, even though we use a SliverAppBar
+        appBar: FakeAppBar(),
         body: imageEntryList == null
             ? Center(
                 child: CircularProgressIndicator(),
               )
             : ThumbnailCollection(imageEntryList),
+      ),
     );
   }
 }

lib/thumbnail_collection.dart

@@ -42,8 +42,12 @@ class ThumbnailCollection extends StatelessWidget {
       controller: scrollController,
       child: CustomScrollView(
         controller: scrollController,
-        slivers: sections.keys
+        slivers: [
-            .map((sectionKey) => SliverStickyHeader(
+          SliverAppBar(
+            title: Text('Aves - All'),
+            floating: true,
+          ),
+          ...sections.keys.map((sectionKey) => SliverStickyHeader(
                 header: SectionHeader(sectionKey),
                 sliver: SliverGrid(
                   delegate: SliverChildBuilderDelegate(
@@ -62,7 +66,7 @@ class ThumbnailCollection extends StatelessWidget {
                   ),
                 ),
               ))
-            .toList(),
+        ],
       ),
     );
   }