Skip to content
Snippets Groups Projects
Commit 8571677d authored by Sara Savanovic Djordjevic's avatar Sara Savanovic Djordjevic
Browse files

update: smooth search bar

parent 6715b408
No related branches found
No related tags found
1 merge request!10Clhp map
......@@ -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);
},
},
),
),
);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment