From b3f47721dfbb25bdfa7463cf42611ef3c5c2bb26 Mon Sep 17 00:00:00 2001 From: "Alexa \"Tig\" Harriss" Date: Mon, 27 Oct 2025 10:51:18 -0400 Subject: [PATCH] 4271 search bar at the top of the language selection page (#4512) * Search bar same width and shape added to language page * Now Compatable with other language page changes * formatting * updates --------- Co-authored-by: ggurdin --- .../login/pages/language_selection_page.dart | 106 ++++++++++++------ 1 file changed, 70 insertions(+), 36 deletions(-) diff --git a/lib/pangea/login/pages/language_selection_page.dart b/lib/pangea/login/pages/language_selection_page.dart index 6a2dfd6cd..ed8aef2f6 100644 --- a/lib/pangea/login/pages/language_selection_page.dart +++ b/lib/pangea/login/pages/language_selection_page.dart @@ -25,6 +25,8 @@ class LanguageSelectionPageState extends State { LanguageModel? _selectedLanguage; LanguageModel? _baseLanguage; + final TextEditingController _searchController = TextEditingController(); + @override void initState() { super.initState(); @@ -34,6 +36,12 @@ class LanguageSelectionPageState extends State { _setFromCache(); } + @override + void dispose() { + _searchController.dispose(); + super.dispose(); + } + // The user may set their target language initally, then return to this page // to change it again. Try and get the cached values if present. void _setFromCache() { @@ -106,45 +114,71 @@ class LanguageSelectionPageState extends State { child: Column( spacing: 24.0, children: [ + TextField( + controller: _searchController, + decoration: InputDecoration( + prefixIcon: const Icon(Icons.search), + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(50), + ), + ), + ), Expanded( child: Stack( children: [ - SingleChildScrollView( - child: Padding( - padding: const EdgeInsets.only( - left: 16.0, - right: 16.0, - bottom: 60.0, - ), - child: Wrap( - spacing: 8.0, - runSpacing: 8.0, - alignment: WrapAlignment.center, - children: languages - .map( - (l) => FilterChip( - selected: _selectedLanguage == l, - backgroundColor: _selectedLanguage == l - ? theme.colorScheme.primary - : theme.colorScheme.surface, - padding: const EdgeInsets.symmetric( - horizontal: 8.0, - vertical: 4.0, - ), - label: Text( - l.getDisplayName(context) ?? - l.displayName, - style: theme.textTheme.bodyMedium, - ), - onSelected: (selected) { - _setSelectedLanguage( - selected ? l : null, - ); - }, - ), - ) - .toList(), - ), + Align( + alignment: Alignment.topCenter, + child: ValueListenableBuilder( + valueListenable: _searchController, + builder: (context, val, __) { + return SingleChildScrollView( + child: Padding( + padding: const EdgeInsets.only( + left: 16.0, + right: 16.0, + bottom: 60.0, + ), + child: Wrap( + spacing: 8.0, + runSpacing: 8.0, + alignment: WrapAlignment.center, + children: languages + .where( + (l) => l.displayName + .toLowerCase() + .contains( + _searchController.text + .toLowerCase(), + ), + ) + .map( + (l) => FilterChip( + selected: _selectedLanguage == l, + backgroundColor: + _selectedLanguage == l + ? theme.colorScheme.primary + : theme.colorScheme.surface, + padding: const EdgeInsets.symmetric( + horizontal: 8.0, + vertical: 4.0, + ), + label: Text( + l.getDisplayName(context) ?? + l.displayName, + style: theme.textTheme.bodyMedium, + ), + onSelected: (selected) { + _setSelectedLanguage( + selected ? l : null, + ); + }, + ), + ) + .toList(), + ), + ), + ); + }, ), ), Align(