1
0
mirror of https://github.com/flutter/samples.git synced 2025-11-08 13:58:47 +00:00

Fixed issue #278 by making list scrollable under search bar (#572)

This commit is contained in:
kjain333
2020-10-31 02:06:10 +05:30
committed by GitHub
parent ed73e7a310
commit 134b64bcad
2 changed files with 64 additions and 47 deletions

View File

@@ -61,12 +61,23 @@ class _SearchScreenState extends State<SearchScreen> {
} }
return ListView.builder( return ListView.builder(
itemCount: veggies.length, itemCount: veggies.length + 1,
itemBuilder: (context, i) { itemBuilder: (context, i) {
return Padding( if (i == 0) {
padding: EdgeInsets.only(left: 16, right: 16, bottom: 24), return Visibility(
child: VeggieHeadline(veggies[i]), //an invisible search box at the starting of the list so that overlay search box doesn't cover content
); child: _createSearchBox(),
visible: false,
maintainSize: true,
maintainAnimation: true,
maintainState: true,
);
} else {
return Padding(
padding: EdgeInsets.only(left: 16, right: 16, bottom: 24),
child: VeggieHeadline(veggies[i - 1]),
);
}
}, },
); );
} }
@@ -79,12 +90,10 @@ class _SearchScreenState extends State<SearchScreen> {
builder: (context) { builder: (context) {
return SafeArea( return SafeArea(
bottom: false, bottom: false,
child: Column( child: Stack(
children: [ children: [
_buildSearchResults(model.searchVeggies(terms)),
_createSearchBox(), _createSearchBox(),
Expanded(
child: _buildSearchResults(model.searchVeggies(terms)),
),
], ],
), ),
); );

View File

@@ -2,6 +2,8 @@
// Use of this source code is governed by a BSD-style license that can be // Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file. // found in the LICENSE file.
import 'dart:ui';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart'; import 'package:flutter/widgets.dart';
import 'package:veggieseasons/styles.dart'; import 'package:veggieseasons/styles.dart';
@@ -19,45 +21,51 @@ class SearchBar extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final themeData = CupertinoTheme.of(context); final themeData = CupertinoTheme.of(context);
return DecoratedBox( return ClipRRect(
decoration: BoxDecoration( borderRadius: BorderRadius.circular(10),
color: Styles.searchBackground(themeData), child: BackdropFilter(
borderRadius: BorderRadius.circular(10), child: DecoratedBox(
), decoration: BoxDecoration(
child: Padding( color: Styles.searchBackground(themeData),
padding: const EdgeInsets.symmetric( borderRadius: BorderRadius.circular(10),
horizontal: 4, ),
vertical: 8, child: Padding(
), padding: const EdgeInsets.symmetric(
child: Row( horizontal: 4,
children: [ vertical: 8,
ExcludeSemantics( ),
child: Icon( child: Row(
CupertinoIcons.search, children: [
color: Styles.searchIconColor, ExcludeSemantics(
), child: Icon(
), CupertinoIcons.search,
Expanded( color: Styles.searchIconColor,
child: CupertinoTextField( ),
controller: controller, ),
focusNode: focusNode, Expanded(
decoration: null, child: CupertinoTextField(
style: Styles.searchText(themeData), controller: controller,
cursorColor: Styles.searchCursorColor, focusNode: focusNode,
), decoration: null,
), style: Styles.searchText(themeData),
GestureDetector( cursorColor: Styles.searchCursorColor,
onTap: () { ),
controller.clear(); ),
}, GestureDetector(
child: Icon( onTap: () {
CupertinoIcons.clear_thick_circled, controller.clear();
semanticLabel: 'Clear search terms', },
color: Styles.searchIconColor, child: Icon(
), CupertinoIcons.clear_thick_circled,
), semanticLabel: 'Clear search terms',
], color: Styles.searchIconColor,
),
),
],
),
),
), ),
filter: ImageFilter.blur(sigmaY: 5, sigmaX: 5),
), ),
); );
} }