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),
       ),
-      body: imageEntryList == null
-          ? Center(
-              child: CircularProgressIndicator(),
-            )
-          : ThumbnailCollection(imageEntryList),
     );
   }
 }

lib/thumbnail_collection.dart

@@ -42,27 +42,31 @@ class ThumbnailCollection extends StatelessWidget {
       controller: scrollController,
       child: CustomScrollView(
         controller: scrollController,
-        slivers: sections.keys
+        slivers: [
-            .map((sectionKey) => SliverStickyHeader(
+          SliverAppBar(
-                  header: SectionHeader(sectionKey),
+            title: Text('Aves - All'),
-                  sliver: SliverGrid(
+            floating: true,
-                    delegate: SliverChildBuilderDelegate(
+          ),
-                      (context, index) {
+          ...sections.keys.map((sectionKey) => SliverStickyHeader(
-                        var entries = sections[sectionKey];
+                header: SectionHeader(sectionKey),
-                        if (index >= entries.length) return null;
+                sliver: SliverGrid(
-                        return Thumbnail(
+                  delegate: SliverChildBuilderDelegate(
-                          entry: entries[index],
+                    (context, index) {
-                          extent: extent,
+                      var entries = sections[sectionKey];
-                        );
+                      if (index >= entries.length) return null;
-                      },
+                      return Thumbnail(
-                      childCount: sections[sectionKey].length,
+                        entry: entries[index],
-                    ),
+                        extent: extent,
-                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                      );
-                      crossAxisCount: columnCount,
+                    },
-                    ),
+                    childCount: sections[sectionKey].length,
                   ),
-                ))
+                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-            .toList(),
+                    crossAxisCount: columnCount,
+                  ),
+                ),
+              ))
+        ],
       ),
     );
   }