Skip to content

Commit

Permalink
Unfocus search field when scrolling selector
Browse files Browse the repository at this point in the history
  • Loading branch information
@amantoux
amantoux committed Dec 25, 2022
1 parent 1fe9260 commit 5f49d7f
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 121 deletions.
2 changes: 1 addition & 1 deletion example/pubspec.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ packages:
path: ".."
relative: true
source: path
version: "1.1.1"
version: "1.2.1"
http:
dependency: transitive
description:
Expand Down
3 changes: 2 additions & 1 deletion lib/src/widgets/modal.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ class GiphySelectorModal extends StatefulWidget {

class GiphySelectorModalState extends GiphySelectorContainer<GiphySelectorModal>
with SingleTickerProviderStateMixin {
final _searchController = SearchController("");
final _searchController = SearchController('');

late TabController _tabController;
final _scrollController = ScrollController();
Expand Down Expand Up @@ -79,6 +79,7 @@ class GiphySelectorModalState extends GiphySelectorContainer<GiphySelectorModal>
SearchAppBar(
scrollController: _scrollController,
searchController: _searchController,
focusNode: focus,
),
Expanded(
child: GiphyTabView(
Expand Down
231 changes: 112 additions & 119 deletions lib/src/widgets/selector.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,18 @@ abstract class GiphySelectorContainer<T extends StatefulWidget>
extends State<T> {
static GiphySelectorContainer of(BuildContext context) =>
context.findAncestorStateOfType<GiphySelectorContainer>()!;
final focus = FocusNode();

set tabType(String? value);

String? get tabType;

@mustCallSuper
@override
void dispose() {
super.dispose();
focus.dispose();
}
}

class GiphyTabBar extends StatefulWidget {
Expand Down Expand Up @@ -51,15 +59,10 @@ class _GiphyTabBarState extends State<GiphyTabBar> {
@override
Widget build(BuildContext context) {
return TabBar(
unselectedLabelColor: Theme
.of(context)
.brightness == Brightness.light
unselectedLabelColor: Theme.of(context).brightness == Brightness.light
? Colors.black54
: Colors.white54,
labelColor: widget.color ?? Theme
.of(context)
.colorScheme
.secondary,
labelColor: widget.color ?? Theme.of(context).colorScheme.secondary,
indicatorColor: Colors.transparent,
indicatorSize: TabBarIndicatorSize.label,
controller: widget.tabController,
Expand Down Expand Up @@ -92,24 +95,23 @@ class GiphyTabTop extends StatelessWidget {
margin: const EdgeInsets.symmetric(vertical: 8.0),
width: 50,
height: 2,
color: Theme
.of(context)
.textTheme
.bodyText1!
.color!,
color: Theme.of(context).textTheme.bodyText1!.color!,
);
}
}

class SearchAppBar extends StatefulWidget {
const SearchAppBar({Key? key,
required this.scrollController,
required this.searchController,
this.focusListener})
const SearchAppBar(
{Key? key,
required this.scrollController,
required this.searchController,
required this.focusNode,
this.focusListener})
: super(key: key);

final ScrollController scrollController;
final SearchController searchController;
final FocusNode focusNode;
final Function(FocusNode)? focusListener;

@override
Expand All @@ -119,12 +121,12 @@ class SearchAppBar extends StatefulWidget {
class _SearchAppBarState extends State<SearchAppBar> {
late TextEditingController _textEditingController;

final FocusNode _focus = FocusNode();
FocusNode get focus => widget.focusNode;

@override
void initState() {
if (widget.focusListener != null) {
_focus.addListener(() => widget.focusListener!(_focus));
focus.addListener(() => widget.focusListener!(focus));
}
_textEditingController =
TextEditingController(text: widget.searchController.value);
Expand All @@ -139,7 +141,6 @@ class _SearchAppBarState extends State<SearchAppBar> {
@override
void dispose() {
_textEditingController.dispose();
_focus.dispose();
super.dispose();
}

Expand All @@ -152,64 +153,63 @@ class _SearchAppBarState extends State<SearchAppBar> {
child: Column(
children: [
container.tabType == GiphyType.emoji
// ? Container(height: 40.0, child: _giphyLogo())
// ? Container(height: 40.0, child: _giphyLogo())
? Container()
: SizedBox(
height: 40,
child: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: TextField(
textAlignVertical: TextAlignVertical.center,
autofocus: false,
focusNode: _focus,
controller: _textEditingController,
decoration: InputDecoration(
filled: true,
prefixIcon: kIsWeb
? const Icon(Icons.search)
: ShaderMask(
shaderCallback: (bounds) =>
const LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Color(0xFFFF6666),
Color(0xFF9933FF),
]).createShader(bounds),
child: Transform(
alignment: Alignment.center,
transform: Matrix4.rotationY(pi),
child: const Icon(
Icons.search,
color: Colors.white,
)),
),
hintText: l.searchInputLabel,
suffixIcon: IconButton(
icon: Icon(
Icons.clear,
color: Theme
.of(context)
.textTheme
.bodyText1!
.color!,
height: 40,
child: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: TextField(
textAlignVertical: TextAlignVertical.center,
autofocus: false,
focusNode: focus,
controller: _textEditingController,
decoration: InputDecoration(
filled: true,
prefixIcon: kIsWeb
? const Icon(Icons.search)
: ShaderMask(
shaderCallback: (bounds) =>
const LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Color(0xFFFF6666),
Color(0xFF9933FF),
]).createShader(bounds),
child: Transform(
alignment: Alignment.center,
transform: Matrix4.rotationY(pi),
child: const Icon(
Icons.search,
color: Colors.white,
)),
),
hintText: l.searchInputLabel,
suffixIcon: IconButton(
icon: Icon(
Icons.clear,
color: Theme.of(context)
.textTheme
.bodyText1!
.color!,
),
onPressed: () {
setState(() {
_textEditingController.clear();
});
}),
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
),
onPressed: () {
setState(() {
_textEditingController.clear();
});
}),
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
autocorrect: false,
),
),
),
autocorrect: false,
),
),
),
),
],
),
);
Expand All @@ -229,9 +229,7 @@ class GiphyTabBottom extends StatelessWidget {

Widget _giphyLogo(BuildContext context) {
const basePath = "assets/img/";
String logoPath = Theme
.of(context)
.brightness == Brightness.light
String logoPath = Theme.of(context).brightness == Brightness.light
? "poweredby_dark.png"
: "poweredby_light.png";

Expand All @@ -250,10 +248,11 @@ class GiphyTabBottom extends StatelessWidget {
}

class GiphyTabView extends StatelessWidget {
const GiphyTabView({Key? key,
required this.scrollController,
required this.tabController,
required this.searchController})
const GiphyTabView(
{Key? key,
required this.scrollController,
required this.tabController,
required this.searchController})
: super(key: key);

final ScrollController scrollController;
Expand Down Expand Up @@ -287,10 +286,11 @@ class GiphyTabView extends StatelessWidget {
}

class GiphyTabDetail extends StatefulWidget {
const GiphyTabDetail({Key? key,
required this.type,
required this.scrollController,
required this.searchController})
const GiphyTabDetail(
{Key? key,
required this.type,
required this.scrollController,
required this.searchController})
: super(key: key);

final String type;
Expand Down Expand Up @@ -338,16 +338,10 @@ class _GiphyTabDetailState extends State<GiphyTabDetail> {
super.didChangeDependencies();
widget.scrollController.addListener(_scrollListener);
widget.searchController.addListener(_listenerQuery);
_crossAxisCount = min((MediaQuery
.of(context)
.size
.width / _gifWidth).round(), 3);
int mainAxisCount = min(((MediaQuery
.of(context)
.size
.height - 30) / _gifWidth).round()
,
10);
_crossAxisCount =
min((MediaQuery.of(context).size.width / _gifWidth).round(), 3);
int mainAxisCount = min(
((MediaQuery.of(context).size.height - 30) / _gifWidth).round(), 10);
_limit = _crossAxisCount * mainAxisCount;
offset = 0;
_loadMore();
Expand Down Expand Up @@ -388,32 +382,28 @@ class _GiphyTabDetailState extends State<GiphyTabDetail> {
child: gif.images == null || gif.images?.fixedWidth.webp == null
? Container()
: Image.network(
gif.images!.fixedWidth.webp!,
gaplessPlayback: true,
fit: BoxFit.fill,
headers: const {'accept': 'image/*'},
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) {
return child;
}
return AspectRatio(
aspectRatio: aspectRatio,
child: Container(color: Theme
.of(context)
.cardColor),
);
},
errorBuilder: (context, exception, stackTrace) {
return AspectRatio(
aspectRatio: aspectRatio,
child: Container(
color: Theme
.of(context)
.cardColor,
gif.images!.fixedWidth.webp!,
gaplessPlayback: true,
fit: BoxFit.fill,
headers: const {'accept': 'image/*'},
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) {
return child;
}
return AspectRatio(
aspectRatio: aspectRatio,
child: Container(color: Theme.of(context).cardColor),
);
},
errorBuilder: (context, exception, stackTrace) {
return AspectRatio(
aspectRatio: aspectRatio,
child: Container(
color: Theme.of(context).cardColor,
),
);
},
),
);
},
),
),
);
},
Expand All @@ -430,7 +420,7 @@ class _GiphyTabDetailState extends State<GiphyTabDetail> {
_isLoading = true;
final config = GiphySelectorConfig.of(context);
final client =
GiphyClient(apiKey: config.apiKey, randomId: config.randomID);
GiphyClient(apiKey: config.apiKey, randomId: config.randomID);

// Offset pagination for query
if (_collection == null) {
Expand Down Expand Up @@ -476,6 +466,9 @@ class _GiphyTabDetailState extends State<GiphyTabDetail> {
!_isLoading) {
_loadMore();
}
if (mounted) {
GiphySelectorContainer.of(context).focus.unfocus();
}
}

void _selectedGif(GiphyGif gif) {
Expand Down
1 change: 1 addition & 0 deletions lib/src/widgets/sheet.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ class GiphySelectorSheetState extends GiphySelectorContainer<GiphySelectorSheet>
SearchAppBar(
scrollController: _scrollController,
searchController: _searchController,
focusNode: focus,
focusListener: _focusListener,
),
Expanded(
Expand Down

0 comments on commit 5f49d7f

Please sign in to comment.