Skip to content

Commit f6be5f9

Browse files
deepikahrdeepikahr
committed
searchBar overlay issue fixed
1 parent fcb8d00 commit f6be5f9

File tree

3 files changed

+95
-87
lines changed

3 files changed

+95
-87
lines changed

‎example/lib/main.dart‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -75,20 +75,20 @@ class _MyHomePageState extends State<MyHomePage>
7575
return Scaffold(
7676
drawer: GFDrawer(
7777
// colorFilter: new ColorFilter.mode(
78-
// Colors.pinkAccent.withOpacity(0.6), BlendMode.darken),
78+
// Colors.teal.withOpacity(0.6), BlendMode.darken),
7979
// backgroundImage: NetworkImage(
8080
// "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg"),
81-
// gradient: LinearGradient(
82-
// begin: Alignment.topRight,
83-
// end: Alignment.bottomLeft,
84-
// stops: [0.1, 0.5, 0.7, 0.9],
85-
// colors: [
86-
// Colors.teal[800],
87-
// Colors.teal[600],
88-
// Colors.teal[400],
89-
// Colors.teal[200],
90-
// ],
91-
// ),
81+
gradient: LinearGradient(
82+
begin: Alignment.topRight,
83+
end: Alignment.bottomLeft,
84+
stops: [0.1, 0.5, 0.7, 0.9],
85+
colors: [
86+
Colors.teal[800],
87+
Colors.teal[600],
88+
Colors.teal[400],
89+
Colors.teal[200],
90+
],
91+
),
9292
color: Colors.greenAccent,
9393
child: ListView(
9494
padding: EdgeInsets.zero,
@@ -100,7 +100,7 @@ class _MyHomePageState extends State<MyHomePage>
100100
"https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg"),
101101
),
102102
decoration: BoxDecoration(
103-
color: Colors.teal,
103+
color: Colors.transparent,
104104
),
105105
otherAccountsPictures: <Widget>[
106106
Image(
@@ -193,7 +193,7 @@ class _MyHomePageState extends State<MyHomePage>
193193
},
194194
overlaySearchListItemBuilder: (item) {
195195
return Container(
196-
padding: const EdgeInsets.all(12),
196+
padding: const EdgeInsets.all(8),
197197
child: Text(
198198
item,
199199
style: const TextStyle(fontSize: 18),

‎lib/components/drawer/gf_drawer.dart‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -57,17 +57,16 @@ class GFDrawer extends StatelessWidget {
5757
/// Typically used in the [Scaffold.drawer] property.
5858
///
5959
/// The [elevation] must be non-negative.
60-
const GFDrawer(
61-
{Key key,
62-
this.elevation = 16.0,
63-
this.child,
64-
this.semanticLabel,
65-
this.backgroundImage,
66-
this.colorFilter,
67-
this.gradient,
68-
this.color,
69-
})
70-
: assert(elevation != null && elevation >= 0.0),
60+
const GFDrawer({
61+
Key key,
62+
this.elevation = 16.0,
63+
this.child,
64+
this.semanticLabel,
65+
this.backgroundImage,
66+
this.colorFilter,
67+
this.gradient,
68+
this.color,
69+
}) : assert(elevation != null && elevation >= 0.0),
7170
super(key: key);
7271

7372
/// The z-coordinate at which to place this drawer relative to its parent.

‎lib/components/search_bar/gf_search_bar.dart‎

Lines changed: 71 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@ typedef QueryBuilder<T> = List<T> Function(
99
);
1010

1111
class GFSearchBar<T> extends StatefulWidget {
12-
const GFSearchBar({
13-
@required this.searchList,
14-
@required this.overlaySearchListItemBuilder,
15-
@required this.searchQueryBuilder,
16-
Key key,
17-
this.onItemSelected,
18-
this.hideSearchBoxWhenItemSelected = false,
19-
this.overlaySearchListHeight,
20-
this.noItemsFoundWidget,
21-
this.searchBoxInputDecoration
22-
}) : super(key: key);
12+
const GFSearchBar(
13+
{@required this.searchList,
14+
@required this.overlaySearchListItemBuilder,
15+
@required this.searchQueryBuilder,
16+
Key key,
17+
this.onItemSelected,
18+
this.hideSearchBoxWhenItemSelected = false,
19+
this.overlaySearchListHeight,
20+
this.noItemsFoundWidget,
21+
this.searchBoxInputDecoration})
22+
: super(key: key);
2323

2424
/// List of [text] or [widget] reference for users
2525
final List<T> searchList;
@@ -64,14 +64,15 @@ class MySingleChoiceSearchState<T> extends State<GFSearchBar<T>> {
6464
final LayerLink _layerLink = LayerLink();
6565
final double textBoxHeight = 48;
6666
final TextEditingController textController = TextEditingController();
67+
bool isSearchBoxSelected = false;
6768

6869
@override
6970
void initState() {
7071
super.initState();
7172
init();
7273
}
7374

74-
init() {
75+
init() {
7576
_searchList = <T>[];
7677
notifier = ValueNotifier(null);
7778
_focusNode = FocusNode();
@@ -138,7 +139,7 @@ class MySingleChoiceSearchState<T> extends State<GFSearchBar<T>> {
138139
overlaySearchListHeight = widget.overlaySearchListHeight ??
139140
MediaQuery.of(context).size.height / 4;
140141

141-
print('yyys $isFocused');
142+
print('yyys $isSearchBoxSelected');
142143

143144
searchBox = Container(
144145
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
@@ -147,29 +148,30 @@ class MySingleChoiceSearchState<T> extends State<GFSearchBar<T>> {
147148
controller: _controller,
148149
focusNode: _focusNode,
149150
style: TextStyle(fontSize: 16, color: Colors.grey[600]),
150-
decoration: widget.searchBoxInputDecoration == null ? InputDecoration(
151-
enabledBorder: const OutlineInputBorder(
152-
borderSide: BorderSide(
153-
color: Color(0x4437474F),
154-
),
155-
),
156-
focusedBorder: OutlineInputBorder(
157-
borderSide: BorderSide(
158-
color: Theme.of(context).primaryColor,
159-
),
160-
),
161-
suffixIcon: isFocused ? Icon(Icons.close) : Icon(Icons.search),
162-
border: InputBorder.none,
163-
hintText: "Search here...",
164-
contentPadding: const EdgeInsets.only(
165-
left: 16,
166-
right: 20,
167-
top: 14,
168-
bottom: 14,
169-
),
170-
) : widget.searchBoxInputDecoration,
171-
)
172-
);
151+
decoration: widget.searchBoxInputDecoration == null
152+
? InputDecoration(
153+
enabledBorder: const OutlineInputBorder(
154+
borderSide: BorderSide(
155+
color: Color(0x4437474F),
156+
),
157+
),
158+
focusedBorder: OutlineInputBorder(
159+
borderSide: BorderSide(
160+
color: Theme.of(context).primaryColor,
161+
),
162+
),
163+
suffixIcon: Icon(Icons.search),
164+
border: InputBorder.none,
165+
hintText: "Search here...",
166+
contentPadding: const EdgeInsets.only(
167+
left: 16,
168+
right: 20,
169+
top: 14,
170+
bottom: 14,
171+
),
172+
)
173+
: widget.searchBoxInputDecoration,
174+
));
173175

174176
final searchBoxBody = Column(
175177
mainAxisSize: MainAxisSize.min,
@@ -187,6 +189,10 @@ class MySingleChoiceSearchState<T> extends State<GFSearchBar<T>> {
187189
return searchBoxBody;
188190
}
189191

192+
void onCloseOverlaySearchList() {
193+
onSearchListItemSelected(null);
194+
}
195+
190196
void onSearchListItemSelected(T item) {
191197
if (overlaySearchList != null) {
192198
overlaySearchList.remove();
@@ -206,7 +212,7 @@ class MySingleChoiceSearchState<T> extends State<GFSearchBar<T>> {
206212

207213
void onTextFieldFocus() {
208214
setState(() {
209-
isFocused = true;
215+
isSearchBoxSelected = true;
210216
});
211217
final RenderBox searchBoxRenderBox = context.findRenderObject();
212218
final RenderBox overlay = Overlay.of(context).context.findRenderObject();
@@ -245,36 +251,39 @@ class MySingleChoiceSearchState<T> extends State<GFSearchBar<T>> {
245251
shape: const RoundedRectangleBorder(
246252
borderRadius: BorderRadius.all(Radius.circular(4)),
247253
),
248-
title: GFListTile(
249-
icon: GFIconButton(
250-
icon: Icon(Icons.close),
251-
onPressed: () {
252-
onSearchListItemSelected(null);
253-
}),
254-
),
255254
content: _searchList.isNotEmpty
256-
? Container(
257-
height: overlaySearchListHeight,
258-
child: Scrollbar(
259-
child: ListView.separated(
260-
padding: const EdgeInsets.symmetric(vertical: 4),
261-
separatorBuilder: (context, index) => const Divider(
262-
height: 1,
263-
),
264-
itemBuilder: (context, index) => Material(
265-
color: Colors.transparent,
266-
child: InkWell(
267-
onTap: () =>
268-
onSearchListItemSelected(_searchList[index]),
269-
child: widget.overlaySearchListItemBuilder(
270-
_searchList.elementAt(index),
255+
? Column(
256+
mainAxisAlignment: MainAxisAlignment.end,
257+
crossAxisAlignment: CrossAxisAlignment.end,
258+
children: <Widget>[
259+
InkWell(
260+
child: Icon(Icons.close, size: 22.0,),
261+
onTap: onCloseOverlaySearchList,
262+
),
263+
Container(
264+
height: overlaySearchListHeight,
265+
child: Scrollbar(
266+
child: ListView.separated(
267+
padding: const EdgeInsets.symmetric(vertical: 4),
268+
separatorBuilder: (context, index) => const Divider(
269+
height: 1,
270+
),
271+
itemBuilder: (context, index) => Material(
272+
color: Colors.transparent,
273+
child: InkWell(
274+
onTap: () =>
275+
onSearchListItemSelected(_searchList[index]),
276+
child: widget.overlaySearchListItemBuilder(
277+
_searchList.elementAt(index),
278+
),
279+
),
271280
),
281+
itemCount: _searchList.length,
272282
),
273283
),
274-
itemCount: _searchList.length,
275284
),
276-
),
277-
)
285+
],
286+
)
278287
: widget.noItemsFoundWidget != null
279288
? Center(
280289
child: widget.noItemsFoundWidget,

0 commit comments

Comments
 (0)