update: smooth search bar

app/lib/widgets/main_layout.dart

@@ -91,10 +91,17 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
         double boxHeight = 1.4;
         return Column(
           children: [
-            const SizedBox(height: contPadding),
-            if (widget.showSearchBar) // NB temp always true
-              _SearchBar(),
-            const SizedBox(height: contPadding),
+            const SizedBox(height: 12),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 16.0),
+              child: AnimatedOpacity(
+                duration: const Duration(milliseconds: 300),
+                curve: Curves.easeInOut,
+                opacity: widget.showSearchBar ? 1.0 : 0.0,
+                child: const _SearchBar(width: 350), // NB temp hardcoded value
+              ),
+            ),
+            const SizedBox(height: 12),
             ClipRRect(
               borderRadius: BorderRadius.circular(20),
               child: Stack( // Stack of quick view, map layer, satellite layer, and buttons
@@ -273,10 +280,18 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
     );
   }
 }
+class _SearchBar extends StatefulWidget {
+  final double width;
+  const _SearchBar({
+    Key? key,
+    required this.width,
+  }) : super(key: key);
 
+  @override
+  _SearchBarState createState() => _SearchBarState();
+}
 
-class _SearchBar extends StatelessWidget {
-  final width = 350.0; // NB pass value to class
+class _SearchBarState extends State<_SearchBar> {
   final List<String> testSearchNames = [
     "Mjøsa",
     "Bogstadsvannet",
@@ -287,13 +302,11 @@ class _SearchBar extends StatelessWidget {
     "Gjende",
     "Gjersjøen"
   ];
-  // Searching function for lake names using Fuzzy library
+
   List<String> searchLakeNames(String query) {
     final options = FuzzyOptions(threshold: 0.3, findAllMatches: true);
     final matcher = Fuzzy(testSearchNames, options: options);
     final results = matcher.search(query);
-
-    // Extracting lake names from the results and casting them to strings
     return results.map((result) => result.item as String).toList();
   }
 
@@ -302,8 +315,8 @@ class _SearchBar extends StatelessWidget {
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 16.0),
       child: SizedBox(
-        height: 35, // Adjust the height here
-        width: width,
+        width: widget.width,
+        height: 32,
         child: TextField(
           decoration: InputDecoration(
             contentPadding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
@@ -315,8 +328,9 @@ class _SearchBar extends StatelessWidget {
             ),
           ),
           onChanged: (value) {
+            setState(() {}); // Trigger a rebuild when the text changes
             searchLakeNames(value);
-          },
+            },
         ),
       ),
     );