diff --git a/client/lib/components/page_scaffold/page_header.dart b/client/lib/components/page_scaffold/page_header.dart index e9b2d8d981..ea26097675 100644 --- 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 = [if (trailing != null) trailing]; diff --git a/client/lib/components/page_scaffold/page_scaffold.dart b/client/lib/components/page_scaffold/page_scaffold.dart index 10b20b6bda..c839959f91 100644 --- 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 body; final List 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 index 77329cf9fc..d9e80cb2ce 100644 --- 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 { String selectedCountryCode; + List 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 { if (widget.countries == null || widget.countries.isEmpty) { return [LoadingIndicator()]; } - return (widget.countries?.values ?? []) - .map((country) => _buildCountryItem(country)) + return selectedCountries + .map((country) => _buildCountryItem(country)) .toList(); }