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();
  }