Country selector search option #1705 (#1817)

* worked on adding widget to header * refactored conditional rendering header * figured out initial algoritum for sorting list of countries * Finnaly got the searcher to work!!!!! * Update country_list_page.dart made it so that the selected is always there * Update client/lib/pages/onboarding/country_list_page.dart Co-authored-by: Bruno Bowden <[email protected]> * Update client/lib/pages/onboarding/country_list_page.dart Co-authored-by: Bruno Bowden <[email protected]> * Update client/lib/components/page_scaffold/page_header.dart Co-authored-by: Benjamin Swerdlow <[email protected]> * Update client/lib/components/page_scaffold/page_header.dart Co-authored-by: Benjamin Swerdlow <[email protected]> * Update client/lib/pages/onboarding/country_list_page.dart Co-authored-by: Benjamin Swerdlow <[email protected]> * Update client/lib/pages/onboarding/country_list_page.dart Co-authored-by: Benjamin Swerdlow <[email protected]> * Update client/lib/pages/onboarding/country_list_page.dart Co-authored-by: Benjamin Swerdlow <[email protected]> * Update client/lib/components/page_scaffold/page_header.dart Co-authored-by: Benjamin Swerdlow <[email protected]> * Update client/lib/pages/onboarding/country_list_page.dart Co-authored-by: Benjamin Swerdlow <[email protected]> * Update client/lib/pages/onboarding/country_list_page.dart Co-authored-by: Bruno Bowden <[email protected]> * fixed small bugs Co-authored-by: Bruno Bowden <[email protected]> Co-authored-by: Benjamin Swerdlow <[email protected]>
WorldHealthOrganization · Dec 16, 2020 · 681c487 · 681c487
1 parent ef5b6ff
commit 681c487
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 13 deletions.
diff --git a/client/lib/components/page_scaffold/page_header.dart b/client/lib/components/page_scaffold/page_header.dart
@@ -5,8 +5,12 @@ import 'package:who_app/constants.dart';
 // Used to get latest AppBar features while remaining on Flutter's stable branch
 
 class PageHeader extends StatelessWidget {
+  ///Overrides headerWidget parameter
   final String title;
 
+  /// passing a widget into the header
+  final Widget headerWidget;
+
   /// A unique tag to animate a header between pages.
   final String heroTag;
   final Color borderColor;
@@ -24,7 +28,8 @@ class PageHeader extends StatelessWidget {
   final bool showBackButton;
 
   PageHeader({
-    @required this.title,
+    this.title,
+    this.headerWidget,
     this.heroTag,
     this.showBackButton = true,
     this.titleStyle,
@@ -38,14 +43,19 @@ class PageHeader extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final titleWrapper = Padding(
-      padding: showBackButton
-          ? EdgeInsets.zero
-          : EdgeInsets.symmetric(horizontal: 8),
-      child: Text(
-        title,
-        style: TextStyle(color: Constants.accentNavyColor),
-      ),
-    );
+        padding: showBackButton
+            ? EdgeInsets.zero
+            : EdgeInsets.symmetric(horizontal: 8),
+        child: Column(
+          children: [
+            title != null
+                ? Text(
+                    title,
+                    style: TextStyle(color: Constants.accentNavyColor),
+                  )
+                : headerWidget,
+          ],
+        ));
     final leading = showBackButton ? BackButton() : null;
     final iconThemeData = IconThemeData(color: Constants.accentNavyColor);
     final actions = <Widget>[if (trailing != null) trailing];

diff --git a/client/lib/components/page_scaffold/page_scaffold.dart b/client/lib/components/page_scaffold/page_scaffold.dart
@@ -9,6 +9,7 @@ import 'package:flutter/material.dart';
 
 class PageScaffold extends StatelessWidget {
   final String title;
+  final Widget headerWidget;
   final String heroTag;
   final List<Widget> body;
   final List<Widget> beforeHeader;
@@ -28,6 +29,7 @@ class PageScaffold extends StatelessWidget {
   PageScaffold({
     @required this.body,
     this.title,
+    this.headerWidget,
     this.heroTag,
     this.header,
     this.showHeader = true,
@@ -59,6 +61,7 @@ class PageScaffold extends StatelessWidget {
                   (header ??
                       PageHeader(
                         title: title,
+                        headerWidget: headerWidget,
                         heroTag: heroTag ?? title,
                         borderColor: headingBorderColor,
                         showBackButton: showBackButton,

diff --git a/client/lib/pages/onboarding/country_list_page.dart b/client/lib/pages/onboarding/country_list_page.dart
@@ -27,19 +27,35 @@ class CountryListPage extends StatefulWidget {
 
 class _CountryListPageState extends State<CountryListPage> {
   String selectedCountryCode;
+  List<IsoCountry> selectedCountries;
 
   @override
   void initState() {
     super.initState();
-
     selectedCountryCode = widget.selectedCountryCode;
+    selectedCountries = (widget.countries?.values?.toList() ?? []);
   }
 
   @override
   Widget build(BuildContext context) {
     return PageScaffold(
       // TODO: localize?
-      title: 'Country',
+      // title: 'Country',
+      headerWidget: TextField(
+          decoration: InputDecoration(
+              border: InputBorder.none, hintText: 'Enter your country'),
+          onChanged: (String value) async {
+            List filtered = (widget.countries?.values ?? []).where((element) {
+              var nameMatch = element.name
+                  .toString()
+                  .toUpperCase()
+                  .contains(value.toUpperCase());
+              return nameMatch || selectedCountryCode == element.alpha2Code;
+            }).toList();
+            setState(() {
+              selectedCountries = filtered;
+            });
+          }),
       color: Constants.backgroundColor,
       body: _buildCountries(),
     );
@@ -49,8 +65,8 @@ class _CountryListPageState extends State<CountryListPage> {
     if (widget.countries == null || widget.countries.isEmpty) {
       return [LoadingIndicator()];
     }
-    return (widget.countries?.values ?? [])
-        .map((country) => _buildCountryItem(country))
+    return selectedCountries
+        .map<Widget>((country) => _buildCountryItem(country))
         .toList();
   }