UI changes to search bar and it's background
This commit is contained in:
ashilkn
parent
5345850b1a
commit
1056ea79c9
|
|
@ -273,6 +273,7 @@ class _HomeWidgetState extends State<HomeWidget> {
|
|||
_accountConfiguredEvent.cancel();
|
||||
_intentDataStreamSubscription?.cancel();
|
||||
_collectionUpdatedEvent.cancel();
|
||||
isOnSearchTabNotifier.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
|
|
@ -427,53 +428,34 @@ class _HomeWidgetState extends State<HomeWidget> {
|
|||
child: ValueListenableBuilder(
|
||||
valueListenable: isOnSearchTabNotifier,
|
||||
builder: (context, value, child) {
|
||||
return AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
curve: Curves.easeInCubic,
|
||||
// color: getEnteColorScheme(context).backgroundElevated2,
|
||||
decoration: BoxDecoration(
|
||||
gradient: value
|
||||
? null
|
||||
// ? LinearGradient(
|
||||
// begin: Alignment.topCenter,
|
||||
// end: Alignment.bottomCenter,
|
||||
// colors: [
|
||||
// colorScheme.backgroundBase,
|
||||
// colorScheme.backgroundElevated2,
|
||||
// // Colors.black,
|
||||
// ],
|
||||
// )
|
||||
: null,
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
value
|
||||
? const SearchWidgetNew()
|
||||
.animate()
|
||||
.fadeIn(
|
||||
duration: const Duration(milliseconds: 175),
|
||||
curve: Curves.easeInOutSine,
|
||||
)
|
||||
.scale(
|
||||
begin: const Offset(0.6, 0.6),
|
||||
end: const Offset(1, 1),
|
||||
duration: const Duration(
|
||||
milliseconds: 175,
|
||||
),
|
||||
curve: Curves.easeInOutSine,
|
||||
)
|
||||
.slide(
|
||||
begin: const Offset(0, 0.8),
|
||||
curve: Curves.easeInOutSine,
|
||||
duration: const Duration(
|
||||
milliseconds: 175,
|
||||
),
|
||||
)
|
||||
: const SizedBox.shrink(),
|
||||
child!,
|
||||
],
|
||||
),
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
value
|
||||
? const SearchWidgetNew()
|
||||
.animate()
|
||||
.fadeIn(
|
||||
duration: const Duration(milliseconds: 175),
|
||||
curve: Curves.easeInOutSine,
|
||||
)
|
||||
.scale(
|
||||
begin: const Offset(0.6, 0.6),
|
||||
end: const Offset(1, 1),
|
||||
duration: const Duration(
|
||||
milliseconds: 175,
|
||||
),
|
||||
curve: Curves.easeInOutSine,
|
||||
)
|
||||
.slide(
|
||||
begin: const Offset(0, 0.8),
|
||||
curve: Curves.easeInOutSine,
|
||||
duration: const Duration(
|
||||
milliseconds: 175,
|
||||
),
|
||||
)
|
||||
: const SizedBox.shrink(),
|
||||
child!,
|
||||
],
|
||||
);
|
||||
},
|
||||
child: HomeBottomNavigationBar(
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:photos/ente_theme_data.dart';
|
||||
import "package:photos/theme/ente_theme.dart";
|
||||
|
||||
class SearchSuffixIcon extends StatefulWidget {
|
||||
final bool shouldShowSpinner;
|
||||
|
|
@ -13,6 +13,7 @@ class _SearchSuffixIconState extends State<SearchSuffixIcon>
|
|||
with TickerProviderStateMixin {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = getEnteColorScheme(context);
|
||||
return AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 175),
|
||||
child: widget.shouldShowSpinner
|
||||
|
|
@ -24,10 +25,7 @@ class _SearchSuffixIconState extends State<SearchSuffixIcon>
|
|||
child: Center(
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
color: Theme.of(context)
|
||||
.colorScheme
|
||||
.iconColor
|
||||
.withOpacity(0.5),
|
||||
color: colorScheme.strokeMuted,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
@ -39,7 +37,7 @@ class _SearchSuffixIconState extends State<SearchSuffixIcon>
|
|||
},
|
||||
icon: Icon(
|
||||
Icons.close,
|
||||
color: Theme.of(context).colorScheme.iconColor.withOpacity(0.5),
|
||||
color: colorScheme.strokeMuted,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,9 +3,7 @@ import "dart:async";
|
|||
import "package:flutter/material.dart";
|
||||
import "package:logging/logging.dart";
|
||||
import "package:photos/core/event_bus.dart";
|
||||
import "package:photos/ente_theme_data.dart";
|
||||
import "package:photos/events/tab_changed_event.dart";
|
||||
import "package:photos/generated/l10n.dart";
|
||||
import "package:photos/models/search/search_result.dart";
|
||||
import "package:photos/services/search_service.dart";
|
||||
import "package:photos/theme/ente_theme.dart";
|
||||
|
|
@ -49,79 +47,80 @@ class _SearchWidgetNewState extends State<SearchWidgetNew> {
|
|||
padding: const EdgeInsets.symmetric(vertical: 12),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 8),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Container(
|
||||
height: 44,
|
||||
color: colorScheme.fillFaint,
|
||||
child: TextFormField(
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
// Below parameters are to disable auto-suggestion
|
||||
enableSuggestions: false,
|
||||
autocorrect: false,
|
||||
// Above parameters are to disable auto-suggestion
|
||||
decoration: InputDecoration(
|
||||
hintText: S.of(context).searchHintText,
|
||||
filled: true,
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
vertical: 10,
|
||||
),
|
||||
border: const UnderlineInputBorder(
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
focusedBorder: const UnderlineInputBorder(
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
prefixIconConstraints: const BoxConstraints(
|
||||
maxHeight: 44,
|
||||
maxWidth: 44,
|
||||
minHeight: 44,
|
||||
minWidth: 44,
|
||||
),
|
||||
suffixIconConstraints: const BoxConstraints(
|
||||
maxHeight: 44,
|
||||
maxWidth: 44,
|
||||
minHeight: 44,
|
||||
minWidth: 44,
|
||||
),
|
||||
prefixIcon: Hero(
|
||||
tag: "search_icon",
|
||||
child: Icon(
|
||||
Icons.search,
|
||||
color: Theme.of(context)
|
||||
.colorScheme
|
||||
.iconColor
|
||||
.withOpacity(0.5),
|
||||
child: Container(
|
||||
color: colorScheme.backgroundBase,
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Container(
|
||||
height: 44,
|
||||
color: colorScheme.fillFaint,
|
||||
child: TextFormField(
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
// Below parameters are to disable auto-suggestion
|
||||
enableSuggestions: false,
|
||||
autocorrect: false,
|
||||
// Above parameters are to disable auto-suggestion
|
||||
decoration: InputDecoration(
|
||||
// hintText: S.of(context).searchHintText,
|
||||
hintText: "Search",
|
||||
filled: true,
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
vertical: 10,
|
||||
),
|
||||
border: const UnderlineInputBorder(
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
focusedBorder: const UnderlineInputBorder(
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
prefixIconConstraints: const BoxConstraints(
|
||||
maxHeight: 44,
|
||||
maxWidth: 44,
|
||||
minHeight: 44,
|
||||
minWidth: 44,
|
||||
),
|
||||
suffixIconConstraints: const BoxConstraints(
|
||||
maxHeight: 44,
|
||||
maxWidth: 44,
|
||||
minHeight: 44,
|
||||
minWidth: 44,
|
||||
),
|
||||
prefixIcon: Hero(
|
||||
tag: "search_icon",
|
||||
child: Icon(
|
||||
Icons.search,
|
||||
color: colorScheme.strokeFaint,
|
||||
),
|
||||
),
|
||||
/*Using valueListenableBuilder inside a stateful widget because this widget is only rebuild when
|
||||
setState is called when deboucncing is over and the spinner needs to be shown while debouncing */
|
||||
suffixIcon: ValueListenableBuilder(
|
||||
valueListenable: _debouncer.debounceActiveNotifier,
|
||||
builder: (
|
||||
BuildContext context,
|
||||
bool isDebouncing,
|
||||
Widget? child,
|
||||
) {
|
||||
return SearchSuffixIcon(
|
||||
isDebouncing,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
/*Using valueListenableBuilder inside a stateful widget because this widget is only rebuild when
|
||||
setState is called when deboucncing is over and the spinner needs to be shown while debouncing */
|
||||
suffixIcon: ValueListenableBuilder(
|
||||
valueListenable: _debouncer.debounceActiveNotifier,
|
||||
builder: (
|
||||
BuildContext context,
|
||||
bool isDebouncing,
|
||||
Widget? child,
|
||||
) {
|
||||
return SearchSuffixIcon(
|
||||
isDebouncing,
|
||||
);
|
||||
},
|
||||
),
|
||||
onChanged: (value) async {
|
||||
_query = value;
|
||||
final List<SearchResult> allResults =
|
||||
await getSearchResultsForQuery(context, value);
|
||||
/*checking if _query == value to make sure that the results are from the current query
|
||||
and not from the previous query (race condition).*/
|
||||
if (mounted && _query == value) {
|
||||
setState(() {
|
||||
_results.clear();
|
||||
_results.addAll(allResults);
|
||||
});
|
||||
}
|
||||
},
|
||||
),
|
||||
onChanged: (value) async {
|
||||
_query = value;
|
||||
final List<SearchResult> allResults =
|
||||
await getSearchResultsForQuery(context, value);
|
||||
/*checking if _query == value to make sure that the results are from the current query
|
||||
and not from the previous query (race condition).*/
|
||||
if (mounted && _query == value) {
|
||||
setState(() {
|
||||
_results.clear();
|
||||
_results.addAll(allResults);
|
||||
});
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
|||
Loading…
Reference in a new issue