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 <ggurdin@gmail.com>
This commit is contained in:
Alexa "Tig" Harriss 2025-10-27 10:51:18 -04:00 committed by GitHub
parent b781aebf58
commit b3f47721df
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -25,6 +25,8 @@ class LanguageSelectionPageState extends State<LanguageSelectionPage> {
LanguageModel? _selectedLanguage;
LanguageModel? _baseLanguage;
final TextEditingController _searchController = TextEditingController();
@override
void initState() {
super.initState();
@ -34,6 +36,12 @@ class LanguageSelectionPageState extends State<LanguageSelectionPage> {
_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<LanguageSelectionPage> {
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(