feat(search): add highlight on champions search text

n

.vscode/launch.json

@@ -35,7 +35,7 @@
  "type": "dart",
  },
  {
- "name": "android",
+ "name": "android release",
  "request": "launch",
  "type": "dart",
  "args": [

lib/data_classes/champions/champions_filter.dart

@@ -88,8 +88,10 @@ abstract class ChampionsFilter {
  return combinedChampions
  .map(
  (combinedChampion) => combinedChampion.copyWith(
- hide:
- !combinedChampion.champion.name.toLowerCase().contains(search),
+ hide: !(combinedChampion.champion.name
+ .toLowerCase()
+ .contains(search) ||
+ combinedChampion.champion.title.toLowerCase().contains(search)),
  ),
  )
  .toList();

lib/providers/champions.dart

@@ -8,10 +8,13 @@ import 'package:paladinsedge/utilities/index.dart' as utilities;
 
 class _ChampionsNotifier extends ChangeNotifier {
  /// loading state for combinedChampions
- var isLoadingCombinedChampions = false;
+ bool isLoadingCombinedChampions = false;
 
  /// loading state for playerChampions
- var isLoadingPlayerChampions = false;
+ bool isLoadingPlayerChampions = false;
+
+ /// holds the search value for champions
+ String search = '';
 
  /// holds data for all champions
  List<models.Champion> champions = [];
@@ -26,7 +29,8 @@ class _ChampionsNotifier extends ChangeNotifier {
  List<models.PlayerChampion>? playerChampions;
 
  /// holds the value of currently active filter
- var selectedFilter = data_classes.SelectedChampionsFilter();
+ data_classes.SelectedChampionsFilter selectedFilter =
+ data_classes.SelectedChampionsFilter();
 
  /// holds the currently active filter
  String selectedSort = data_classes.ChampionsSort.defaultSort;
@@ -123,9 +127,11 @@ class _ChampionsNotifier extends ChangeNotifier {
  }
 
  /// Filters the champions based on the search provided
- void filterChampionsBySearch(String search) {
+ void filterChampionsBySearch(String _search) {
  if (combinedChampions == null) return;
 
+ search = _search;
+
  // remove filters if search is done
  // but keep the previous filterName intact
  selectedFilter = data_classes.SelectedChampionsFilter(
@@ -183,6 +189,7 @@ class _ChampionsNotifier extends ChangeNotifier {
  void clearAppliedFiltersAndSort() {
  if (combinedChampions == null) return;
 
+ search = '';
  combinedChampions = data_classes.ChampionsFilter.clearFilters(
  combinedChampions!,
  );
@@ -201,6 +208,7 @@ class _ChampionsNotifier extends ChangeNotifier {
  void clearData() {
  isLoadingCombinedChampions = false;
  isLoadingPlayerChampions = false;
+ search = '';
  champions = [];
  userPlayerChampions = null;
  combinedChampions = null;

lib/screens/champions/champion_item.dart

@@ -8,6 +8,7 @@ import 'package:paladinsedge/screens/index.dart' as screens;
 import 'package:paladinsedge/theme/index.dart' as theme;
 import 'package:paladinsedge/utilities/index.dart' as utilities;
 import 'package:paladinsedge/widgets/index.dart' as widgets;
+import 'package:substring_highlight/substring_highlight.dart';
 
 class ChampionItem extends HookConsumerWidget {
  final models.Champion champion;
@@ -25,10 +26,16 @@ class ChampionItem extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
  // Providers
- final selectedSort =
- ref.watch(providers.champions.select((_) => _.selectedSort));
+ final search = ref.watch(providers.champions.select((_) => _.search));
+ final selectedSort = ref.watch(
+ providers.champions.select((_) => _.selectedSort),
+ );
 
  // Variables
+ final isLightTheme = Theme.of(context).brightness == Brightness.light;
+ final highlightColor = isLightTheme
+ ? theme.themeMaterialColor.shade50
+ : theme.darkThemeMaterialColor.shade50;
  final textTheme = Theme.of(context).textTheme;
  MaterialColor levelColor;
  levelColor = playerChampion?.level != null && playerChampion!.level > 49
@@ -59,7 +66,7 @@ class ChampionItem extends HookConsumerWidget {
  params: {'championId': champion.championId.toString()},
  );
  },
- [champion],
+ [],
  );
 
  return SizedBox(
@@ -93,15 +100,34 @@ class ChampionItem extends HookConsumerWidget {
  child: Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
- Padding(
- padding: const EdgeInsets.only(bottom: 5),
- child: Text(
- champion.name.toUpperCase(),
- style: textTheme.headline1?.copyWith(
- fontSize: 16,
- ),
+ SubstringHighlight(
+ text: champion.name.toUpperCase(),
+ term: search,
+ textStyle: textTheme.headline1!.copyWith(
+ fontSize: 16,
+ ),
+ textStyleHighlight: textTheme.headline1!.copyWith(
+ fontSize: 16,
+ backgroundColor: highlightColor,
  ),
  ),
+ const SizedBox(height: 2),
+ if (search != '' &&
+ champion.title
+ .toLowerCase()
+ .contains(search.toLowerCase()))
+ SubstringHighlight(
+ text: champion.title,
+ term: search,
+ textStyle: textTheme.bodyText1!.copyWith(
+ fontSize: 12,
+ ),
+ textStyleHighlight: textTheme.bodyText1!.copyWith(
+ fontSize: 12,
+ backgroundColor: highlightColor,
+ ),
+ ),
+ const SizedBox(height: 5),
  Wrap(
  children: [
  widgets.TextChip(

lib/screens/champions/champions_list.dart

@@ -10,10 +10,12 @@ class ChampionsList extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
  // Providers
- final combinedChampions =
- ref.watch(providers.champions.select((_) => _.combinedChampions));
- final isLoadingCombinedChampions = ref
- .watch(providers.champions.select((_) => _.isLoadingCombinedChampions));
+ final combinedChampions = ref.watch(
+ providers.champions.select((_) => _.combinedChampions),
+ );
+ final isLoadingCombinedChampions = ref.watch(
+ providers.champions.select((_) => _.isLoadingCombinedChampions),
+ );
 
  // Variables
  int crossAxisCount;

lib/screens/champions/champions_search_bar.dart

@@ -6,7 +6,9 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:paladinsedge/constants.dart' as constants;
 import 'package:paladinsedge/providers/index.dart' as providers;
 import 'package:paladinsedge/screens/champions/champions_filter_modal.dart';
+import 'package:paladinsedge/screens/index.dart' as screens;
 import 'package:paladinsedge/theme/index.dart' as theme;
+import 'package:paladinsedge/utilities/index.dart' as utilities;
 
 class ChampionsSearchBar extends HookConsumerWidget {
  const ChampionsSearchBar({Key? key}) : super(key: key);
@@ -17,6 +19,8 @@ class ChampionsSearchBar extends HookConsumerWidget {
  final championsProvider = ref.read(providers.champions);
  final selectedFilter =
  ref.watch(providers.champions.select((_) => _.selectedFilter));
+ final combinedChampions =
+ ref.watch(providers.champions.select((_) => _.combinedChampions));
 
  // Variables
  final brightness = Theme.of(context).brightness;
@@ -52,6 +56,24 @@ class ChampionsSearchBar extends HookConsumerWidget {
  [],
  );
 
+ final onSubmit = useCallback(
+ (String? _) {
+ if (combinedChampions == null) return;
+ final filteredCombinedChampions =
+ combinedChampions.where((_) => !_.hide);
+ if (filteredCombinedChampions.length == 1) {
+ final champion = filteredCombinedChampions.first.champion;
+ utilities.unFocusKeyboard(context);
+ utilities.Navigation.navigate(
+ context,
+ screens.ChampionDetail.routeName,
+ params: {'championId': champion.championId.toString()},
+ );
+ }
+ },
+ [combinedChampions],
+ );
+
  return SliverAppBar(
  snap: true,
  floating: true,
@@ -84,6 +106,7 @@ class ChampionsSearchBar extends HookConsumerWidget {
  enableInteractiveSelection: true,
  style: textStyle,
  onChanged: championsProvider.filterChampionsBySearch,
+ onSubmitted: onSubmit,
  decoration: InputDecoration(
  hintText: 'Search champion',
  counterText: "",

pubspec.lock

@@ -1162,6 +1162,13 @@ packages:
  url: "https://pub.dartlang.org"
  source: hosted
  version: "1.1.0"
+ substring_highlight:
+ dependency: "direct main"
+ description:
+ name: substring_highlight
+ url: "https://pub.dartlang.org"
+ source: hosted
+ version: "1.0.33"
  syncfusion_flutter_core:
  dependency: transitive
  description:

pubspec.yaml

@@ -72,6 +72,7 @@ dependencies:
  badges: ^2.0.2
  flutter_blurhash: ^0.6.8
  go_router: ^3.1.0
+ substring_highlight: ^1.0.33
 
 dev_dependencies:
  flutter_test: