258 lines
10 KiB
Dart
258 lines
10 KiB
Dart
import 'package:collection/collection.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_mobx/flutter_mobx.dart';
|
|
import 'package:frosty/apis/twitch_api.dart';
|
|
import 'package:frosty/screens/home/search/search_results_categories.dart';
|
|
import 'package:frosty/screens/home/search/search_results_channels.dart';
|
|
import 'package:frosty/screens/home/search/search_store.dart';
|
|
import 'package:frosty/screens/home/stream_list/streams_list.dart';
|
|
import 'package:frosty/screens/settings/stores/auth_store.dart';
|
|
import 'package:frosty/widgets/alert_message.dart';
|
|
import 'package:frosty/widgets/blurred_container.dart';
|
|
import 'package:frosty/widgets/frosty_scrollbar.dart';
|
|
import 'package:frosty/widgets/section_header.dart';
|
|
import 'package:provider/provider.dart';
|
|
|
|
/// The search section that contians search history and search results for channels and categories.
|
|
class Search extends StatefulWidget {
|
|
// The scroll controller for handling scroll to top functionality.
|
|
final ScrollController scrollController;
|
|
|
|
const Search({super.key, required this.scrollController});
|
|
|
|
@override
|
|
State<Search> createState() => _SearchState();
|
|
}
|
|
|
|
// Constants for consistent sizing
|
|
const double _kSearchBarHeight = 80.0;
|
|
|
|
class _SearchState extends State<Search> {
|
|
late final _searchStore = SearchStore(
|
|
authStore: context.read<AuthStore>(),
|
|
twitchApi: context.read<TwitchApi>(),
|
|
);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Stack(
|
|
children: [
|
|
// Content behind the search bar
|
|
Positioned.fill(
|
|
child: Observer(
|
|
builder: (context) {
|
|
if (_searchStore.searchText.isEmpty) {
|
|
if (_searchStore.searchHistory.isEmpty) {
|
|
return CustomScrollView(
|
|
controller: widget.scrollController,
|
|
slivers: [
|
|
SliverToBoxAdapter(
|
|
child: SizedBox(
|
|
height:
|
|
MediaQuery.of(context).padding.top +
|
|
_kSearchBarHeight,
|
|
),
|
|
),
|
|
SliverFillRemaining(
|
|
hasScrollBody: false,
|
|
child: Padding(
|
|
padding: EdgeInsets.only(
|
|
bottom: MediaQuery.of(context).padding.bottom,
|
|
),
|
|
child: const AlertMessage(
|
|
message: 'No recent searches',
|
|
vertical: true,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
return FrostyScrollbar(
|
|
controller: widget.scrollController,
|
|
padding: EdgeInsets.only(
|
|
top: MediaQuery.of(context).padding.top + _kSearchBarHeight,
|
|
bottom: MediaQuery.of(context).padding.bottom,
|
|
),
|
|
child: ListView(
|
|
controller: widget.scrollController,
|
|
padding: EdgeInsets.only(
|
|
top:
|
|
MediaQuery.of(context).padding.top +
|
|
_kSearchBarHeight,
|
|
bottom: MediaQuery.of(context).padding.bottom,
|
|
),
|
|
children: [
|
|
Padding(
|
|
padding: EdgeInsets.only(
|
|
left: 16 + MediaQuery.of(context).padding.left,
|
|
right: 4 + MediaQuery.of(context).padding.right,
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
const SectionHeader(
|
|
'History',
|
|
padding: EdgeInsets.zero,
|
|
isFirst: true,
|
|
),
|
|
TextButton(
|
|
onPressed: _searchStore.searchHistory.clear,
|
|
child: const Text('Clear'),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
..._searchStore.searchHistory.mapIndexed(
|
|
(index, searchTerm) => ListTile(
|
|
leading: const Icon(Icons.history_rounded),
|
|
title: Text(searchTerm),
|
|
onTap: () {
|
|
_searchStore.textEditingController.text =
|
|
searchTerm;
|
|
_searchStore.handleQuery(searchTerm);
|
|
_searchStore.textEditingController.selection =
|
|
TextSelection.fromPosition(
|
|
TextPosition(
|
|
offset: _searchStore
|
|
.textEditingController
|
|
.text
|
|
.length,
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
return FrostyScrollbar(
|
|
controller: widget.scrollController,
|
|
padding: EdgeInsets.only(
|
|
top: MediaQuery.of(context).padding.top + _kSearchBarHeight,
|
|
bottom: MediaQuery.of(context).padding.bottom,
|
|
),
|
|
child: CustomScrollView(
|
|
controller: widget.scrollController,
|
|
slivers: [
|
|
// Add padding for app bar and search bar
|
|
_SearchTopPadding(),
|
|
SliverToBoxAdapter(
|
|
child: Builder(
|
|
builder: (context) => SectionHeader(
|
|
'Channels',
|
|
isFirst: true,
|
|
padding: EdgeInsets.fromLTRB(
|
|
16 + MediaQuery.of(context).padding.left,
|
|
16,
|
|
16 + MediaQuery.of(context).padding.right,
|
|
8,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
SearchResultsChannels(
|
|
searchStore: _searchStore,
|
|
query: _searchStore.searchText,
|
|
),
|
|
SliverToBoxAdapter(
|
|
child: Builder(
|
|
builder: (context) => SectionHeader(
|
|
'Categories',
|
|
padding: EdgeInsets.fromLTRB(
|
|
16 + MediaQuery.of(context).padding.left,
|
|
8,
|
|
16 + MediaQuery.of(context).padding.right,
|
|
8,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
SearchResultsCategories(searchStore: _searchStore),
|
|
// Add padding for bottom navigation bar
|
|
const SliverBottomPadding(),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
// Blurred search bar on top
|
|
Positioned(
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
child: BlurredContainer(
|
|
gradientDirection: GradientDirection.up,
|
|
padding: EdgeInsets.only(
|
|
top: MediaQuery.of(context).padding.top,
|
|
left: MediaQuery.of(context).padding.left,
|
|
right: MediaQuery.of(context).padding.right,
|
|
),
|
|
child: Observer(
|
|
builder: (context) {
|
|
return Column(
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.all(16),
|
|
child: TextField(
|
|
controller: _searchStore.textEditingController,
|
|
focusNode: _searchStore.textFieldFocusNode,
|
|
autocorrect: false,
|
|
onChanged: _searchStore.onSearchTextChanged,
|
|
decoration: InputDecoration(
|
|
prefixIcon: const Icon(Icons.search_rounded),
|
|
hintText: 'Search channels or categories',
|
|
suffixIcon:
|
|
_searchStore.textFieldFocusNode.hasFocus ||
|
|
_searchStore.searchText.isNotEmpty
|
|
? IconButton(
|
|
icon: const Icon(Icons.close_rounded),
|
|
tooltip: _searchStore.searchText.isEmpty
|
|
? 'Cancel'
|
|
: 'Clear',
|
|
onPressed: () {
|
|
if (_searchStore.searchText.isEmpty) {
|
|
_searchStore.textFieldFocusNode.unfocus();
|
|
}
|
|
_searchStore.textEditingController.clear();
|
|
_searchStore.onSearchTextChanged('');
|
|
},
|
|
)
|
|
: null,
|
|
),
|
|
onSubmitted: _searchStore.handleQuery,
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_searchStore.dispose();
|
|
super.dispose();
|
|
}
|
|
}
|
|
|
|
/// Helper widget for consistent top padding in search slivers
|
|
class _SearchTopPadding extends StatelessWidget {
|
|
const _SearchTopPadding();
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SliverToBoxAdapter(
|
|
child: SizedBox(
|
|
height: MediaQuery.of(context).padding.top + _kSearchBarHeight,
|
|
),
|
|
);
|
|
}
|
|
}
|