Fixed issue #278 by making list scrollable under search bar (#572)

veggieseasons/lib/screens/search.dart

@@ -61,12 +61,23 @@ class _SearchScreenState extends State<SearchScreen> {
     }
 
     return ListView.builder(
-      itemCount: veggies.length,
+      itemCount: veggies.length + 1,
       itemBuilder: (context, i) {
-        return Padding(
-          padding: EdgeInsets.only(left: 16, right: 16, bottom: 24),
-          child: VeggieHeadline(veggies[i]),
-        );
+        if (i == 0) {
+          return Visibility(
+            //an invisible search box at the starting of the list so that overlay search box doesn't cover content
+            child: _createSearchBox(),
+            visible: false,
+            maintainSize: true,
+            maintainAnimation: true,
+            maintainState: true,
+          );
+        } else {
+          return Padding(
+            padding: EdgeInsets.only(left: 16, right: 16, bottom: 24),
+            child: VeggieHeadline(veggies[i - 1]),
+          );
+        }
       },
     );
   }
@@ -79,12 +90,10 @@ class _SearchScreenState extends State<SearchScreen> {
       builder: (context) {
         return SafeArea(
           bottom: false,
-          child: Column(
+          child: Stack(
             children: [
+              _buildSearchResults(model.searchVeggies(terms)),
               _createSearchBox(),
-              Expanded(
-                child: _buildSearchResults(model.searchVeggies(terms)),
-              ),
             ],
           ),
         );

veggieseasons/lib/widgets/search_bar.dart

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:ui';
+
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/widgets.dart';
 import 'package:veggieseasons/styles.dart';
@@ -19,45 +21,51 @@ class SearchBar extends StatelessWidget {
   Widget build(BuildContext context) {
     final themeData = CupertinoTheme.of(context);
 
-    return DecoratedBox(
-      decoration: BoxDecoration(
-        color: Styles.searchBackground(themeData),
-        borderRadius: BorderRadius.circular(10),
-      ),
-      child: Padding(
-        padding: const EdgeInsets.symmetric(
-          horizontal: 4,
-          vertical: 8,
-        ),
-        child: Row(
-          children: [
-            ExcludeSemantics(
-              child: Icon(
-                CupertinoIcons.search,
-                color: Styles.searchIconColor,
-              ),
-            ),
-            Expanded(
-              child: CupertinoTextField(
-                controller: controller,
-                focusNode: focusNode,
-                decoration: null,
-                style: Styles.searchText(themeData),
-                cursorColor: Styles.searchCursorColor,
-              ),
+    return ClipRRect(
+      borderRadius: BorderRadius.circular(10),
+      child: BackdropFilter(
+        child: DecoratedBox(
+          decoration: BoxDecoration(
+            color: Styles.searchBackground(themeData),
+            borderRadius: BorderRadius.circular(10),
+          ),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(
+              horizontal: 4,
+              vertical: 8,
             ),
-            GestureDetector(
-              onTap: () {
-                controller.clear();
-              },
-              child: Icon(
-                CupertinoIcons.clear_thick_circled,
-                semanticLabel: 'Clear search terms',
-                color: Styles.searchIconColor,
-              ),
+            child: Row(
+              children: [
+                ExcludeSemantics(
+                  child: Icon(
+                    CupertinoIcons.search,
+                    color: Styles.searchIconColor,
+                  ),
+                ),
+                Expanded(
+                  child: CupertinoTextField(
+                    controller: controller,
+                    focusNode: focusNode,
+                    decoration: null,
+                    style: Styles.searchText(themeData),
+                    cursorColor: Styles.searchCursorColor,
+                  ),
+                ),
+                GestureDetector(
+                  onTap: () {
+                    controller.clear();
+                  },
+                  child: Icon(
+                    CupertinoIcons.clear_thick_circled,
+                    semanticLabel: 'Clear search terms',
+                    color: Styles.searchIconColor,
+                  ),
+                ),
+              ],
             ),
-          ],
+          ),
         ),
+        filter: ImageFilter.blur(sigmaY: 5, sigmaX: 5),
       ),
     );
   }